2018-08-03

Vue

8 分钟读完 (大约 1200 个字)

从零开始搭建Webpack+Vue项目

在使用Vue开发时，我们大多数会使用官方的vue-cli，主要特点包括：

基于webpack构建，带有合理的默认配置
快速零配置原型开发
包含丰富的官方插件集合
通过它我们可以快速开发一个完整的系统。本文就带领大家从零开始来搭建一个最精简、可运行、基于webpack3构建的Vue(2.x)项目。这能让我们了解到webpack和vue在我们日常开发中所处的地位，帮助我们学习或回顾webpack一些配置属性。

1、构建Node环境

我们需要先使用npm包管理工具构建项目所需的Node环境，安装一些必要的依赖包。

npm init - 初始化项目，自动创建package.json描述文件
npm i -D webpack@3.1 vue vue-loader vue-template-compiler
- webpack - 模块打包工具，用于将我们构建的项目打包，@3.1表示制定版本号
- vue - MVVM的视图层框架，用它来支持我们的vue相关特性
- vue-loader - webpack的loader，使我们可以使用单文件组件的方式编写vue
- vue-template-compiler - vue的模板编译工具，用于将vue template内容编译成render function

2、编写所需index.html和main.js

index.html作为SPA（单页应用）的载体，未来需要引入打包完成后的文件。
main.js作为webpack的入口文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Webpack Vue</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="./dist/bundle.js"></script>
<!-- defer的目的是为了将dom解析完成后在执行js文件（延迟执行），也可以放在</body>之前  --> 
</head>
<body>
    <div id="app"></div>
</body>
</html>

1 2	const dom = document.getElementById("app") console.log(dom)

3、编写webpack配置文件

"use strict"
const path = require("path")
module.exports = {
    // 入口文件 
    entry: './src/main.js',
    // 最终输出 ，在index.html中引入
    output: {
        filename: "bundle.js",
        // 使用path合成绝对路径 
        path: path.resolve(__dirname, "../dist")
    }
}

将上述配置保存在build/webpack.config.js下，切换到项目根目录运行webpack –config ./build/webpack.config.js命令，webpack就会根据配置文件来进行打包。

为了方便编译，我们为npm script加入webpack命令：

1	"build": "webpack --config ./build/webpack.config.js"

项目目录增加了biuld及dist后：

这个时候在浏览器中运行index.html便会发现输出了DOM，接下来我们就可以为项目添加Vue支持了。

4、添加 Vue 支持

1、编写App.vue

<template>
<div id="root">
    <h3>v-for render list</h3>
    <ul>
    <li
        v-for="(item, index) in list"
        :key="index"
    >
        {{index}}
    </li>
    </ul>
</div>
</template>
<script>
export default {
    name: "App",
    data: function () {
        return {
            list: new Array(5)
        }
    }
}
</script>

在App.vue中我们使用到了vue的指令、数据响应式等特性。

2、为webpack添加vue-loader

"use strict"
const path = require("path")
const {VueLoaderPlugin} = require("vue-loader") 
module.exports = {
...
module: {
    rules: [
        {
            test: /.vue$/,
            loader: "vue-loader"
        }
    ]
},
plugins: [
    new VueLoaderPlugin()
]
}

在module中添加vue文件的解析规则，文件后缀为vue的文件采用vue-loader解析；
添加VueLoaderPlugin，这个插件是必须的，它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 script 块。

3、改写main.js

是时候让index.html和App.vue发生关联了。

import Vue from &quot;vue&quot;
import App from "./App.vue"
export default new Vue({
    el: "#app",
    components: {
        App
    },
    template: `<App />`
})

初始化Vue，将其挂在在#app上，并且将App组件渲染其中。
这个时候再次运行npm run build进行编译，well done。
刷新页面，发现报错了！

这是因为Vue分为运行时版本和编译+运行时版本。运行时版本要比较小，前提是已经生成了编译后的render function字符串。
在mins.js初始化Vue时，我们使用了template属性，需要引入带编译器的完整版的vue.esm.js，可以再webpack.config.js中设置vue别名来解决这个问题：

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

再次编译后就可以成功查看页面。
另一种解决方案更直接，在main.js中将template属性设置的方式改为render function的方式：

1 2	// template: `<App />` render: h=>h(App)

那么在App.vue中的template呢？其实App.vue中的template已经被vue-loader处理了。

至此我们已经使用了最少的代码构建了一个简单可用的webpack+vue项目。另外可以根据自己需要为项目添加webpack-dev-server及babel的支持。

# vue, webpack

支付宝

微信