最终效果
So easy~Just do it!
前期准备工作
一、编辑器配置高亮
敲代码没有高亮简直蛋疼，简单带过下
sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车 过一会儿 —→ 再输入vue syntax highlight回车，安装完毕 —→ 点击sublime选择vue component，即高亮
二、webpack知多少
入门 Webpack，看这篇就够了
极力推荐这篇，认真跟着此教程步骤过一遍，webpack能掌握个40%了。
但是！由于依赖项更新，此教程中有很多错误，纠正如下：
1）使用webpack构建本地服务器
........（此处省略部分代码段）......
devServer: {
contentBase:"./public",
colors:true, （误）—→ status: {colors:true} （正）
historyApiFallback:true,
inline: true
}
}
2）Loaders
........（此处省略部分代码段）......
module: {
loaders: [
{
test:/\.json$/,
loader:"json"（误）—→ loader:"json-loader" （正）
}
]
}
**凡是“loader:”后的字段都是xx-loader而不是xx **
3）CSS预处理器
代码会报错，改成
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {importLoaders: 1} //这里可以简单理解为，如果css文件中有import 进来的文件也进行处理
},
{
loader: 'postcss-loader',
options: { // 如果没有options这个选项将会报错 No PostCSS Config found
plugins: (loader) => [
require('autoprefixer')()//CSS浏览器兼容
]
}
}
]
}
Let's Begin
一、新建目录
1、新建一个文件夹（被我命名为vue-webpack-test），在此目录下打开终端，输入npm init，目录下生成一个package.json
2、剩下文件自己新建，目录结构如下：
├── dist //
│ ├── bundle.js//打包后生成的
├── node_modules // npm包安装后生成的
├── src // 静态资源文件
│ ├── components //vue组件
│ │ └── nav.vue
│ │ └── home.vue
│ │ └── about.vue
│ │ └── contact.vue
│ ├── router//vue路由
│ │ └── index.js
│ ├── App.vue
│ └── main.js
├── index.html // 首页模板（得复制一份到dist文件夹里并引用bundle.js）
├── webpack.config.js // webpack配置文件
├── package.json // 包管理文件
二、安装依赖项
//vue相关
"vue": "^2.4.1",
"vue-router": "^2.7.0",
"vue-loader": "^13.0.1",
"vue-template-compiler": "^2.4.1",
//webpack相关
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1",
//babel相关（转换es6）
"babel-loader": "^7.1.1",
"babel-core": "^6.25.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"
三、编写webpack配置文件
在写配置文件之前，我们先要考虑我们要利用这个打包工具完成哪些功能。
1、处理vue
2、处理es6
3、搭建测试服务器
学完之前介绍的webpack教程，有很多代码可以用到这里。
//webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: __dirname + "/src/main.js",//入口文件
output: {
path: __dirname + "/dist",//打包后导出文件夹
filename: "bundle.js"//导出的文件名
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
}
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
devServer: {
contentBase: "./dist",
stats:{colors: true},
historyApiFallback: true,
inline: true
}
}
四、项目启动方式
修改package.json文件里的script字段
"scripts": {
"start": "webpack-dev-server"
}
启动时，打开终端，键入npm start即可运行
五、分析vue组件及路由
1、vue组件
1）整个页面是个组件即App.vue
2）对于App.vue来说分为两大块组件：导航(nav.vue)和每个索引的具体内容
3）索引内容又细分为4个组件：home.vue、about.vue、contact.vue
源码如下：
\\App.vue
<template>
<div id="app">
<navbar></navbar>
<router-view></router-view>
</div>
</template>
<script>
import navbar from './components/nav.vue'
export default {
name: 'app',
components: {navbar}
}
</script>
\\nav.vue
<template>
<ul>
<li><router-link to="home">Home</router-link></li>
<li><router-link to="about">About</router-link></li>
<li><router-link to="contact">Contact me</router-link></li>
</ul>
</template>
<script>
export default {
name: "navbar" //一定不要用nav
}
</script>
\\home.vue
<template>
<div>
<h2>{{msg}}</h2>
<p>
Hello everyone!Welcome to my home.
</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Home'
}
}
}
</script>
\\about.vue
<template>
<div>
<h2>{{msg}}</h2>
<p>
Here's my infomation
</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'about'
}
}
}
</script>
\\contact.vue
<template>
<div>
<h2>{{msg}}</h2>
<p>
Do you love me?Contact me hurry up!
</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Contact Me'
}
}
}
</script>
2、路由
路由很简单，一目了然，源代码如下
\\index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from '../components/home.vue'
import About from '../components/about.vue'
import Contact from '../components/contact.vue'
let routers = [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
},
{
path: '/',
name: 'home',
component: Home
}
];
export default new Router({
routes: routers
})
六、html文件
这个是个遗留问题。
手动在dist里建一个index.html，引用最后打包的bundle.js，才能显示出来
\\index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
思考：怎么让html自动生成，并引用相应的js呢？
（2018.8.10更新下已解决这个问题）
利用html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true//注入js
})
],
具体可以参考这篇：https://www.jianshu.com/p/2b872ae3362d
七、编写入口文件
组件代码写好后，要将主组件App.vue注册到入口文件js里
\\main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
el: '#app',
router: router,
template: '<App/>',
components: { App }
})
再次npm start启动项目，即可完成最开始展示的效果。
报错解决
在做这个项目过程中，一些小问题会导致报错，我把我所遇到的错误罗列如下，希望能解决你的问题。
报错一
//webpack.config.js漏了
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
报错二
component名称不能与 HTML 元素或者 Vue 保留标签重名，不区分大小写。可以发现，只检查了常用的 HTML 元素，还有很多元素没有检查，例如 button、main。所以nav.vue的名称不能使nav，改成navbar。
报错三
路由文件index.js里每个组件的components不能用{}
