前提，建议先学会前端几大基础：HTML、CSS、JS、Ajax，不然不好懂
一、什么是工程化开发
简单一句话就是：前面学的不用了，用新的方法写Vue
之前文章里讲到的都是基础的Vue语法模板，作为了解Vue的基石，小屁孩自己写写文件可以，但是要是真的打比赛、公司里开发一个项目，不会用个HTML、JS这些文件里引入Vue，然后写Vue而是基于某些构建工具的环境中开发Vue，里面有专门的.vue文件
可能这么说大伙听不懂，那先解释一下什么是“工程化”：（先简单看看，不要花精力研究）
一个软件项目完成需要经过什么“工程立项”、“需求分析”、“产品原型”、“开发”、“测试”、“上线运行”
这里【“开发”、“测试”、“上线运行”】的部分就是“工程化”，在这部分之前你就找几个会写文档的瞎钩八乱写点文档就行了，到了【“开发”、“测试”、“上线运行”】的时候就需要【工具】和【技术】了。
那么学了前端技术比较多的兄弟们应该知道，现实开发中不少人会用“类css语言”，或者叫“css预处理语言”——less、scss，（提一下，先不用管是什么）跟css差不多，那一个项目开发的时候有的人写less、有的写css、有的写scss，然后每个人的代码风格也不一样，到时候各自写完自己的部分再合起来的时候，头大了.......那这个时候就需要一个【前端工程化】去把整个项目“打包”，在一个环境下编写，并进行了代码规范。
然后以前工程化开发要基于一个叫什么webpack的玩意，我也没去具体研究，以后有机会再学，反正就是这么个玩意就可以把你项目里一些浏览器没法编译、看得懂的文件转化成浏览器看得懂的玩意。But，webpack这玩意需要自己手动配置，而且每个公司、团队用的webpack可能都不一样，所以！所以！！所以！！！Vue开发了一套【工具脚手架】，里面配置好了各种文件，相当于统一标准、版本的webpack！！！大伙都能用
这里如果有学过微信小程序的朋友，看下面这个图可能就知道什么是工程化开发的【脚手架】
像开发微信小程序，这些json配置、全局css、全局js......这些文件都会配置好，那么Vue的【脚手架】就是一个意思。然后以后我们写vue也不再是在HTML或者js里写了，而是有专门的.vue文件里写
二、使用【Vue脚手架】步骤
总的步骤：【安装node.js】——>【安装yarn】——>【安装Vue脚手架】
然后安装【安装node.js】和【安装yarn】的步骤：
【分别安装它两】——>【每个安装完就去配置环境变量】——>【确保“系统变量”和“用户变量”两个地方的path变量里都包含了node.js和yarn的安装路径】——>【控制台能查到node和yarn的版本号】
1、先安装Node.js
记住这几个步骤：安装好 ——> 配置好环境变量 ——> 最后确认能查得到node的版本
第一步：首先你要执行第一条那个 yarn 或 npm指令，你必须要安装Node.js，它是一个运行在服务端的 JavaScript，是一个基于 Chrome V8 引擎的 JavaScript 运行环境；Node.js的软件包生态系统npm是全球最大的开源库生态系统。
那么你需要到这个官网下载安装：Node.js — Download，根据自己的电脑系统版本安装，我的是Windows x64的
下载好点开安装，你就一个劲“next”就好了，这里我自定义的安装路径是【D:/Node/】，骚等片刻安装完后点“finish”就ok
第二步：接下来配置它的环境变量
跟配置java、MySQL这些环境变量的步骤一样，到【设置】—>【系统】—>【系统信息】—>【高级系统设置】—>【环境变量】
然后在【系统变量】：新建一个变量名为 “NODE_PATH”， 值为“你刚刚自定义的node的安装路径”，注意！！就是【node的安装文件夹】就行了，不要弄成它外面的文件夹或者它里面的文件夹，具体例子如下图：
然后在【系统变量】找到【path】，点击并编辑，把【%NODE_PATH%】加进去！或者把【你刚刚自定义的node的安装路径】加进去（它两都是一个意思的，%NODE_PATH%就是把路径存到一个变量而已）
然后再到【用户变量】的【path】，也把【%NODE_PATH%】或者【你刚刚自定义的node的安装路径】加进去（它两都是一个意思的，%NODE_PATH%就是把路径存到一个变量而已）
第三步：然后现在检查一下它安装好没，【win + R】，运行CMD，分别输入node -v（或者node --version） 和 npm -v 分别查看node和npm的版本号，如下图所示：
第四步：让【webpack】还有【yarn】安装的时候自动安装到【node文件路径】下
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在【C:\Users\用户名\AppData\Roaming】路径下的【npm】和【npm_cache】中，不方便管理且占用C盘空间，
所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 【node_global】和【node_cache】，如图所示：
然后在【win + R】的CMD操作里执行这两句代码，这两句代码的意思是授权允许打开这两个文件夹进行一些安装操作，因为我们在新建它两的时候也会注意到，它两是要以【管理员】身份才有权限新建的
npm config set prefix "你刚刚那个node_global文件夹的路径" npm config set cache "你刚刚那个node_cache文件夹的路径"注意！！不是让你照抄这两句代码！每个人安装的Node.js的路径不一样，刚刚那两个文件夹的路径也就不一样，根据自己的路径设置，比如我的是在D盘的Node文件夹里新建的node_global和node_cache，那么代码就如下：
然后还是向上面配置环境变量一样，到【设置】—>【系统】—>【系统信息】—>【高级系统设置】—>【环境变量】—>【用户变量】：编辑用户变量里的Path，将相应npm的路径从（“C:\Users\用户名\AppData\Roaming\npm”）改为：“你刚刚设置的node_global文件夹的路径”，如下图：
然后开始测试能不能顺利把webpack安装到刚刚你自定义设置的那两个文件夹 node_global和node_cache里面，在【win + R】的CMD操作里执行这个代码
npm install webpack -g这里可能会有人跟我一样出现下面这种错误
这说明你还没有授权可以打开node_global和node_cache这两个文件，你执行上面安装命令的时候，系统觉得你不是管理员没有权限，那说明你前面有某些步骤操作错了，不要紧，我们手动把这两文件夹的权限打开：
找到这两文件夹，就拿【node_cache文件夹】来说，右键选择【属性】
然后找到【安全】，选择【users】，点击【编辑】
然后继续选择【users】，然后点击【添加】，将【完全控制】选中，点确认。
【node_global】文件夹的权限设置和上面一样，两个文件夹权限打开了的话，就可以顺利在里面安装【webpack】或者【yarn】包了
2、再安装yarn
记住这几个步骤：安装好 ——> 配置好环境变量 ——> 最后确认能查得到yarn的版本
第一步：在【win + R】的CMD操作中执行这个命令【npm install -g yarn】去安装yarn，然后就会开始正常安装，如果你刚刚一直按照我的步骤的话，那么不出意外，【yarn】最终会安装到【你的node文件夹 \ node_global \ node_modules】下，跟安装前面的【webpack】的路径一样
第二步：好，现在开始配置环境变量，记住了yarn的安装路径是【yarn文件夹下的bin文件夹】，现在你要做的是三步：
先到【环境变量】的【系统变量】添加一个变量，名字叫【YARN_HOME】，值是【yarn文件夹下的bin文件夹路径】
然后在【系统变量】找到【path】然后编辑，把【yarn文件夹下的bin文件夹路径】加进去！
然后到【用户变量】找到【path】然后编辑，把【yarn文件夹下的bin文件夹路径】加进去！
第三步：在【win + R】的cmd操作输入【yarn -v】或者【yarn --version】检查有没有版本信息，有的话就是成功了
总结：
如果你上面有哪个步骤漏了就可能会导致失败
如果出现这错误【'node' 不是内部或外部命令，也不是可运行的程序 或批处理文件。 解决方法】
就说明你的node安装配置有问题，【检查node安装了没】——>【检查环境变量的系统变量有NODE_PATH变量没有，路径是不是你的node.js安装路径】——>【检查环境变量的系统变量的path变量里加入“你的node.js安装路径”了没有】——>【检查环境变量的用户变量的path变量里加入“你的node.js安装路径”了没有】
如果你出现这个错误【‘yarn‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。】
就说明你的yarn安装配置有问题，【检查yarn安装了没】——>【检查环境变量的系统变量有YARN_PATH变量没有，路径是不是你的yarn安装路径】——>【检查环境变量的系统变量的path变量里加入“你的yarn安装路径”（注意是yarn文件夹下的bin）了没有】——>【检查环境变量的用户变量的path变量里加入“你的yarn安装路径”（注意是yarn文件夹下的bin）了没有】
3、终于到了安装【Vue脚手架】了
这里请各位深呼吸，有心脏病的患者建议不看，因为有的用户（比如我）接下来会被莫名其妙的系统报错直接气到精神失常，直接爆炸！再多看一眼就会爆炸！再靠近一点点就会融化！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
首先我么们来看一下黑马程序员教的“没卵用”的步骤，可能有的人有用：
第一步：安装脚手架
鼠标右键底部的【开始】，再点击【window 终端（管理员）】
黑马程序员的视频里说： 输入这两个其中一个命令【yarn global add @vue/cli】或【npm i @vue/cli -g】，前提是你前面必须安装好了yarn。这个操作从今往后只需执行这么一次，成功后就会看到这样
但是对我来说没卵用，因为我检查【vue --version】报了这样的错误
上网查了，说是没安装好，于是出了问题相同问题的朋友可以跟我执行这个命令【npm uninstall vue-cli -g】先把vue cli脚手架卸载了
然后再输入【npm install vue-cli -g】重新安装
然后发现node的文件下有了几个vue文件就说明安装好了
接下来输入【npm config get prefix】，会弹出你的vue cli脚手架安装路径，把它复制了，再去看看环境变量里【系统变量】和【用户变量】那里的【path】里配置了vue cli脚手架安装路径没有，没有的话配置上去
第二步：vue --version检查安装好了没
好，现在所有问题都解决了，上网查了上千一万篇文章，csdn和知乎我都快能倒背如流了，上面任何操作我都做了，就是不能执行【vue --version】，而且奇葩的是我在普通【非管理员的windows终端】输入【vue --version】显示这样：
然后我再去【管理员版的windows 终端】输入【vue --version】显示这样
正当我已经绝望想死像发疯发癫的时候，我搜了AI，AI救了我，他是这么说的
于是我试了试【powershell -ExecutionPolicy Bypass -Command "vue --version"】指令，出来了，很艰难，但是我还是出来了......vue脚手架的版本号终于出来了
所以记住了，在【管理员版的windows 终端】想看vue脚手架的版本号，要么更改 PowerShell 的执行策略，将 PowerShell 的执行策略更改为允许本地的脚本运行，但会阻止来自 Internet 的脚本运行，除非它们经过了签名。
Set-ExecutionPolicy RemoteSigned然后再输入【vue --version】
或者 如果您不想永久更改执行策略，可以只为单独的会话更改，使用以下命令
powershell -ExecutionPolicy Bypass -Command "vue --version"
第三步：创建Vue脚手架项目
由上面问题的兄弟，还是一样的，系统不会让我们那么舒服地创建项目的，自认倒霉跟着我做如下操作：
首先我们找一个自己想创建项目的地方，这里我本人是在C盘的桌面的一个“web代码”的“vue自学”里新建一个文件夹，名字叫“vue工程化开发”，然后我用鼠标右键点开他，选择【用终端打开】
然后还是得跟直接检查【vue --version】一样，我们这种傻b系统只能自己改变PowerShell管理员终端的执行策略，这里我们选一个风险小一点的——不想完全移除限制，可以选择使用 RemoteSigned 选项，它只允许运行本地脚本和已签名的远程脚本：
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned再输入【vue create 项目名字（注意不可以是中文）】，比如我的叫“project_1”，那就是【vue create project_1】
然后如果顺利进入这个界面，那么恭喜，你下面可以不用再红温了，一切顺利
接下来在这个界面，通过“上”“下”键来选择你创建的是vue2还是vue3，这里暂时选vue2，按回车确定，可能会提示问你用yarn还是npm作为key来创建，两个都可以，我选的是npm
然后待一会就成功了，弹出【$ cd project_1】和【$ npm run serve】，我们要先执行第一个【cd project_1】，进入到project_1这个项目里，然后再【npm run serve】正式打开vue服务器！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
那么现在上面提供了两个服务器地址，我们测试一下第一个【- Local】那个网址可不可以跑起来
感动苍天大地！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
这里最好提示一下，打开vue脚手架的服务器不是固定叫【yarn serve】或者【npm run serve】，serve只是json配置文件里的一个配置项，我们打开刚刚创建的项目会看到这么个json文件：【package.json】，用Vscode打开会看到，有这么一项【serve】，那么如果以后去到别的公司，人家把这里改成【shit】，那我们就要把命令代码改成【yarn shit】或者【npm run shit】
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
