文章目录
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里没有。
目前还不知道全局包里没有这个依赖会怎样,但是项目至少还会正常运行