本篇文章主如果我在开辟前研讨了webpack+vue.js的单页面运用，因为须要用到node的npm，所以确保装置了node，发起官网装置最新的稳固版本。而且在项目中须要加载一些npm包，因为npm的服务器在国外，能够我们下载的历程会比较慢，所以发起用阿里的镜像cnpm装置，10分钟及时更新一次npm的镜像。细致的下载设置参考阿里的cnpm官网。本文章只是和人人讨论怎样应用webpack合营vue.js做一个单页面运用，细致关于vue内里的内容怎样写并不在本篇文章的引见局限。细致请参考官方文档，内里做了细致的vue的语法引见.
发起阅读前预备内容
阅读过webpack文档
阅读过vue-router文档
晓得什么叫单页面运用
1. 定义我们demo的基础目次
├── README.md
├── index.html // 项目进口文件
├── package.json // 项目设置文件
├── src // 临盆目次
│ ├── vue // 组件
│ | ├──home.vue
│ | ├──blog.vue
│ | ├──about.vue
│ | ├──topic.vue
│ ├── components // 种种组件
│ ├── views // css文件
│ ├── scss //scss文件
│ └── main.js // Webpack 预编译进口
└── webpack.js // Webpack 设置文件
2. 设置一下我们的webpack.js文件
在引见怎样设置之前你须要控制一个敕令 npm install <模块> --save-dev这个敕令的意义是这个定名的意义是我们装置了这个包而且把它的基础信息写入目次的package.json文件。另有一个敕令是我们直接运转cnpm install会自动下载package.json内里写入的包.
在webpack的设置文件我们须要用到四个npm的模块分别是：path，webpack，extract-text-webpack-plugin,vue-loader记得先下载包在用require敕令引入进来
//node的途径模块
var path=require('path');
//我们是webpack固然要引入这个
var webpack = require('webpack');
//这个是构建页面资本的插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
//因为我们是vue.js的运用，把各个组件当作一个页面.vue后缀，所以引入这个能够编译这些文件
var vue = require("vue-loader");
好了，我们已把须要的模块引入进来了，接下来我们定义一些接下来要用到的一些文件夹途径
//__dirname是node内里的一个变量，指向的是当前文件夹目次
var ROOT_PATH = path.resolve(__dirname);
//这个我们的文件进口，等下我们就会从main.js这个文件作为进口
var APP_PATH = path.resolve(ROOT_PATH, 'src/main.js');
//这个是文件打包出来的输出途径
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
基础的文件途径我们已定义好了，接下来我们要用到extract-text-webpack-plugin这个插件了
var plugins = [
//提公用js到common.js文件中
new webpack.optimize.CommonsChunkPlugin('common.js'),
//将款式一致宣布到style.css中
new ExtractTextPlugin("style.css"),
// 运用 ProvidePlugin 加载运用率高的依靠库
new webpack.ProvidePlugin({
$: 'webpack-zepto'
})
];接下来是webpack的重点了loader，webpack的头脑是把每一个静态资本文件当作一个模块加载，我们须要做一些设置，在这里我们须要用到编译css，sass模块，多以我们还须要装置’css-loader’,’style-loader’,’node-sass’,’md5′
module.exports = {
//文件的进口，还能够写成多数组的情势，细致本身扩大
entry:[APP_PATH],
//输出
output:{
//输出途径
path: BUILD_PATH，
//打包的js定名
filename：build.js'
// 指向异步加载的途径
publicPath : __dirname + '/build/',
// 非主文件的定名划定规矩，加缓存用到md5
chunkFilename: '[id].build.js?[chunkhash]'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue',
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", 'css-loader')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}
]
},
//这个迥殊申明下，vue首倡把一个组件当作一个页面，所以能够在一个页面写html，style，javascript，也能够引入和写scss文件
vue: {
css: ExtractTextPlugin.extract("css"),
sass: ExtractTextPlugin.extract("css!sass-loader")
},
plugins: plugins
}
3. 设置我们的进口文件main.js
这里我们须要三个npm模块，vue，vue-router，vue-resource三个模块，我们顺次装置然后在引入
//vue的运用固然要引，等下要用它来注册
var Vue = require('vue')
//这个是路由，spa运用必要哦
var VueRouter = require('vue-router');
//这个是相似ajax要求,一定要拉去数据啦，所以也下载吧
var VueResource = require('vue-resource');
在vue内里声明并注册个空组件
Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend({});实例化VueRounter
var router = new VueRouter({
// 当hashbang的值为true时，统统的途径都会被格式化已#!开首，
hashbang: true,
history: false,
saveScrollPosition: true,
transitionOnLoad: true
});
接下来写下我们的路由途径，也能够零丁把路由写在一个文件，我们这边只是个demo所以写一起了，不打紧，关于这块路由的写法能够细致参考下vue-router的文档http://router.vuejs.org/zh-cn…，将的很细致。
这里有必要将一下，webpack供应了异步加载功用，合营vue-router的路由运用，当哪一个组件须要衬着是，会加载它依靠的组件，而且异步加载进来。是不是是很棒。
router.map({
'/':{ //首页
component: function (resolve) {
require(['./vue/home.vue'],resolve)
}
},
'/home':{
name : 'home', //首页
component: function (resolve) {
require(['./vue/home.vue'],resolve)
}
},
'/blog':{
name : 'blog', //博客列表
component: function (resolve) {
require(['./vue/blog.vue'],resolve)
}
},
'/blog/topic':{
name : 'topic',
//文章概况
component: function (resolve) {
require(['./vue/topic.vue'],resolve)
}
},
'/about':{
name : 'about',
//关于
component: function (resolve) {
require(['./vue/about.vue'],resolve)
}
}
})
再加句代码，测试接见路由接见是不是胜利
router.afterEach(function (transition) {
console.log('胜利阅读到: ' + transition.to.path)
})
末了我们注册下vue
router.start(app, "#app");
4. 添补下index.html文件的构造
<router-view> 用于衬着婚配的组件，它基于 Vue 的动态组件体系。我们的index.html构造是这模样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人站</title>
<link rel="stylesheet" href="./build/style.css">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="./build/common.js"></script>
<script src="./build/build.js"></script>
</body>
</html>
5. 怎样写一个组件
关于组件，vue首倡一个模块写一个细致的组件比方列表组件能够list.vue，然后依据路由加载细致的组件，组件之间也能够互相的援用，细致参考vue文档。
为了轻易我们测试，我们以home为例，其他组件也相似，轻易等下测试，等项目能完全跑起来你在本身去增加组件内里的内容。
<template>
<div>home</div>
</template>
<script>
// js
</script>
<style>
/*style*/
</style>
6. 运转webpack
关于一个单页面的大致的框架我们已搭建好了，如今直接运转webpack就能把文件载出来了。然后翻开index.html直接测试就好了。更细致的demo已提交到github上了 demo,另有本人运用webpack+vue+es6+sass的手艺栈重构的Cnode中文网单页面运用，感兴趣的能够围观下，迎接star。
7.开辟形式
在现实开辟历程当中我们一定不是每一次修正保留，然后在运转一下webpack敕令，那样就太麻烦了，所以我们用到了热替代，webpack-dev-server这个包，装置好这个包后在pack.json加上
"scripts": {
"start": "webpack-dev-server --hot --inline"
}
而且把webpack.config.js这前我们设置好的
// 指向异步加载的途径
publicPath : __dirname + '/build/';替代为
// 指向异步加载的途径
publicPath : '/build/';为何如许做呢？因为我们这前用webpack是把组件异步加载在当地上，而我们用了热替代后是地点托付到了http://localhost:8080/端口了，所以要去掉__dirname(指向当地根目次),统统预备终了了，接下来直接运转npm start，然后翻开http://localhost:8080/就能够接见，试着修正内容保留能够看看页面及时的在革新，是不是是省了许多的开辟时刻呢！
关于vue-cli
vue.js的原作者为了轻易我们做项目前期消费时刻设置这些自动化构建东西，出了一个vue-cli的脚手架，能够自动天生项目的一系列基础设置。vue-cli的github地点为https://github.com/vuejs/vue-cli，感兴趣的童鞋能够去了解下。
关于vue2.0
2.0已出来了，置信今后人人也要逐步跟上2.0的版本了，2.0在1.0的基础上构建这边有一点点和1.0的区分，听我讲来。
在批评里有位同学说2.0已不支持1.0的路由体式格局了，恩，的确是，这里我把2.0的路由体式格局从新写了下。
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
const Home = resolve => {
require.ensure(['./vue/home.vue'], () => {
resolve(require('./vue/home.vue'));
});
};
const List = resolve => {
require.ensure(['./vue/list.vue'], () => {
resolve(require('./vue/list.vue'));
});
};
const routes = [{
path: '/',
name: 'home',
component: Home
},{
path: '/list',
name: 'list',
component: List
},{
path: '*',
component: Home
}];
const router = new VueRouter({
mode: 'history',
routes
});
new Vue({
router
}).$mount('#app');更多有关于路由的题目请参考vue-router2.0中文文档。
另有一点题目是如果是用webpack构建项目的时刻，要在webpack.confing.js的设置文件加上
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}因为vue2.0有两种构建形式，默许情况下运转构建，然则不能剖析单文件的template模板，所以要运用自力构建。细致能够参考vue2.0中文文档，其他一些关于语法的转变看下2.0的文档就好了，另有vuex不被2.0影响，能够兼容。
寄语：
以为本篇文章对你有协助的话能够关注我一下，后期会出一些关于基于vue.js开辟单页面开辟心得，感谢！
代码已上传在github
