详解从零搭建 vue2 vue-router2 webpack3 工程

日期：2020-05-11 栏目：程序人生浏览：次

以新手视角，详细介绍各个步骤内容，不深入讲步骤涉及的原理，主要介绍如何操作。

初始化工程

新建工程目录 vue2practice，在目录下执行npm init -y来创建一个 package.json，在 package.json 中先添加以下必备模块：

{

 "name": "vue2-vue-router2-webpack3",

 "version": "1.0.0",

 "devDependencies": {

  "vue": "^2.4.2",

  "vue-loader": "^13.0.2",

  "vue-router": "^2.7.0",

  "vue-template-compiler": "^2.4.2",

  "webpack": "^3.4.1",

  "webpack-dev-server": "^2.6.1"

 }

}

其中 vue-template-compiler 是 vue-loader 的 peerDependencies，npm3 不会自动安装 peerDependencies，然而 vue-template-compiler 又是必备的，那为什么作者不将其放到 dependencies 中呢？有人在 github 上提过这个问题，我大致翻译一下作者的回答（仅供参考）：这样做的原因是因为没有可靠的方式来固定嵌套依赖的关系，怎么理解这句话？首先 vue-template-compiler 和 vue 的版本号是一致的（目前是同步更新），将 vue-template-compiler 指定为 vue-loader 的 dependencies 并不能保证 vue-template-compiler 和 vue 的版本号是相同的，让用户自己指定版本才能保证这一点。查看作者的回答（英文）。如果两者版本不一致，运行时会出现下图所示的错误提示。

新建目录结构如下，新增的目录及文件先空着，后面的步骤会说明添加什么内容。

vue2pratice

  |-- package.json

  |-- index.html     // 启动页面

  |-- webpack.config.js // webpack配置文件

  |-- src

    |-- views    // vue页面组件目录

    |-- main.js   // 入口文件

    |-- router.js  // vue-router配置

    |-- app.vue   // 工程首页组件

配置Webpack

Webpack 默认读取 webpack.config.js，文件名不能随便改，其中 entry 是必须配置的。

module.exports = {

  entry: './src/main.js',

  output: {

    path: __dirname + '/dist',

    publicPath: '/static/',

    filename: 'build.js'

  }

}

Webpack 2+ 要求output.path必须为绝对路径。

配置 webpack-dev-server，只需在 package.json 添加以下启动命令即可。

"scripts": {

 "dev": "webpack-dev-server --hot --open"

}

webpack-dev-server 2 默认为 inline 模式，热模块替换仍需自己设置。

验证配置

在 index.html 中添加测试代码，引入打包后的 JS 文件。

<body>

  Hello, Webpack 3.

  <br>

  <script src="/static/build.js"></script>

</body>

转载注明出处：http://www.heiqu.com/700.html

详解从零搭建 vue2 vue-router2 webpack3 工程

相关推荐