官网：http://cn.vuejs.org/guide/
vue-router中文文档：http://router.vuejs.org/
一、前提
1、先安装node
安装地址：https://nodejs.org/en/ (npm也会安装成功，npm是node包管理工具)
2、命令行
node -v
npm -v
若能出现版本号，表明安装成功；否则需要重装、
【通过 npm 命令来升级】npm install npm -g //windows
二、安装webpack
1、创建项目，在根目录生成package.json文件
mkdir project-name //新建项目名
cd project-name //切换到项目路径下
npm init //生成package.json文件,一直回车就可以
2、安装webpack
npm install -g webpack
npm install -g webpack-dev-server //安装webpack的本地webserver
3、安装项目依赖
- webpack只能处理JavaScript；
- 所以要引入其他loader来处理各种类型的文件（loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果）
- 通过require来加载任何类型的模块或文件，如VUE、JSX、SASS或图片
css-loader：编译写入css
style-loader：把编译后的css整合进html
file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合
vue：vue主程序
vue-laoder：编译写入.vue文件
vue-html-loader：编译vue的template部分
vue-style-loader：编译vue的样式部分
vue-hot-reload-api：webpack对vue实现热替换
babel-core：ES2015编译核心
babel-loader：编译写入ES2015文档
babel-preset-es2015：ES2015语法
babel-preset-stage-0：开启测试功能
babel-runtime：babel执行环境
webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并
例如：
npm install css-loader style-loader --save-dev
package.json中变化：
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
较好的安装依赖方式是：
在package.json中，添加相应的依赖（文件如下），之后的命令行中运行npm install，则会自动安装相应的依赖。
{
"name": "webpackvue",
"version": "1.0.0",
"description": "",
"main": "vue.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.2",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^1.0.24",
"vue-router": "^0.7.13",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.13.0"
},
"dependencies": {
"vue-resource": "^0.9.3"
}
}
4、配置webpack.config.js
手动创建webpack.config.js
var path = require('path');
module.exports = {
entry: ['./src/main.js'],
//项目入口文件的路径，可以有多个文件，单个文件可以不用中括号
output: {
//定义webpack输出的文件，这里设置了文件输出在dist文件夹下面的build.js
path: './dist',
publicPath:'dist/',
filename: 'build.js'
},
//配置自动刷新,如果打开会使浏览器刷新而不是热替换
/*devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},*/
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/, //这里是匹配文件的正则
loader: 'babel', //这里是指定调用loader去处理对应文件类型
exclude: /node_modules/
},
//解析.vue文件
{
test:/\.vue$/,
loader:'vue'
},
//图片转化，小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
vue:{
loaders:{
js:'babel'
}
},
resolve: {
// require时省略的扩展名，如：require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 别名，可以直接使用别名来代表设定的路径以及其他
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
}
}
- entry：指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。 当然如果你只有一个入口的话，也可以直接使用双引号"./main.js"
- output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
- module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。
-
注意：配置babel需要创建.babelrc，不可以新建文本.txt再该后缀，应该通过命令行 mkdir .babelrc新建该文件，再打开文件写入
{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] }
三、使用webpack
1、构建 “webpack”
配置好webpack.config.js后，命令行执行 webpack
这样，entry入口文件都压缩到指定目录下生成一个文件build.js，index.html引入build即可。然后可以打开index.html看效果。 （每次修改文件之后，都需要再次执行此命令。）
2、webpack-dev-server
执行命令行webpack-dev-server
启动服务器之后，在浏览器输入http://localhost:8080，则可打开项目。每次修改完代码只需刷新浏览器则可
四、使用Vue.js实现SPA应用
路由配置文件main.js
import Vue from 'vue'; //引入vue
import VueResource from 'vue-resource'; //引入vue-resource,用于请求数据
import VueRouter from 'vue-router'; //引入vue-router,路由
import App from './app.vue'; //下面是自己写的组件，全部都在main.js引进
import home from './components/home.vue';
import list from './components/list.vue';
import hello from './components/hello.vue';
Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend(App);
var router = new VueRouter();
//配置路由
router.map({
'/home':{
component:home
},
'/list':{
component:list
},
'/hello':{
component:hello
}
})
//配置路由默认进入的页面
router.redirect({
'/':'home'
})
router.start(app,'#app');
window.router = router;
资料来源：
http://www.qdfuns.com/notes/15904/cad84afddab13604f987cbf511d265e4.html
