[JavaScript知识库]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 <version>       //安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm 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 -v
npm -v

2.指定镜像

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 -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.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 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-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：如何使用引入组件？

在官网上找到对应的组件，直接拷贝。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖