白筱汐

想都是问题,做都是答案

0%

使用vite搭建vue3项目

vite

Vite下一代的前端工具链 ,为开发提供极速响应。

Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:

  • 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
  • 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

根据 vite 官网的介绍,我们需要把握两个重点,一个是 esbuild,另一个就是 Rollup

创建项目

执行命令,选择自定义配置。

1
npm create vite@latest

为了搭建一个通用型的 vue 项目,我们需要勾选的项目包括:

  • TypeScript
  • JSX
  • Vue Router
  • Pinia
  • ESLint
  • Prettier

其他选项可以根据需求添加。

下载完成之后,项目的目录结构如下:

目录结构

安装依赖。

1
npm install

启动本地服务。

1
npm run dev

项目打包,生成文件到 dist 目录。

1
npm run build

查看 scripts , 发现 “build” 命令执行 “run-p type-check build-only”。

“run-p” 是包 “npm-run-all”,提供的命令,代表并行执行后面的命令。另外”run -s”,代表串行执行命令。

1
2
3
4
5
6
7
8
9
"scripts": {
"dev": "vite",
"build": "run-p type-check build-only",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},

项目启动成功之后,查看终端,访问 http://127.0.0.1:5173/。

本地服务启动成功

插件使用

除了官方提供的插件,vite 社区还提供了很多优秀的插件 社区插件地址

CSS 预处理器

Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持

1
2
3
4
5
6
7
8
# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

自动引入 api

安装依赖

1
npm i -D unplugin-auto-import

配置 node 环境的 tsconfig 和 types。

1
npm add -D @tsconfig/node18 @types/node@18

修改 vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';

// 省略无关代码
...

// 配置插件
export default defineConfig({
plugins: [
vue(),
vueJsx(),
AutoImport({
// 支持自动导入 api 规则的相关文件
// 默认支持 .ts, .tsx, .js, .jsx .vue
include: [
/\.[tj]sx?$/, // ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/ // .md
],
imports: ['vue', 'vue-router', 'pinia'] // 自动导入vue、vue-router、pinia 内的部分api
}),
],
})

现在 unplugin-auto-import 会帮我们自动在根目录下生成一个 auto-imports.d.ts 文件,该文件包含的是我们配置 vue、vue-rouetr、pinia 里面一些 api 的 ts 类型声明。

修改根目录下的 tsconfig.app.json 文件,在 include 里面新增 “auto-imports.d.ts”。

1
2
3
4
5
6
7
8
{
"include":[
"env.d.ts",
"src/**/*",
"src/**/*.vue",
"auto-imports.d.ts"
]
}

进入 src/components/HelloWorld.vue , 修改代码做测试。

如图所示:

修改代码

插件自动帮助我们引入了 “ref” 方法,类似的其他在 vue、vue-router、pinia 中的 api 都会自动引入,前提是它在 auto-imports.d.ts 文件中已声明。

自动引入组件

安装依赖

1
npm i unplugin-vue-components -D

配置插件

1
2
3
4
5
6
7
8
9
10
11
12
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
plugins: [
Components({
// 自动加载组件的目录配置,默认的为 'src/components'
dirs: ['src/components'],
extensions: ['vue'] // 组件的有效文件扩展名
})
],
})

项目自动引入 src/components 目录下的组件,我们删除相关代码,依旧正常运行。

删除组件引入

自动生成路由

安装依赖

1
npm install -D vite-plugin-pages

插件根据文件目录自动生成路由,我们来修改路由配置

1
2
3
4
5
6
7
8
// router/index.ts
import { createRouter } from 'vue-router'
import routes from '~pages'

const router = createRouter({
// ...
routes,
})

在 src 下面新建 pages 文件,然后把原来在 views 里面的组件移动到里面,具体如下

修改路由配置

ps:在 pages 目录里面新建 […all].vue 文件代表匹配 404 路径的路由页面。

添加到 vite.config.ts

1
2
3
4
5
6
7
8
9
10
// vite.config.ts
import Pages from 'vite-plugin-pages'

export default defineConfig({
plugins: [
vue(),
Pages(),
// ...
],
})

添加类型到 vite-env.d.ts

1
2
// vite-env.d.ts
/// <reference types="vite-plugin-pages/client" />

最后页面生成的路由如下:

  • “/“ : “pages/index.vue”
  • “/about” : “pages/about/index.vue”

webpack 迁移指南

加载资源文件

1
2
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

启动模式

通过设置 –mode dev,可以读取 .env.dev 的配置

将 VUE_APP_ 的前缀改为 VITE_,这样才能暴露给 vite

1
2
// .env.dev
VITE_SOME_KEY=123
1
2
// 获取启动模式
import.meta.env.MODE;

具体配置请参考 模式

获取配置

1
console.log(import.meta.env.VITE_SOME_KEY) // 123

vite 本地服务使用 es module,无法加载 commonjs 模块,需要安装插件处理

1
npm i vite-plugin-commonjs -D

添加到 vite.config.ts

1
2
3
4
5
6
7
8
9
// vite.config.ts
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
plugins: [
commonjs()
// ...
]
})

使用 antd vue

安装

1
npm install ant-design-vue@4.x --save

自动按需引入组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vite.comfig.ts
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
plugins: [
// ...
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
],
}),
],
});

vite 配置

请参考注释

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// vite.config.ts
import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

import AutoImport from 'unplugin-auto-import/vite';

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

import Components from 'unplugin-vue-components/vite';
import Pages from 'vite-plugin-pages';

import commonjs from 'vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
commonjs(),
vue(),
vueJsx(),
Pages(), // 自动生成路由
AutoImport({
// 支持自动导入 api 规则的相关文件
// 默认支持 .ts, .tsx, .js, .jsx .vue
include: [
/\.[tj]sx?$/, // ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/ // .md
],
imports: ['vue', 'vue-router', 'pinia'] // 自动导入vue、vue-router、pinia 内的部分api
}),
Components({
// 自动加载组件的目录配置,默认的为 'src/components'
dirs: ['src/components'],
extensions: ['vue'], // 组件的有效文件扩展名
resolvers: [
// 自动加载 antd 组件
AntDesignVueResolver({
importStyle: false // css in js
})
]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
open: true, // 自动打开到浏览器
port: 8080, // 修改默认启动端口
proxy: {
// 配置代理服务
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
build: {
sourcemap: true // 生成 sourcemap 文件
// 发布时去除 console
// terserOptions: {
// compress: {
// drop_console: true
// }
// },
// minify: 'terser',
},
});