vue3+vite+ts配置

2023-06-25 22:16| 来源: 网络整理| 查看: 265

文章目录 1. src别名配置2. svg配置2.1 封装svg全局组件 3. 集成scss与css完成主题定制3.1 在vite中配置scss 4. 环境变量配置5. 移动端适配6. 自动按需加载7. mock配置

1. src别名配置下载path模块

npm i @types/path

在vue.config.ts 配置别名路径 // vite.config.ts import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src } } })

在TypeScripe配置编译命令

// tsconfig.json { "compilerOptions": { "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录 "paths": { //路径映射，相对于baseUrl "@/*": ["src/*"] } } } 2. svg配置安装依赖 npm install vite-plugin-svg-icons -D 在vite.config.ts中配置插件 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import path from 'path' export default () => { return { plugins: [ createSvgIconsPlugin({ // Specify the icon folder to be cached iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], // Specify symbolId format symbolId: 'icon-[dir]-[name]', }), ], } } 导入到main import 'virtual:svg-icons-register' 使用注意点文件夹名称可选，看具体的存放路径与插件的配置路径 2.1 封装svg全局组件在src/components目录下创建一个SvgIcon组件 defineProps({ //xlink:href属性值的前缀 prefix: { type: String, default: '#icon-' }, //svg矢量图的名字 name: String, //svg图标的颜色 color: { type: String, default: "" }, //svg宽度 width: { type: String, default: '16px' }, //svg高度 height: { type: String, default: '16px' } }) 在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件 import SvgIcon from './SvgIcon/index.vue'; import type { App, Component } from 'vue'; const components: { [name: string]: Component } = { SvgIcon }; export default { install(app: App) { Object.keys(components).forEach((key: string) => { app.component(key, components[key]); }) } } 声明全局组件的类型 types/components.d.ts 具体配置参考element-plus // 设置全局组件类型 import SvgIcon from '@/components/SvgIcon.vue' // 2. 声明 vue 类型模块 declare module 'vue' { // 3. 给 vue 添加全局组件类型，interface 和之前的合并 interface GlobalComponents { // 4. 定义具体组件类型，typeof 获取到组件实例类型 // typeof 作用是得到对应的TS类型 SvgIcon: typeof SvgIcon } } 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件 import gloablComponent from './components/index'; app.use(gloablComponent); 3. 集成scss与css完成主题定制

首先说明，$ 和 :root 都是用于定义 CSS 变量的方法，但它们有一些区别。

:root 选择器用于定义全局的 CSS 变量，通常在根元素（即 HTML 元素）中使用。例如： :root { --primary-color: #007bff; } body{ color:var(--primary-color) }

这样就定义了一个名为 --primary-color 的全局变量，可以在整个页面中使用。

而 $ 是 Sass 或者 @ 是Less 等 CSS 预处理器中定义变量的语法。在 Sass 中，可以使用 $ 符号来定义变量，例如：

$primary-color: #007bff; body { color: $primary-color; } 这样就定义了一个名为 $primary-color 的变量，并将其应用于 body 元素中的 color 属性。总的来说，:root 用于定义全局的 CSS 变量，而 $ 用于定义预处理器中的变量。两者的作用类似，但使用方法略有不同。 3.1 在vite中配置scss

当你在index.scss全局样式文件中使用$ 变量是会报错的.因此需要给项目中引入全局变量$.

$base-menu-background: #001529; ::-webkit-scrollbar-track { background: $base-menu-background; } 在vite.config.ts文件配置如下: export default defineConfig((config) => { css: { preprocessorOptions: { scss: { // 用于解析$定义的样式 javascriptEnabled: true, additionalData: '@import "./src/styles/variable.scss";', }, }, }, } } 4. 环境变量配置

项目开发过程中，会存在开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。

开发环境（development）开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。

测试环境（testing）测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试

生产环境（production）指的是软件开发中用于正式运行和交付的环境，生产环境一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器！！！

项目根目录分别添加开发、生产和测试环境的文件! .env.development .env.production .env.test

开发环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取 NODE_ENV = 'development' VITE_APP_TITLE = '项目的标题' VITE_APP_BASE_API = '/dev-api'

生产环境

NODE_ENV = 'production' VITE_APP_TITLE = '项目标题' VITE_APP_BASE_API = '/prod-api'

测试环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取 NODE_ENV = 'test' VITE_APP_TITLE = '项目的标题' VITE_APP_BASE_API = '/test-api' 在package.json配置运行命令 "scripts": { "dev": "vite --open", "build:test": "vue-tsc && vite build --mode test", "build:pro": "vue-tsc && vite build --mode production", "preview": "vite preview" },

index.html 中使用 VITE_APP_TITLE

安装插件 npm add vite-plugin-html -D

vite.config.ts配置

import { createHtmlPlugin } from 'vite-plugin-html' plugins: [ createHtmlPlugin() ]

index.html 取出值

'postcss-px-to-viewport': { // 设备宽度375计算vw的值 viewportWidth: 375, }, }, }; 6. 自动按需加载安装 npm i unplugin-vue-components -D 使用 import Components from 'unplugin-vue-components/vite' plugins: [ // 解析单文件组件的插件 vue(), // 自动导入的插件，解析器可以是 vant element and-vue Components({ dts: false, // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入 resolvers: [VantResolver({ importStyle: false })] }) ], antd使用 npm i ant-design-vue@next import Components from 'unplugin-vue-components/vite' import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ .......其它plugins配置 Components({ resolvers: [ AntDesignVueResolver(), ] }), ........其它plugins配置 ] })

详细使用参考链接

7. mock配置安装 pnpm i vite-plugin-mock mockjs -D 在 vite.config.ts 配置文件启用插件 import { viteMockServe } from 'vite-plugin-mock' plugins: [ viteMockServe({ // mockPath 默认不配置地洞找src同级的目录 mockPath: './src/mock', localEnabled: true }) ] //用户信息数据 function createUserList() { return [ { userId: 1, avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', username: 'admin', password: '111111', desc: '平台管理员', roles: ['平台管理员'], buttons: ['cuser.detail'], routes: ['home'], token: 'Admin Token', }, { userId: 2, avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', username: 'system', password: '111111', desc: '系统管理员', roles: ['系统管理员'], buttons: ['cuser.detail', 'cuser.user'], routes: ['home'], token: 'System Token', }, ] } export default [ // 用户登录接口 { url: '/api/user/login',//请求地址 method: 'post',//请求方式 response: ({ body }) => { //获取请求体携带过来的用户名与密码 const { username, password } = body; //调用获取用户信息函数,用于判断是否有此用户 const checkUser = createUserList().find( (item) => item.username === username && item.password === password, ) //没有用户返回失败信息 if (!checkUser) { return { code: 201, data: { message: '账号或者密码不正确' } } } //如果有返回成功信息 const { token } = checkUser return { code: 200, data: { token } } }, }, // 获取用户信息 { url: '/api/user/info', method: 'get', response: (request) => { //获取请求头携带token const token = request.headers.token; //查看用户信息是否包含有次token用户 const checkUser = createUserList().find((item) => item.token === token) //没有返回失败的信息 if (!checkUser) { return { code: 201, data: { message: '获取用户信息失败' } } } //如果有返回成功信息 return { code: 200, data: {checkUser} } }, }, ]

mock详细语法参考链接

【本文地址】

公司简介

联系我们