一、安装node.js
1）实际的工作项目都是模块化项目，模块化的项目需要node.js环境。因此在开始项目之前需要先安装node.js.
2）安装node.js需要操作DOS窗口（终端，命令行，小黑窗）。
3）DOS窗口打开方式：win键+R。然后输入cmd确定。
二、常见DOS命令：
1）dir:用于列出当前文件夹下的所有文件及文件目录
2）cd: 进入当前文件夹下的某个目录
3）cd.. :回退当上一级目录
4）ctrl+c：取消操作.
5）方向键向上：复制上一条命令。
6）回车：确定命令输入
2.怎样快速进入某个文件夹的dos位置？
1）：双击进入目标文件夹，在文件地址栏直接输入cmd回车
2）：双击进入目标文件夹，shift+右键，选择在此处打开xxxx
1.安装nvm
因为node.js的版本特别多，而且有些版本有问题，不是越高版本越好，同时不同的操作系统适合的node.js版本也不一样，因此根据自身的情况，选择正确的版本非常重要。
目前node的最新版本是16.最稳定的是14版本。
win7的用户，不能安装14的node版本，只能安装更低级 版本，例如12版本和8版本。
14版本的node只有win10的用户可以安装。
不管你是win7还是win10用户，都不应该安装13的版本。因为13版本的问题特别多。
为了方便node的版本安装，可以先安装一个node版本管理工具，nvm。
下载地址：/coreybutler/nvm-windows/releases
下载nvm-setup.zip压缩包，解压后运行解压的nvm-setup.exe文件，选择默认安装。
安装完成后，在终端中可以运行nvm的相关命令。
nvm off //禁用node.js版本管理(不卸载任何东西)nvm on //启用node.js版本管理nvm install <version> //安装node.js的命名 version是版本号 例如：nvm install 8.12.0nvm uninstall <version>//卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用nvm list//显示所有安装的node.js版本nvm list available//显示可以安装的所有node.js的版本nvm use <version> //切换到使用指定的nodejs版本
这边选择一个合适的node版本，这里以14.15.2的版本安装为例：
nvm install 14.15.2
node集成了npm的安装，安装完成后，运行版本检查：
node -vnpm -v
2.指定镜像
npm 的默认服务器在国外，运行下面命令查看服务器地址：
npm config get registry
可以把npm的镜像服务器地址指向淘宝镜像：
npm config set registry https://registry.
同时，还可以安装一个cnpm指令来代替npm指令下载插件源文件，运行命令安装cnpm：
npm install -g cnpm --registry=https://registry.
设置cnpm的镜像：后续可以通过cnpm来代替npm的下载指令。
cnpm config set registry https://registry.
三、安装vue-cil
vue脚手架也分版本。早期的是vue-cli2，现在用的是vue-cli4。不同的版本安装方式还不一样。
1：先卸载脚手架vue-cli2（如果有）输入命令：
npm uninstall vue-cli -g
2：装脚手架vue-cli3+,输入命令
npm install -g @vue/cli
3：创建项目文件夹
进入希望创建项目文件夹的文件夹，输入以下命令创建一个名为vuetext的项目：
vue create vuetext
也可以通过图形化界面来创建项目。运行命令
vue ui
安装过程，可以手动选中需要安装的工具或者源文件。
安装完成后，进入VueText文件夹，输入命令运行项目
npm run serve
最后通过提示用浏览器打开项目地址查看项目页面。
四、项目目录
1：node-modules：依赖文件件,内部存放所有项目依赖的源文件和工具。
下载命令：cnpm i 或者npm i
2：package.json: 项目依赖文件的一个清单，项目的运行命令等。(很重要)
// 项目名"name": "homework", // 版本"version": "0.1.0",// 项目是否私有"private": true,// 脚本 (项目运行命令)// 不是所有的项目运行都是通过serve运行。可以修改的// 运行项目之前,需要先查看package.json中的scripts项."scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},// 项目的源文件列表.后面的数字指的是源文件版本."dependencies": {"core-js": "^3.6.5","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.4.0"},// 工具依赖."devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","vue-template-compiler": "^2.6.11"},
3：package-lock.jsonnode-modules文件夹内所有文件的列表清单。
它决定了node-modules内部都有什么文件。cnpm i 时就是按照该清单下载依赖。
4：.gitignoregit仓库提交时忽略的文件清单。
5：vue.config.js项目的自定义配置
module.exports = {devServer: {port: 10000}}
五、项目的依赖安装
下载指定的依赖文件：
语法：
npm install --save 依赖文件名@指定版本
--save：意即把安装好的依赖文件保存到package.json中
--dev: 把安装好的依赖文件作为工具依赖保存。
也有简写的方式：
install 的简写是 i
--save 的简写是 -S
--dev 的简写是 -D
npm install axios --save 可以简写成 npm i axios -S
还可以按需指定版本：
npm i axios 下载最新的版本
npm i axios@3.2.1 下载指定版本
npm i axios@3 下载3开头的最新版本
六、ESlint
ESlint是一个语法检查工具。有很多预设规则，例如：airbnb，standard。
装了这个工具，需要书写代码的风格完全按照预设的规则进行，否则项目无法运行。对于强迫症的人来说这个检查工具无疑是最香的，但对于平时代码书写不规范的可能有些难受了。可以帮助我们提高代码的书写质量。
1:23 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style1 => 出错的行数error => 出错的类型Expected linebreaks to be 'LF' but found 'CRLF' => 出错的文本linebreak-style => 违反的规则名在esLint的规则中进行设置.每个规则可以设置3种值.分别是off,warn和error.或者0,1,2rules:{"linebreak-style":"off"}
Missing semicolon //缺失分号Missing file extension "vue" for "./App" //缺失了一个文件后缀Do not use 'new' for side effects //只new不实例化'vm' is never reassigned. Use 'const' instead // vm是引用类型，从来没有被重新赋值，应该用const声明。'vm' is assigned a value but never used //vm声明了但是又没有使用Missing space before value for key 'el' // el的属性值前面应该有空格Expected indentation of 2 spaces but found 4// 缩进应该是2个空格而不是4个。Expected parentheses around arrow function argument // 箭头函数的形参，不应该省略括号。Missing trailing comma// 对象最后一个属性的没有逗号A space is required after '{'// { 的后面应该有个空格A space is required before '}' // } 的前面应该有个空格Newline required at end of file but not found// 文件的默认应该有一行空的文本A space is required after ','// ,后面应该有空格。Missing space before opening brace// 左大括号 { 的前面少了空格Operator '+' must be spaced// 操作符的前后应该有空格
建议的写代码规范:
1：操作符前后有空格。
2：每行结尾加分号。局部作用域的{}后面不加。
3：纯对象{}中左右应该有空格。
4：函数形参的逗号和数组元素之间的逗号后面有空格。
5：函数声明的 { 前面应该有空格。
6：引用类型应该有const声明。
7：对象的最后一个属性后面应该有，
可以在vue.config.js中关掉ESlint
module.exports = {lintOnSave: false}
七、UI框架
Ui框架 => ui组件库 => 快速生成拥有漂亮样式的组件 => 提升开发效率.
Vue的常见ui组件库:
PC端：Element-ui，iView
移动端：vant-ui，mintUI，Vux
ui组件库的使用，从来不是开发的难点，直接参照ui组件库的API直接写。
1：如何安装？ 直接在官网上查看安装命令。
2：如何引入组件？直接在官网上查看引入方式。（一般引入的代码在main.js中放置）
2.1：全局引入 （所有组件全部导入）
2.2：按需引入 (用哪个组件就导入哪个组件)
3：如何使用引入组件？
在官网上找到对应的组件，直接拷贝。
如果觉得《node.js以及Vue的脚手架安装过程》对你有帮助，请点赞、收藏，并留下你的观点哦！
