使用vite搭建vue3项目
vite
Vite下一代的前端工具链 ,为开发提供极速响应。
Vite(法语意为 "快速的",发音 /vit/,发音同 "veet")是一种新型前端构建工具,能够显著提升前端开发体验。它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。
- 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。
根据 vite 官网的介绍,我们需要把握两个重点,一个是 esbuild,另一个就是 Rollup。
创建项目
执行命令,选择自定义配置。
npm create vite@latest
为了搭建一个通用型的 vue 项目,我们需要勾选的项目包括:
- TypeScript
- JSX
- Vue Router
- Pinia
- ESLint
- Prettier
其他选项可以根据需求添加。
下载完成之后,项目的目录结构如下:
安装依赖。
npm install
启动本地服务。
npm run dev
项目打包,生成文件到 dist 目录。
npm run build
查看 scripts , 发现 "build" 命令执行 "run-p type-check build-only"。
"run-p" 是包 "npm-run-all",提供的命令,代表并行执行后面的命令。另外"run -s",代表串行执行命令。
"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 文件的内置支持
# .scss and .sass
npm add -D sass
# .less
npm add -D less
# .styl and .stylus
npm add -D stylus
自动引入 api
安装依赖
npm i -D unplugin-auto-import
配置 node 环境的 tsconfig 和 types。
npm add -D @tsconfig/node18 @types/node@18
修改 vite.config.ts
// 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"。
{
"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 文件中已声明。
自动引入组件
安装依赖
npm i unplugin-vue-components -D
配置插件
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({
// 自动加载组件的目录配置,默认的为 'src/components'
dirs: ['src/components'],
extensions: ['vue'] // 组件的有效文件扩展名
})
],
})
项目自动引入 src/components 目录下的组件,我们删除相关代码,依旧正常运行。
自动生成路由
安装依赖
npm install -D vite-plugin-pages
插件根据文件目录自动生成路由,我们来修改路由配置
// 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
// vite.config.ts
import Pages from 'vite-plugin-pages'
export default defineConfig({
plugins: [
vue(),
Pages(),
// ...
],
})
添加类型到 vite-env.d.ts
// vite-env.d.ts
/// <reference types="vite-plugin-pages/client" />
最后页面生成的路由如下:
- "/" : "pages/index.vue"
- "/about" : "pages/about/index.vue"
webpack 迁移指南
加载资源文件
import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl
启动模式
通过设置 --mode dev,可以读取 .env.dev 的配置
将 VUE_APP_ 的前缀改为 VITE_,这样才能暴露给 vite
// .env.dev
VITE_SOME_KEY=123
// 获取启动模式
import.meta.env.MODE;
具体配置请参考 模式
获取配置
console.log(import.meta.env.VITE_SOME_KEY) // 123
vite 本地服务使用 es module,无法加载 commonjs 模块,需要安装插件处理
npm i vite-plugin-commonjs -D
添加到 vite.config.ts
// vite.config.ts
import commonjs from 'vite-plugin-commonjs';
export default defineConfig({
plugins: [
commonjs()
// ...
]
})
使用 antd vue
安装
npm install ant-design-vue@4.x --save
自动按需引入组件
// vite.comfig.ts
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
// ...
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
],
}),
],
});
vite 配置
请参考注释
// 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',
},
});
转载自:https://juejin.cn/post/7275550543296446519