准备
工具：
1、node.js
2、webpack
3、vue.js
说明：在进行之前请先安装node.js，因为接下来的工作都基于node.js环境。比如webpack就是基于node.js才能运行，另外我们还要使用npm ，npm被集成在在node.js中。
npm 介绍 ：https://zhuanlan.zhihu.com/p/24357770
http://www.jianshu.com/p/cc4ab46eca2f
webpack配置文件介绍 http://www.cnblogs.com/xiaotaiyang/p/5591195.html
开始
1、创建项目目录结构：
进入网页肯定需要一个网页的入口，所以首先创建一个项目入口文件我把他命名为index.html，然后需要提供给webpack一个入口然后webpack才能根据这个文件寻找其他依赖，最后才能完成打包。创建了一个webpack入口，官方推荐的是main.js，所以我也这么干。其次创建webpack的配置文件webpack.config.js，然后还需要一个存放VUE组件的地方，我新建了一个文件夹叫components，致此项目结构如图：
2、安装所需模块
首先要确定你机已经安装了node.js。我们先想一下我们需要哪些东西？
（1）、我们需要webpack来打包所以需要安装webpack
（2）、我们要用到vue.js这是毋庸置疑的。
好了，这是我们的初步需要。那么我们来安装吧。我们已经安装了node.js所以现在npm已经可以用了。首先打开命令行切换到项目目录下：
执行命令 npm init （一路回车就行）来初始化npm仓库 然后就会生成一个package.json文件(后面会讲到这个文件)
然后 执行 npm install webpack 命令来安装webpack
现在看一下package.json 是不是增加了一项？
这是npm为你自动添加的依赖说明，就是告诉其他拿到这个项目的人，我的项目需要这些东西，当你执行npm install的时候npm自动查看package.json文件的dependencies和devDependencies，看看你的项目需要的模块，然后哪怕npm自动帮你下载。package.json也是一个说明文件。
执行npm install vue 命令来安装 vue，可以发现package.json文件的dependencies也把刚安装的vue也写进去了，
使用npm安装的东西会放到node_modules文件夹中。
然后我们打开webpack.config.js文件
使用npm安装的东西会放到node_modules文件夹中。
webpack之所以能够打包各类文件是因为的加载器品类繁多，所以现在我们需要安装加载器了
1、我们需要打包的文件有css、内联style、vue中的html、vue。
2、我们要实现模块化要使用es6语法 import 、export 等 ，所以要把es6转换成浏览器可以识别的语法（es5）需要babel-loader
综上我们需要的loader有：
css-loader style-loader vue-loader vue-html-loader babel-loader
执行 npm install 加载器名称 即可安装。
安装的时候会遇到像下面这条警告，大概意思是安装这个模块依赖另一个模块 但是另一个模块没有安装，所以要把他提示的那个模块使用npm install 来安装
3、配置
然后我们打开webpack.config.js文件，写入（不同的webpack版本，配置文件的书写方式也不一样，可以上网查询这方面的介绍。）
var webpack=require('webpack');
module.exports={
//指定webpack从哪里开始查找依赖
entry:{
app:'./main.js'
},
//指定生成文件路径
output:{
path:__dirname,
filename:'bundle.js'
},
module:{
//用正则来匹配，不同的文件对应不同的加载器
loaders:[
{test:/\.vue$/, loader:'vue-loader'},
{test:/\.js$/, loader:'babel-loader', exclude:/node_modules/},
//exclude是指除外，意思是加载js时候除了node_modules里的不用检测
{test: /\.css$/,loader:'css-loader'}
]
},
//声明所用的插件
plugins:[
new webpack.LoaderOptionsPlugin({
options: {
babel:{
presets:['es2015'],
plugins:['transform-runtime']
}
}
})
],
//其他解析办法
resolve: {
//别名，接下来的文件里的vue/dist/vue.js可以用vue代替
alias: {vue: 'vue/dist/vue.js'}
}
};
接下来编辑App.vue
<template>
<div>
<h1>welcome Vue</h1>
<h2 @click="change">{{msg}}</h2>
</div>
</template>
<script>
export default{
data(){
return {
msg:'welcome Vue ^_^'
}
},
methods:{
change(){
this.msg='wahaha'
}
},
}
</script>
<style>
body{
background: #ccc }
</style>这时候执行 webpack –watch –progress –hide-modules 实时打包
但是这时候会报错 ，说没有这webpack这个命令，这是环境变量的问题，这时候可以手动设置环境变量，也可以切换路径到下面这个来执行webpack命令
/node_modules/.bin/
基于node.js开发的项目可以分为开发环境和生产环境，开发环境一般而言会在代码中部署诸多测试用的代码、警告甚至是库。
而生产环境追求的是快速化、最小化，这些东西是没必要放到生产环境中的。
举个例子：
Vue的开发版本总共有200+kb，而生产版本只有24kb，功能是完全一样的，原因就是开发版本的错误警告和调试信息占据了绝大部分体积。
当然，具体的区别还是要看项目是怎么规划的。在执行命令前我们可以先设置一下环境变量（开发版或生产），我们可以在webpack.config.js中读取这个配置，对环境变量是生产环境或开发环境做出不同的操作，如
if (process.env.NODE_ENV === "production"){
/*
*一些操作
*/
} 我们可以安装一个跨平台动态设置环境变量的插件 cross-env 来设置 。安装之后可以这样执行命令 cross-env NODE_ENV=development webpack –watch –progress –hide-modules
但是这样执行命令太过麻烦，所以现在我们打开package.json文件 把这条命令在script项中加入，并对于相应的简便命令，如果不想区分开发还是生产也行，那么只执行 webpack –watch –progress –hide-modules就可以了，如
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules"
},我们只要执行npm run dev 就能执行这一大串命令
执行完后就会生成我们webpack.config.js中 output指定的文件及目录。
将这个文件在html（index.html）里用< script>标签引入，并创建vue容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- vue容器 -->
<div id="app">
</div>
</body>
<!-- 引入打包后的文件 -->
<script src="./bundle.js"></script>
</html>main.js文件
import Vue from 'vue'
import App from './App.vue'
new Vue({
//相当于dom选择器，选择vue容器
el:'#app',
//渲染
render:h=>h(App)
});我是新手，第一次搭这个，可能有些地方理解的不对，还望大神们指正。
