node.js以及Vue的脚手架安装过程
一、安装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。
下载地址：https://github.com/coreybutler/nvm-windows/releases
下载nvm-setup.zip压缩包，解压后运行解压的nvm-setup.exe文件，选择默认安装。
安装完成后，在终端中可以运行nvm的相关命令。
nvm off //禁用node.js版本管理(不卸载任何东西)
nvm on //启用node.js版本管理
nvm install //安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm uninstall //卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用
nvm list //显示所有安装的node.js版本
nvm list available //显示可以安装的所有node.js的版本
nvm use //切换到使用指定的nodejs版本 这边选择一个合适的node版本，这里以14.15.2的版本安装为例：
nvm install 14.15.2node集成了npm的安装，安装完成后，运行版本检查：
node -v
npm -v2.指定镜像
npm 的默认服务器在国外，运行下面命令查看服务器地址：
npm config get registry可以把npm的镜像服务器地址指向淘宝镜像：
npm config set registry https://registry.npm.taobao.org同时，还可以安装一个cnpm指令来代替npm指令下载插件源文件，运行命令安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org设置cnpm的镜像：后续可以通过cnpm来代替npm的下载指令。
cnpm config set registry https://registry.npm.taobao.org三、安装vue-cil
vue脚手架也分版本。早期的是vue-cli2，现在用的是vue-cli4。不同的版本安装方式还不一样。
1：先卸载脚手架vue-cli2（如果有）输入命令：
npm uninstall vue-cli -g2：装脚手架vue-cli3+,输入命令
npm install -g @vue/cli3：创建项目文件夹
进入希望创建项目文件夹的文件夹，输入以下命令创建一个名为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.json node-modules文件夹内所有文件的列表清单。
它决定了node-modules内部都有什么文件。cnpm i 时就是按照该清单下载依赖。
4：.gitignore git仓库提交时忽略的文件清单。
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 [email protected] 下载指定版本
npm i axios@3 下载3开头的最新版本
六、ESlint
ESlint是一个语法检查工具。有很多预设规则，例如：airbnb，standard。
装了这个工具，需要书写代码的风格完全按照预设的规则进行，否则项目无法运行。对于强迫症的人来说这个检查工具无疑是最香的，但对于平时代码书写不规范的可能有些难受了。可以帮助我们提高代码的书写质量。
1:23 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
1 => 出错的行数
error => 出错的类型
Expected linebreaks to be 'LF' but found 'CRLF' => 出错的文本
linebreak-style => 违反的规则名
在esLint的规则中进行设置.每个规则可以设置3种值.分别是off,warn和error.或者0,1,2
rules:{
"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：如何使用引入组件？
在官网上找到对应的组件，直接拷贝。