「#老鸿说004#vue项目优化篇」浅谈从Git和Node.js的安装到一个vue项目的打包上线的流程和遇到的那些坑
最近在研究如何进行vue项目的seo的时候，碰到了不少的坑，今天抽空总结一下，希望能够帮助到大家：
一、准备一个代码编辑器
1、推荐使用Visual Studio Code，当然，大家可以随意，如果你喜欢或者已有其他代码编辑器的亦可，比如Sublime Text之类的，提前安装好一个代码编辑器即可；
2、汉化
Ctrl + Shift + P
3、命令面板中输入“Configure Display Language”，回车进入
4、选择”install additional languages…“
5、点击install下载，下载完，一般电脑右下角会弹出个英文提示框，提示你重启，确定即可。
附：如果没有弹出，那就用刚才的语言设置那里，选择Chinese；
二、Git的安装
1、下载git，地址：
https://git-scm.com/downloads
2、下载好就开始安装咯，下面这个“Only show new options”的钩不点，点击next；
3、小伙伴们，这里推荐不默认安装到C盘，自己点击预览去安装放到自己喜欢的位置吧；
4、不创建启动文件夹（勾选Don’t create a Star Menu folder），点击next；
5、全选，再next；
6、从下拉框里面选择之前已经安装好的代码编辑器，在此我选用了Visual Studio Code，毕竟我安装的就是它，再点击next；
7、默认next；
8、继续next；
9、再继续next；
10、别停，继续next；
11、好吧，点击install吧；
12、没看错，点击next/finish你就完成git的安装啦；
13、在随便一个空白的地方点击鼠标右键，发现这两个东东就万事大吉了；
三、Node.js的安装
1、下载地址：https://nodejs.org/en/download/
2、按自己电脑的合适配置下载，然后开始安装，点击next；
3、必须点accept接受呀，点击next；
4、据自己要安装的地方选择安装目录(我这里选择D:\app\blog_software\Node.js路径下，这3张是网上的教程截图，大家知道自定义就行)；
5、默认安装，接下来疯狂点击next；
6、这个地方随意，可以点可以不点，继续next；
7、next完就直接完成了；
8、接下来会有一个黑色弹框提醒，直接enter点点点，最后会变成一个蓝色弹框，然后关闭；
9、测试一下，windows+R，输入cmd；
10、检查一下版本确认安装完毕：“node -v”查看 node 版本，“npm -v”查看 npm版本【node.js目前都是自动帮你安装好npm的了，不需要再安装npm】
11、开始环境配置，这里有些坑，注意看，容易被卡住，环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，为了避免安装在系统C盘占空间，在此我新建了个文件夹Node.js进行存放，即【D:\node-study\Node.js】下创建两个文件夹【node_global】及【node_cache】，如下图所示：
12、创建完2个文件夹后，再次打开cmd，输入并确定；
npm config set prefix "node_cache路径"
npm config set prefix "node_global路径"
13、找到计算机，右键，如我的电脑是显示“此电脑”然后右键进去，点击属性-高级设置-环境变量；
14、在用户变量里选择Path，点击编辑，再新建（如果没有path就直接新建），在弹出的框中点击新建，然后在其中添加“cnpm的执行路径”添加到windows环境变量即可的位置(PS：网上很多说是node_modules所在的路径，其实不一定)；
【附，有些教程说要加这个，不过我不加也可以，忽略吧。在系统变量里选择Path，点击编辑，再新增环境变量NODE_PATH，地址写node_modules的路径】
15、【小心：此处可能有大坑】使用命令：
cnpm install -g --registry=https://registry.npm.taobao.org
这里是cnpm，不用npm，因为可以顺便测试，enter后，如果没有显示错误，那就等待安装并且跳过步骤16。如果显示错误，说非可执行内部命令的问题，那就是环境变量有问题，需要重新设置；先找到刚才你环境变量设置的node_modules文件放置的位置，你会发现没有看到可执行文件cnpm；别担心，找一下另外的2个路径，一般不是在之前设置的node_global就是node_cache里面，我的在node_cache里面，就是那个cnpm.cmd的糟老头子，所在的路径才是正确的可执行路径；
16、此时回到刚才的环境变量设置，修正为正确的cnpm可执行文件的路径，再重新输入命令：
cnpm install -g --registry=https://registry.npm.taobao.org
成功的话就会变成这个，然后等待安装完成即可完成node.js的安装；
四、安装vue脚手架vue-cli
1、安装命令，等待完成：
cnpm install -g vue-cli
2、安装成功后可以用“vue -V” 查看vue版本；
五、新vue项目的创建：
1、命令工具，先cd到对应你想放项目的路径，如：
2、新建项目，vue init webpack-simple 项目名称（使用英文）；如：
vue init webpack-simple mytest
3、初始化完成后的项目目录结构如下：
4、安装依赖：
cd mytest
cnpm install
5、项目运行：
cnpm run dev
6、网页输入地址，看到这个图标你就成功了：
http://localhost:8080
附：在本地运行git上，下载下来的vue项目进行运行
1、找出git上的项目地址。
2、新建一个文件夹，用于存放下载的源码，然后进入目录文件夹，右键点击进入git bash here;
3、输入你的git的账号名称和绑定的邮箱，如果没有，就去git的官网注册一个；
git config --global user.name "你的名字或昵称" git config --global user.email "你的邮箱"
4、其他命令：
git add . //添加git commit -m “安装教程测试” //备注git push origin master //开始提交git pull origin master //抓取信息到本地
git clone 项目地址npm install //下载 cnpm install亦可npm run dev //运行项目 cnpm run dev亦可npm run build //发布代码 cnpm run build亦可
六、编译打包：
cnpm run build //然后把生成的dist文件部署在服务器即可
七、附：常见的其他问题：
A、解决 cnpm : 无法加载文件 ...\cnpm.ps1，因为在此系统上禁止运行脚本。
1、电脑开始菜单找到windows powershell，右键以管理员方式运行它；
2、输入set-ExecutionPolicy RemoteSigned 然后输入A 回车；
B、解决：'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
1、前往项目根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行"npm install"等待安装完之后，再次运行“npm run dev”即可。
小小攻略，希望能够帮助到大家。如果有遇到其他问题，欢迎留言与我沟通！