vite创建基于vue3按需导入的ant design vue项目
创建vue3项目
以ts为语法的vue3项目
yarn create @vitejs/app my-vue-app --template vue-ts 复制代码
以js为语法的vue3项目
yarn create @vitejs/app my-vue-app --template vue 复制代码
添加css预处理器支持
Vite 只针对现代浏览器,所以建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件(例如 postcss-nesting),并编写简单的、未来标准兼容的 CSS
但 Vite 也同时提供了对 .scss
, .sass
, .less
, .styl
和 .stylus
文件的内置支持。没有必要为他们安装特定的 vite 插件,但相应的预处理器依赖本身必须安装:
# .scss and .sass npm install -D sass # .less npm install -D less # .styl and .stylus npm install -D stylus 复制代码
如果是用的是单文件组件,可以通过 <style>
(或其他与处理器)自动开启。
Vite 为 Sass 和 Less 改进了 @import
解析,因而 Vite 别名也同样受用,另外,url()
中的相对路径引用的,与根文件不同目录中的 Sass/Less 文件会自动变基以保证正确性。
由于与其 API 冲突,@import
别名和 URL 变基不支持 Stylus。
你还可以通过在文件扩展名前加上 .module
来结合使用 CSS modules 和预处理器,例如 style.module.scss
。
vite配置文件
vite.config.js
// vite.config.js export default { // 配置选项 } 复制代码
vite.config.ts
(该方式会有语法提示)
import { defineConfig } from 'vite' export default defineConfig({ // ... }) 复制代码
代理配置
export default { server: { proxy: { // 字符串简写写法 '/foo': 'http://localhost:4567/foo', // 选项写法 '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^/api/, '') }, // 正则表达式写法 '^/fallback/.*': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^/fallback/, '') } } } } 复制代码
端口配置
export default { server: { port: 8888 } } 复制代码
指定服务器主机名
export default { server: { host: '0.0.0.0' } } 复制代码
配置别名
// vite-config.ts import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import path from "path"; // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src"), "components": path.resolve(__dirname, "src/components"), "layouts": path.resolve(__dirname, "src/layouts"), "utils": path.resolve(__dirname, "src/utils"), } } }) 复制代码
为了让webstorm
也能识别这写别名,添加一个webstorm.js
的配置文件,并作为webpack的配置文件
webstorm.js
module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "src"), "components": path.resolve(__dirname, "src/components"), "layouts": path.resolve(__dirname, "src/layouts"), "utils": path.resolve(__dirname, "src/utils"), } } } 复制代码
tsconfig.json
也配置別名
{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "baseUrl": ".", "paths": { // "@api": ["src/api"], // 如果要使用index.tsx的,需要配置这个 // "@api/*": ["src/api/*"], // 要使用别名下的模块的,配置这个。 // "@utils/*": ["src/utils/*"], // "@utils": ["src/utils/index.ts"] "@": ["src/*"], "layouts": ["src/layouts/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } 复制代码
配置按需导入插件
npm i unplugin-vue-components -D 复制代码
安装 ant-design-vue
npm i --save ant-design-vue@next
配置 ant design vue 2.x按需导入
// vite-config.ts import {defineConfig} from 'vite' import Components from 'unplugin-vue-components/vite' import vue from '@vitejs/plugin-vue' import ViteComponents, { AntDesignVueResolver, } from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ dts: true, // 启用ts支持 resolvers: [ // https://github.com/antfu/unplugin-vue-components AntDesignVueResolver(), // 配置 ant design vue 按需加载支持 ] }), ] })
作者:悟空和大王
链接:https://juejin.cn/post/7019406652767993887