快速搭建vue环境

刚刚开始学习vue，由于经常在两台电脑切换，第一台电脑上是跟着学习视频搭建的，第二台电脑上自己独立搭建遇到些“小问题”，记录此文以备不时之需，也希望能够帮到初学者们

1. 安装node (略)
2. 安装vue
   1. npm install vue --save-dev
3. 安装webpack
   1. npm install webpack --save-dev
   2. webpack配置（见下方webpack-dev-serve）
4. 安装webpack-dev-server
   1. npm install web-dev-server --save-dev
   2. 配置文件webpack.config.js

   var HtmlWebpackPlugin = require('html-webpack-plugin');
   var webpack=require("webpack");
   module.exports =
   {
       entry:
       {
           "index":[__dirname+'/src/jssrc/index.js',,'webpack-dev-server/client?http://127.0.0.1:8080']
       },
       output: {
           publicPath: "http://127.0.0.1:8080/",
           path: __dirname+'/src/webapp/js',  //输出文件夹
           filename:'[name].js'   //最终打包生成的文件名(just 文件名，不带路径的哦)
       },
       /*devServer:{
           historyApiFallback:true,
           hot:true,
           inline:true,
           progress:true,
           port:9090 //端口你可以自定义
       },*/
       resolve: {
           alias: {
               vue: 'vue/dist/vue.js'
           }
       },
       externals: {
   
       },
       module:{
           loaders:[
               {test:/\.js$/,loader:"babel",query:{compact:true}},
               {test:/\.vue$/,loader:"babel!vue", exclude: "/node_modules/"}
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               // filename: __dirname+'/src/webapp/index.html',//目标文件
               filename:"index.html",//使用webpack-dev-server时配置
               template: __dirname+'/src/html/index.html',//模板文件
               inject:'body',
               hash:true,
               chunks:["index"]
           })
   
       ]
   
   }
   
   

5. 安装html-webpack-plugin
   1. npm install html-webpack-plugin --save-dev
6. 安装babel
   1. npm install babel-cli babel-loader babel-preset-es2015 --save-dev
   2. babel 配置 .babelrc javascript { "presets": ["es2015"] //解析规则为es2015 }
7. 可能会用到的两个步骤
   1. npm install vue-loader --save-dev
   2. npm install vue-template-compiler --save-dev
8. package.json中配置script

     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "webpackRun": "webpack",
       "webpackServer": "webpack-dev-server --inline --hot --content-base ./src/webapp" --config ./webpack.config.js
     }