阅读 1244

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


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐