安装好后package.json多了一行webpack指令
说明：这里和往后内容使用
cnpm是因为我本地安装淘宝镜像，用cnpm配置安装命令行更快
安装好后package.json多了一行webpack-dev-server指令
说明：配置好这条指令后就可以在命令板中输入npm run dev运行项目；在浏览器显示的地址是默认的 :8080/；如果不想要默认，可以改端口为：在package.json文件的scripts改dev为："webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
在webpack.config.js配置以下内容：入口配置和出口配置
需要特别注意：dirname前面是有两横（我就设置了一条横线，导致报错，看似小问题，可这坑不小，因为没留意，都找不到这bug）
在index.html中设置以下内容：（需要把main.js入口文件引入index.html文件中）
输入npm run dev运行项目，下面显示命令行是成功调用：
调用成功后自动打开浏览器显示页面内容：端口默认为8080
在main.js文件里修改index.html文件里面的内容，再运行项目看看浏览器显示内容的变化情况：
因为配置webpack-dev-server的热更新功能，修改后浏览器会自动更新修改后的内容：（说明前面的命令行配置成功）
可以按f12，在浏览器的调试模式里查看到websocket
说明：生成目录dist中的main.js，这是个打包过程
已经生成dist目录的mainjs打包文件
配置css-loader命令行
配置style-loader命令行
配置css-loader/style-loader命令行后，在webpack.config.js配置文件里配置loader，增加对.css文件的处理
在项目目录下新建一个style.css文件
然后在main.js入口文件里面用import引入：
浏览器自动更新内容的字体样式（启动热更新功能）
此时可以在浏览器可以看到css是通过js动态创建<style>标签来写入的
配置插件后在package.json中有显示配置后的extract-text-webpack-plugin命令行
配置好插件后也需要修改webpack.config.js配置文件为以下内容：
最后在index.html中引入main.css文件（.vue为后缀的文件中的style样式都统一打包在main.css文件中）
需要配置以下的所有命令:例如需要用到.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置；要使用es6语法，需要安装babel和babel-loader等加载器（注意一条都不能配置漏，不然出现报错可能影响往后的运行与配置）：
配置好以上的命令行，package.json添加这些命令行
配置以上命令行后，在webpack.config.js配置文件中设置以下内容：
说明：vue-loader在编译.vue文件时，会对<template>、<script>、<style>分别处理，所以在vue-loader选项里多了一项options来进一步对不同语言进行配置，如在对css处理时，会先通过css-loader解析，然后把处理结果再交给vue-style-loader处理
把app.vue引入入口文件main.js：
浏览器自动更新显示：
在浏览器的调试模式中会看到div标签中出现属性data-v-xxx ，那是因为使用了<style scoped>，样式只作用本组件中；如果去掉scoped，div标签就没有data-v-属性，只是单纯的普通标签<div>文本数据</div>
然后把这两个组件导入app.vue根组件中
配置后需要在webpack.config.js文件中配置test/loader
新建一个image文件夹放图片
在app.vue根组件里面加入img标签
浏览器自动更新显示
配置后在目录新建webpack.prod.config.js生产环境的配置文件（该文件在基本配置文件的基础上扩展）
配置打包依赖后在package.json文件里加入build的快捷脚本打包
补充说明：ejs是一个javascript模板库，用来从json数据中生成html字符串，常用于node.js
npm run build 打包后的静态资源main.css/main.js/jpg（css文件，js文件，图片）
附上github（配置后的项目demo）：
https://www.jianshu.com/u/3908e601f4ec
。。。终于完结，感觉码了好久（感谢大家阅读完到这里），以上的内容有不对或者不好地方，欢迎指出，往后还会更新有关vue-router和vuex的文章，希望分享的文章对大家有帮助！
Vue是：构建用户界面的渐进式框架，可以自底向上逐层应用（大概是这个意思？由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。）
（前期刚学时不建议直接安装vue-cli脚手架，可以直接通过<script></script>引入，如：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>然后直接用就行了）
1.首先Windows+R 打开cmd；输入npm -v 和node -v 检测是否安装了npm和node.js，没安装先去安装node.js（npm是随node.js一起安装的包管理工具，就不用安装了）附上node.js安装地址：
2.然后还需要淘宝镜像安装cnpm和webpack支撑（有时候安装依赖特别慢 就会用到cnpm）
淘宝镜像安装cnpm命令：
安装之后 执行cnpm -v，如果出现相应的版本号就是安装成功
webpack安装命令：
安装之后 执行webpack -v，它会问你：
直接回车就可以，然后再执行webpack -v，如果出现相应的版本号就是安装成功
3.最后就是安装vue-cli脚手架了
vue-cli脚手架安装命令：
安装之后 执行 vue -V ，如果出现相应的版本号就是安装成功
4.用vue-cli创建一个基于webpack的新项目并运行
首先可以在桌面新建一个文件夹，如：Vue
然后执行cd Vue 进入文件夹，然后输入以下命令新建项目，回车
然后根据提示一路回车，这时文件夹下就会有很多相关文件了
最后用cnpm安装依赖：
最后的最后 就是运行项目啦 输入以下命令：
或者以下命令也可以：
如果成功的话，一般就是提醒你可以在浏览器地址栏输入以下地址就能正常访问了
至此，应该就可以正常访问一个新建的项目了，接下来的就是在新项目中通过组件、事件、指令等等丰富项目。
本文根据vue.js官方文档学习总结。附上官方文档：
能够显示版本号，说明环境已经安装好了。
注意：该命令需要在联网状态下执行才能成功。
这样一个简单的 vue 项目就建立完成。
项目文件结构如下图：
按照提示，打开浏览器输入地址： http://localhost:8080
最终结果如下：
到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。
