使用vue-cli+webpack搭建VUE开发环境

使用vue-cli+webpack搭建VUE开发环境

1. 在这里我们需要首先下载node，因为我们要用到npm（cnpm）包下载，是基于node.js的。附node.js下载地址官网地址(https://nodejs.org/en/)
2. 之后就在本机电脑打开命令提示符窗口（开始–搜索–输入cmd–回车）直接输入node -v查看node.js的版本
3. 没问题之后开始下载webpack； 输入npm（cnpm）install webpack -g（cnpm淘宝命令快速–install下载的意思–webpack-g全局下载）附淘宝npm镜像使用方法【同代码爱好者记录】(https://blog.csdn.net/quuqu/article/details/64121812)
4. 开始全局安装vue-cli(vue脚手架) npm(cnpm) install vue-cli -g 回车
5. 然后输入vue -V 查看vue版本没问题
6. 开始输入 vue init webpack (webpack-simple小型项目使用) 随便一个项目名{vue init webpack vue-app}（init初始化webpack）webpack-simple搭建，因为它没有严格的规范，相对于大多数程序员来说比较好
7. 注释一下（在命令符中输入cnpm info vue-cli查看vue-cli历史版本）
8. 上面接着说（下载完之后会出现）一些系统提示的cd vue-app和npm run dev
9. 按着这个输入就行
10. 然后等着100%完成之后会出现
    
11. 在谷歌浏览器搜索中输入localhost:8080回车就能出来（如果不行就写全localhost:8080/App-vue你的那个文件夹名）
12. 此时就基本可以使用了，但是有个问题，鼠标右键点击检查在connsole里面会有一大堆的警告（怎么处理呢）
13. 首先为什么会出现这些个警告呢（这里其实是因为Eslint）
    【 ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码，尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格，特别是当工程变得越来越大、越来越多的人参与进来时，需要加强一些最佳实践。】
14. 找到自己的那个文件夹打开
15. 
16. 在里面找到built文件夹打开找到图中红线所标处
17. 
18. 然后在当前js文件中找到红线部分注释掉
19. 最后在命令符中重启 npm run dev 等待100%
20. 浏览器刷新一下页面就好了，那些警告就会消失。
21. 最后就可以使用当前的webpack+vue搭建的环境了。