Vue学习笔记（十五）——搭建基于webpack的vue开发环境

小咪咪 2022-01-14 10:49 220阅读 0赞

参考文档：[https://segmentfault.com/a/1190000012789253?utm\_source=tag-newest][https_segmentfault.com_a_1190000012789253_utm_source_tag-newest]

***依次执行文档贴出的命令即可完成基于webpack的vue开发环境的搭建，如果无法成功搭建（如某一步骤发生错误）请在文档下留言以便笔者更正。***

### package.json（如果无法成功搭建，请先检查组件版本） ###

{ 
      "name": "webpack-vue",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "dev": "webpack-dev-server --open --hot",
        "build": "webpack --progress --hide-modules"
      },
      "author": "",
      "license": "ISC",
      "dependencies": { 
        "html-webpack-plugin": "^3.2.0",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.34.0",
        "webpack-cli": "^3.3.4",
        "webpack-dev-server": "^3.7.1"
      }
    }

### 环境准备（首先搭建webpack环境，故vue会在后面的步骤安装） ###

1.初始化工程：

npm init

2.安装webpack

npm install webpack

3.安装webpack-cli

npm install webpack-cli

4.安装webpack-dev-server

npm install webpack-dev-server

5.安装html-webpack-plugin

npm install html-webpack-plugin

6.替换工程根目录下package.json文件scripts的值：

"scripts": { 
        "dev": "webpack-dev-server --open --hot",
        "build": "webpack --progress --hide-modules"
      }

7.在工程根目录下新增webpack.config.js文件，内容如下：

'use strict';
    const path = require("path");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
        entry: { 
            "main": "./src/main.js"
        },
        output: { 
            path: path.resolve(__dirname, "build"),
            filename: "[name].js"
        },
        devServer: { 
            historyApiFallback: true,
            overlay: true
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: 'index.html',
                inject: 'body'
            }),
        ]
    };

### 工程代码 ###

1.在根目录下新增index.html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app"></div>
    </body>
    </html>

2.在根目录下新增src目录，并在src目录下新增main.js：

document.getElementById("app").innerHTML = "app info";

### 检查环境 ###

1.运行工程

npm run dev

页面正常：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]

### 引入vue ###

1.安装vue

npm install vue

2.调整index.html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        {
       {message}}
    </div>
    </body>
    </html>

3.调整main.js：

import Vue from 'vue'
    
    new Vue({ 
        el: '#app',
        data: { 
            message: "app info"
        }
    });

### 检查引入vue后的环境 ###

1.运行工程：

npm run dev

页面控制台报错：

\[Vue warn\]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

如下图：  
![在这里插入图片描述][20190614180204768.jpg]

这是由于直接import Vue from 'vue’使用的是vue的运行时版本，而开发时通常需要使用vue的完整版本。

2.在webpack.config.js增加以下代码（用于引用vue的完整版本）：

resolve: { 
            alias: { 
                'vue$': 'vue/dist/vue.esm.js'
            }
        }

2.再次运行工程：

npm run dev

页面恢复正常（这里不再重复贴图）。

### 支持引入.vue文件 ###

1.安装vue-loader

npm install vue-loader

2.安装vue-template-compiler

npm install vue-template-compiler

3.更新webpack.config.js（用于引用vue-loader）：

'use strict';
    const path = require("path");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    module.exports = { 
        entry: { 
            "main": "./src/main.js"
        },
        output: { 
            path: path.resolve(__dirname, "build"),
            filename: "[name].js"
        },
        devServer: { 
            historyApiFallback: true,
            overlay: true
        },
        resolve: { 
            alias: { 
                'vue$': 'vue/dist/vue.esm.js'
            }
        },
        module: { 
            rules: [
                { 
                    test: /\.vue$/,
                    loader: 'vue-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: 'index.html',
                inject: 'body'
            }),
            new VueLoaderPlugin()
        ]
    };

4.新增自定义组件component-a：

<template>
        <span>it is component a</span>
    </template>
    
    <script>
        export default { 
            name: "component-a"
        }
    </script>
    
    <style scoped>
    
    </style>

5.调整main.js（引用组件component-a）：

import Vue from 'vue'
    import ComponentA from './components/ComponentA.vue'
    
    new Vue({ 
        el: '#app',
        components: {  ComponentA },
        template: '<component-a></component-a>'
    });

6.调整index.html：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
    </div>
    </body>
    </html>

7.运行工程：

npm run dev

页面正常（组件正常显示）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]

至此一个基于webpack的基础vue开发环境就搭建完成了。

[https_segmentfault.com_a_1190000012789253_utm_source_tag-newest]: https://segmentfault.com/a/1190000012789253?utm_source=tag-newest
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70]: /images/20220114/3750a020697f4ad8b2ce3b567826a484.png
[20190614180204768.jpg]: /images/20220114/439ea90db46145d4876b65a59730bb36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxbHFscTAwNw_size_16_color_FFFFFF_t_70 1]: /images/20220114/7c58104e49624d24b2bd136a202ae937.png