vue项目构建中遇到的坑及解决办法
一：如何使用vue-cli创建项目
1、安装好了node.js
2、安装 vue-cli
npm install -g vue-cli //-g表示全局安装
3、创建新项目
vue init webpack 项目名字
4、进入项目文件夹
cd 项目文件夹
5、安装依赖
npm install //在项目文件夹下面执行
6、运行项目
npm run dev
***注意：上述方法是基于vue2.X，已经过时，建议采用更新的基于vue3.X的方式创建***
***项目内运行yarn run build，就会生成一个build文件夹和一个dist文件夹，dist文件夹即压缩处理之后的静态资源文件夹，里面的html文件可以在服务器上运行***
二：vue-cli+webpack项目怎样修改项目名称
使用vue-cli+webpack创建的项目，修改文件名称或者更改文件的位置，运营时会报错，是因为npm项目，在安装依赖（node_nodules）时，会记录当前的文件路径，当修改之后就无法正常启动。
解决办法：
1 、删除 node_modules 文件夹
2、在package.json中修改对应的name（最好全局搜索，将应用到旧项目名的地方统一改过来）
3、 重新安装依赖 npm install
4 、启动项目 npm run dev
三：运行 npm run dev时报错npm ERR! 项目名@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
原因：新版的webpack-dev-server存在问题。
解决方法：package.json 中指定 webpack-dev-server 低版本号
方法1：
"webpack-dev-server": "^2.9.1"
删除 node_modules 目录，再重新安装依赖包
npm install -S // 这种方式安装的时间会长些，也可以只重装 webpack-dev-server模块
方法2：单独重装 webpack-dev-server模块
1、npm uninstall webpack-dev-server
2、npm install webpack-dev-server@2.9.1
3、npm run dev
四：Vue的devtools构建错误npm ERR! code ELIFECYCLE解决办法
安装vue-devtools工具时，运行npm run build 发生报错：
该问题的原因是我们git clone时默认分支为最新的develop分支。develop是测试分支，不是正式分支，git clone时更换分支即可。
网查资料显示v5.1.1分支是可用的，估计再向前的分支也是可用，当然master分支更是可用。
正确获取方法（使用分支:v5.1.1）
1.克隆
用cd命令找到想要安装的路径，运行git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git；
2.安装依赖
进入vue-devtools文件夹下，运行npm i 或 cnpm install；
3.构建
npm run build；
4.chrome中找到 更多工具 / 扩展程序 选项，勾选 开发者模式，然后点击 加载已解压的扩展程序，选择vue-devtools\shells\chrome，确认
5.谷歌运行一个vue项目，查看控制台是否出现Vue功能栏，有则是安装成功。
五：VS Code可以通过以下快捷键格式化代码:
1. windows:Shift + Alt + F
2. Mac:Shift + Option + F
六：使用vue-cli3创建项目时遇到的坑
在目标文件夹“右键” => “Git Bash here”，打开命令行，输入vue create project-name，回车，结果发现项目配置参数选择时，git bash的箭头选择无效
解决办法：
- 选择git bash 的安装目录，找到Git/etc/bash.bashrc文件 （我的目录是C:\Program Files\Git\etc\）
- 文件末尾添加 ： alias vue='winpty vue.cmd'
- 关闭所有git bash，再重新打开既可
或者直接 window+r，输入cmd，打开cmd窗口，cd到目标文件夹，再vue create project-name
