文章目录
- vue脚手架前言
- 1. 安装脚手架
- 1. 安装nvm
- 2. 使用nvm安装node
- 3. 配置node的全局路径和缓存路径
- 4. 配置npm默认镜像源
- 5. 安装脚手架
- 全局路径和缓存测试
- 2. 文件结构及项目配置
- 2.1 文件结构
- 2.2 项目基本配置
- 补充. 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）
- 全局安装脚手架
npm install -g @vue/cil。可以执行vue命令测试是否安装过。
有警告没关系，不用管。以后再创建配有脚手架的项目，直接通过vue命令执行即可，无需再安装脚手架。
- 切换到要创建项目的目录，使用命令
vue create xxx创建项目
- 进入项目文件，使用命令
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里没有。
目前还不知道全局包里没有这个依赖会怎样，但是项目至少还会正常运行
