前言
大佬们告诉我vue框架好，大佬们告诉我要用vue就要先知道webpack。
emmm，找几篇博文看看。。。WTF？他的这个文件怎么创建的？WTF？为啥我这里没有这个？WTF。。。
好吧，试了一整天，终于找到一个可行的方案，至少。。。运行起来了，跟一起学习的大家分享一下。
开始
首先，我们需要安装npm+nodjs，这个。。。应该都有吧。。。
这个我就不多说了，没有的话就点下面的飞机学习安装npm+nodejs环境好了
http://www.runoob.com/nodejs/nodejs-npm.html
打开你的命令行工具，个人推荐gitbash。。。嗯。。。又是一个需要自己去了解下载的东西。
第一步——安装webpack全局环境
npm install -g webpack //全局安装webpack
npm install -g webpack-dev-server //全局安装调试工具
第二步——创建项目
为你的项目创建一个文件夹
mkdir [projectName] //工程名称自己随意啦
cd [projectName]//进入到你的工程目录下
npm init//初始化项目，会在你的工程目录下创建出一个package.json，后面的配置项可以填也可以一路回车，后面都可以修改的。
这个时候我的工程目录就是下面这个样子了（client就是我的工程根文件夹）：
package.json文件默认的样子：
第三步——安装项目依赖
这一步有两种方法：
⑴用npm install xxxx xxx xxx xxxx xxx --save-dev命令来安装，前提是你知道你需要的依赖是什么。
⑵复制别人的package.json中的devDependencies到自己的package.json中，然后使用npm install命令一键安装，像我这种比较偷懒的人。。。绝佳选择。献上一份package.json
{
"name": "client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"chai": "^3.5.0",
"chalk": "^1.1.3",
"chromedriver": "^2.21.2",
"connect-history-api-fallback": "^1.1.0",
"cross-spawn": "^4.0.2",
"css-loader": "^0.25.0",
"eslint": "^3.7.1",
"eslint-config-standard": "^6.1.0",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.5.0",
"eslint-plugin-html": "^1.3.0",
"eslint-plugin-promise": "^2.0.1",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.17.2",
"inject-loader": "^2.0.1",
"isparta-loader": "^2.0.0",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sinon-chai": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.7.0",
"lolex": "^1.4.0",
"mocha": "^3.1.0",
"nightwatch": "^0.9.8",
"opn": "^4.0.2",
"ora": "^0.3.0",
"phantomjs-prebuilt": "^2.1.3",
"selenium-server": "2.53.1",
"semver": "^5.3.0",
"shelljs": "^0.7.4",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"style-loader": "^0.13.1",
"stylus": "^0.54.5",
"stylus-loader": "^2.4.0",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"
}
}
第四步——添加webpack配置文件webpack.config.js
在根目录下创建webpack.config.js文件
下面是一份webpack.config.js的代码。。。hummm，能说的里面注释里都说了：
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' //loader来这里吧。
}
},
resolve: {
// require时省略的扩展名，如：require('app') 不需要app.js
extensions: ['', '.js', '.vue'],
// 配置简写，路径可以省略文件类型
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
}
}
第五步——安装vue
webpack的安装和初步配置到此结束，下面安装vue：
npm install -g vue-cli //全局安装vue-cli
cd .. //emmm,退回到根目录的上一层目录，在我的项目里的就是进入到__kaopu目录中
vue init webpack [projectname]//这个projectname跟你一开始创建的那个要一样哦，不然他会给你重新创建一个项目。。。囧，后面也是一路回车，当然也可以自己选择一下配置项哦
cd [projectname]//再次进入到工程目录根目录中
npm install//初始化安装依赖
然后piapiapia会在工程目录中安装好多东西，emmm，就是vue的目录结构，很丰满：
第六步——验货
emmm，其实已经初步配置完了，后面详细的配置就需要深入的再学习一下了
下面使用命令
npm run dev将项目跑起来
然后打开一个浏览器，访问localhost:8080
如果你看到下面这个页面，ok，环境就算成功了：
感谢 @夏味SS 大佬指出的问题，给出夏味大佬的博客链接，待我学习之后回来改正文章内容——20170320/0:07
