vue3前端开发-开发环境安装篇

1.安装nvm

如果本地已经安装了nodejs，请先卸载。
nvm主要的作用就是对nodejs的版本的管理，允许当前环境安装多个版本的nodejs，然后通过命令来选择使用哪个版本。

#下载地址
https://github.com/coreybutler/nvm-windows/releases
1
2

window环境直接下载exe文件或者。

注意：安装路径不能有空格，不能有中文。

设置好nvm的安装路径，还有nodejs的安装路径后，点安装就完成了。

2.设置安装源为淘宝镜像

打开配置文件D:\tool\nvm\settings.txt,添加后面2行：

root: D:\tool\nvm
path: D:\tool\node
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
1
2
3
4

3.通过nvm安装nodejs

查看nvm版本号

查看可用的nodejs的版本号: nvm list available
这里显示的其实并不全，下面提示，如果显示完整的，需要访问https://nodejs.org/en/download/releases

选择长期版本安装，比如这里安装nvm install 16.20.2

安装完成后，提示你如果要使用这个版本，请使用命令nvm use 16.20.2

最后nvm list展示了已经安装的版本，以及正在使用的版本，如果需要切换版本，请使用nvm use 对应的版本号

4. 安装pnpm

4.1 错误解决

nrm : 无法加载文件 D:\tool\nodejs\nrm.ps1，因为在此系统上禁止运行脚本。
1

在执行下面命令的时候，可能会碰到以上的错误，解决方式：

# 执行下面命令可解决
set-ExecutionPolicy RemoteSigned

# 执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”):  y
1
2
3
4
5
6

4.2 安装pnpm

nodejs安装时会自动安装npm，所以这里用npm来安装pnpm

npm i -g pnpm
1

4.3 配置

pnpm安装完，pnpm的安装全局路径和缓冲路径都是默认在C:\Users\lenovo\AppData\Local\的。

配置淘宝镜像

pnpm config set registry http://registry.npmmirror.com
1

配置 store-dir、state-dir、global-dir、global-bin-dir、cache-dir

pnpm config set store-dir       D:\tool\pnpm\.pnpm-store
pnpm config set state-dir       D:\tool\pnpm\state
pnpm config set global-dir      D:\tool\pnpm\store
pnpm config set global-bin-dir  D:\tool\pnpm
pnpm config set cache-dir       D:\tool\pnpm\cache
1
2
3
4
5

配置完成，可以使用pnpm config list查看。

4.4 关于源的切换

安装nrm.
如果报错The configured global bin directory "D:\tool\pnpm" is not in PATH,
先在环境变量中新建系统变量名PNPM_HOME，值填写D:\tool\pnpm.

pnpm i -g nrm
1

查看目前有哪些源：

nrm ls 
1

查看当前在使用的源：

nrm current
1

切换使用的源：

nrm use tencent
1

这样当前源就直接切换使用的是tencent的源了。

5.创建vite-vue项目

使用pnpm创建vite项目。

pnpm create vite vitedemo --template vue
1

安装和启动：

cd vitedemo
pnpm install
pnpm run dev
1
2
3

打开页面，查看一切正常

6. vue3demo目录结构

使用vscode打开vitedemo项目

解决找不到模块./App.vue的问题；
打开vite-env.d.ts文件，在里面添加下面内容：

declare module '*.vue' {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{},{},any>
  export default component
}
1
2
3
4
5

由于选择的是TypeScript语言，但是ts不认识.vue后缀的程序,所以这里添加这个声明，是对.vue后缀的一个扩展。

7. 扩展插件安装

搜索Volar，安装前面3个VuelanguageFeatures(Volar)、TypeScript Vue Plugin(Volar)、Vue Volar extension Pack

如果安装了vetur，需要禁用，这是开发vue2使用的插件，如果需要开发vue2，则可以再次打开。

8. 用户代码片段

8.1 设置

在vscode中，设置-> 用户代码片段，输入vue.json回车，在生成的文件中添加下面代码段。

{
  "createVue3Template":{
    "prefix": "vue3",
    "body": [
      "",
      "",
      "",
  
      ""
    ],
    "description": "createVue3Template"
  },
	"Print to console": {
		"prefix": "vue",
		"body": [
			"",
			"",
			"",
			""
		],
		"description": "生成vue模板"
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

8.2 快速生成代码

在component组件中新建Book.vue, 然后输入vue3,并按回车,即可根据模板自动生成代码片段。

所以我们也可以参考上面的模板自己自定义代码片段。

以上vue3前端开发系列文章，关于环境搭建篇的主要内容。