Vue(五). 安装脚手架及一些基本配置

vue脚手架前言

脚手架也叫Vue CLI（command Line interface），安装脚手架之前需要配置node.js。简单记录一下我对Vue脚手架、node、npm，nvm的理解。

• 为什么安装Vue脚手架
  Vue是一款JS框架。写代码的时候可以看出Vue框架的文件格式都是.vue，而浏览器只认识.js这种基本的文件，Vue脚手架就是将.vue转换为.js文件。使得Vue能够正常运行。

• 为什么需要安装node
  node.js就是一个平台，一个环境。js文件可以在这个环境上运行。所以配置Node是为了让JS文件能够运行起来。

• npm是啥，nvm是啥
  npm是node默认的包管理器，用来下载代码用到的依赖包。
  nvm用来切换node版本。

以炒鸡蛋举例的话，
鸡蛋------>js文件
node----->炒菜的锅（不同版本的node类似于不同的锅，铁锅or不粘锅）
npm----->用来管理炒菜的调料 (炒鸡蛋需要放盐，那就去买袋盐(即写文件需要某项依赖，通过npm install xxx下载不同的依赖包))
nvm----->根据要求，切换不同的锅。

1. 安装脚手架

nvm不是必须要安装的，必须要装的是node和脚手架。但我这里是通过nvm安装node，所以不打算安装nvm的话，接下来的内容帮助就不大了
主要参考博客1和博客2

1. 安装nvm

• 去github下载安装包
  
• 解压点击.exe文件，选择nvm安装位置
  
• 选择node安装位置
  
• 安装完之后，在终端输入nvm version，能查到版本号就说明安装成功了
  
  此时环境变量已经自动配置好了
  
• 最后配置镜像下载源，打开nvm安装路径里的setting文件：
  

问：为什么要配置镜像？
答：配置镜像之后，下载的速度会快一点

npm_mirror:https://npmmirror.com/mirrors/npm/
node_mirror:https://npmmirror.com/mirrors/node/

通过下边的安装可以看出，安装node时会自动安装上npm。猜测，这两个镜像一个是下载node的，一个是下载npm的。

2. 使用nvm安装node

• list available:查看可以安装的node版本
  
  一般都安装LTS这一类的
• nvm install 版本号:安装对应版本的node。(nvm在安装node时，也会下载npm）
  
  node -v:查询安装的node版本
  npm -v:查询安装的npm版本
  nvm use 版本号：设置使用哪个版本的node
  nvm list：查看已安装的node
  
  在nvm文件夹也可以看出，有两个版本的node，每个版本的node里，都配有一个npm。（也就是，每个锅都有自己的一袋盐，并不共用同一袋）
  
  
  nvm切换版本：
  
  这个外层的node文件也就是安装nvm时指定node安装路径时的文件

3. 配置node的全局路径和缓存路径

在进行全局命令安装时，默认会安装在C盘，为了节省C盘空间，则需要配置全局和缓存路径

• 首先在任意一个版本的文件夹里创建这两个文件(别的博客说这不是必须的，但我是这么做的，就这么记录了)。
  

设置接下来的prefix和cache后，以后每次通过nvm安装node就不需要手动创建这两个文件了

• 设置全局prefix和缓存cache的存放路径

在cmd中执行一下两行代码（注意根据自己的情况将百分号内的内容替换掉）

npm config set cache "%NVM_SYMLINK%\node_cahce"
npm config set prefix "%NVM_SYMLINK%\node_global"

%NVM_SYMLINK%就是nvm安装时，自动生成的环境变量。

以我自己的举例，就是执行以下两行代码

npm config set cache "D:\JavaEnvironment\node\node_cahce"
npm config set prefix "D:\JavaEnvironment\node\node_global"

• 配置环境变量，打开系统变量的path：
  
  前两个是自动生成的，后边那个自己加上就行

4. 配置npm默认镜像源

修改npm镜像源为淘宝镜像源

npm config set registry http://registry.npmmirror.com

检查是否成功

npm config get registry

5. 安装脚手架

（现在node版本已切换到18.20.0）

1. 全局安装脚手架npm install -g @vue/cil。可以执行vue命令测试是否安装过。

有警告没关系，不用管。以后再创建配有脚手架的项目，直接通过vue命令执行即可，无需再安装脚手架。

2. 切换到要创建项目的目录，使用命令vue create xxx创建项目
   
3. 进入项目文件，使用命令npm run serve运行项目
   
   浏览器输入网站http://localhost:8080/，成功运行
   

全局路径和缓存测试

20.10.0版本的文件夹里，没有cache和global文件。使用nvm切换为这个版本的node之后，同样安装vue脚手架，可以看出已经自动添加了global和cache两个文件夹。

global文件夹里也有vue脚手架了

2. 文件结构及项目配置

2.1 文件结构

├── node_modules:存放项目依赖
├── public： 一般放置一些静态资源(图偏)
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 一般放置多个组件共用的静态资源
│   │   └── logo.png
│   │── component: 存放组件的文件夹，一般放置的是非路由组件/全局组件
│   │   └── HelloWorld.vue
│   │── App.vue: 唯一的根组件
│   │── main.js: 整个项目的入口文件
├── .gitignore: git版本管制忽略的配置(哪些文件需要git管理，哪些文件不需要git管理)
├── babel.config.js: babel的相关配置文件
├── package.json: 应用包配置文件，记录项目的信息及项目中有哪些依赖
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件，缓存性文件，记录项目上的依赖都从那儿来的等信息

需要注意：（没打包过，先记录一下）

• 放在public里的静态资源，webpack打包时，会原封不动的打包到dist文件夹中
• assets里的静态资源,webpack打包时,会被当作一个模块，打包到JS文件里面

2.2 项目基本配置

创建完项目之后，一般会进行以下几项配置，方便开发

1.项目运行时，浏览器自动打开页面

package.json文件：

"scripts": {
    "serve": "vue-cli-service serve --open", //添加--open
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

2. eslint校验功能关闭

vue.config.js文件:

module.exports = defineConfig({
    // 关闭eslint语法检查
    lintOnSave: false
})

3.src文件夹简写方法，配置别名@

我的项目里有jsconfig.json文件，没有的话应该自己创建一个就行

就是用@代替src,比如

import TypeNav from '@/components/TypeNav'

4 . 命名组件报错

Component name “xxxxx“ should always be multi-word

解决方法：
package.json

"rules": {
    "vue/multi-word-component-names": "off"
}

参考的这个博客：https://blog.csdn.net/weixin_71403100/article/details/130223401

补充. vue项目安装依赖的一个问题

在配置好vue脚手架的vue项目里安装依赖，比如安装vue-router
执行命令 npm install vue-router@3

安装好之后，package.json中自动添加了该依赖项，项目的node_modules里也有vue-router文件夹

但是之前设置的node全局包里没有

如果运行的命令是npm install -g vue-router@3,全局包里就有了，但是项目的node_modules及package.json里没有。

目前还不知道全局包里没有这个依赖会怎样，但是项目至少还会正常运行