一、vue项目vscode自动import,VUE组件和ts模块
1、在vscode插件市场安装volar插件
2、修改tsconfig.json文件
将moduleResolution改为node
3、重启vscode,后面再下代码就可以自动import了。
二、vue项目中使用elementplus
参考elementplus官网：https://element-plus.org/zh-CN/guide/design.html
1、为项目安装elementplus
先进入项目的根目录，然后打开命令输入一下命令安装element-plus
npm install element-plus --save2、安装按需引入插件
npm install -D unplugin-vue-components unplugin-auto-import安装这两个插件的目的是为了在后续使用elemntplus的过程中按需导入elementplus的组件，只有使用了对应的组件才将这个主键导入到项目中来。这也是elementplus官方推荐的方式。
然后修改vite.config.ts，在plugins加入AutoImport，Components，然后就可以使用elementplus了，详细配置如下
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})3、main.ts引入element-plus样式
需要再main.ts引入element-plus样式，否则ElMessage等组件无法弹出
import 'element-plus/dist/index.css'
三、vue中使用unocss
官网参考：https://unocss.dev/integrations/
1、安装unocss
npm install -D unocss2、修改vite.config.ts引入unocss插件 如下
// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
UnoCSS(),
],
})3、在项目更目录下创建uno.config.ts文件，用于配置unocss
// uno.config.ts
import { defineConfig } from 'unocss'
import presetIcons from '@unocss/preset-icons'
import presetWind from '@unocss/preset-wind'
export default defineConfig({
presets: [
presetIcons(), //图标插件
presetWind(), //Tailwind的css预设库
],
})4、Unocss使用iconify-json图标库
1、打开官方选择自己想要的图标集
iconify图标库官网：https://iconify.design/
2、安装图标集
点击进入想要安装的图标集，然后点击任意图标，查看图集名称，这里以Google Material Icons为列。
选择好图标后网页向下滚动
安装图标集
npm i -D @iconify-json/ic3、使用图标
找到图标名称，在图标名称前加i-作为class类名，这里的类名为 i-ic:baseline-5g
项目中使用图标
<div class="i-ic:baseline-5g"></div>
查看效果
4、如果图标不显示,在使用图标文件的第一行加入 // @unocss-include,双斜杠要有。
// @unocss-include
// 加上上面这段，可以让 unocss 引擎，识别本页里的 icon 图标样式四、用@符代替./src
1、安装两个插件
npm install path
npm install @types/node2. 找到项目的vite.config.ts文件
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
// Vite路径别名配置
alias: {
'@': path.resolve('./src')
}
}
})3、编译项目
npm run dev4、Cannot find module '@/router/routes.ts' or its corresponding type declarations.ts(2307)如何解决
去除.ts后缀就不会报错了
五、vite配置代理服务解决跨域问题
原理说明
需要有一段特定的路径用来标识请求是需要通过代理服务发起请求，当浏览器向vite前端服务器发送请求包含这段特定的路径时，vite服务器收到这段含有特定路径的请求时就会用代理服务配置中的target的地址替换请求中服务器地址，通过代理服务向真正的服务器发送请求。本例中的特的路径是 /mqttgateway,这段路径是目标服务器所包含的路径所以不需要rewrite,如果要是前端自己加的特殊标识路径，而目标服定务器是没有这个路径的就需要通过rewrite去除。
1、本例是通过axios发送请求的，将baseURL配置成特定路径 、/mqttgateway
2、在vite.config.ts配置代理
server:{
// port:8888,//前端服务器的端口
// open:true,//项目启动是否自动通过浏览器打开
//前端跨域配置
proxy:{
'/mqttgateway':{//请求路径函有'/mqttgateway'用vite的代理服务向后台送请求，避免跨域问题
target:'http://127.0.0.1:8080/',//实际请求地址，目标服务器地址
changeOrigin:true,
/*重写路径，如果值前端自己加的用于标识跨域的路径而后端实际没有这段路径，需要用重写路径去除标识的路径
这里没有额外加标识路径所以就注释了
*/
//rewrite: (path) => path.replace(/^\/mqttgateway/, ''),
}
}
}
3、验证是否成功
1、发送请求
浏览器发起的请求：http://127.0.0.1:5173/mqttgateway/system/getStatus
vite代理服务发送的请求：http://127.0.0.1:8080/mqttgateway/system/getStatus
目标服务器能处理的请求：http://127.0.0.1:8080/mqttgateway/system/getStatus
2、接收响应
