1. Introducir automáticamente elemento plus
En el archivo vite.config.ts,
consulte la sección del sitio web oficial e impórtelo automáticamente.
import {
defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {
resolve } from "path"; // 编辑器提示path模块找不到。下载 yarn add @types/node --dev 就可
//element-plus自动导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import {
ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// 自动导入element相关函数，如：ElMessage, ElMessageBox..
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
vue()
],
resolve: {
alias: {
"@": resolve(__dirname, "src"), // 配置别名：将 @ 指向'src'目录
},
},
server: {
host: "0.0.0.0", //解决vite use --host to expose 不配置启动时network地址就显示前面的
port: 3000, //端口号
open: true, //启动自动打开浏览器
},
css: {
preprocessorOptions: {
scss: {
additionalData: "@import '@/styles/constant.scss';", //记得写分号
},
},
},
});
2. Introduce automáticamente ElMessage en vue y márcalo en rojo,
si lo introduces manualmente también debes introducir su css, de lo contrario habrá problemas con el estilo.
import {
ElMessage } from 'element-plus'
import 'element-plus/es/components/mesage/style/css'
La introducción de js-cookie siempre está marcada en rojo.
Agregar tsconfig.json
"noImplicitAny": false,
"allowSyntheticDefaultImports":true,//允许从没有默认导出的模块引入
VUE3+vite variables de entorno global
También es lo mismo .env.developmentque .env.productionlas variables globales de configuración del archivo
① Use el método vite para leer.
Tenga en cuenta que el nombre de la variable VITE_+ solo se puede identificar cuando sea necesario.
Donde debe usarse.
import.meta.env.VITE_API_URL
② vite.config.ts
está configurado en vite.config.ts. Tiene la desventaja de ser inflexible. Se recomienda utilizar ①
Donde sea necesario
process.env.VITE_API_URL
requiere error
Utilice require directamente en la invitación para informar un error. Solución:
introduzca lo siguiente cuando se utilicerequire
const require = (imgPath: string) => {
try {
const handlePath = imgPath.replace("@", "..");
// https://vitejs.cn/guide/assets.html#the-public-directory
return new URL(handlePath, import.meta.url).href;
} catch (error) {
console.warn(error);
}
};
export default require;
navegación de enrutamiento programático vue3
Debido a que vue3 no tiene esto, no puede obtener el enrutador directamente.
import {
useRouter } from "vue-router";
const router = useRouter();//获取实例
router.push({
name: item.label });
uso de pinia
store/index.ts
import {
createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
Introducido mina.tsy utilizado
import {
createApp } from "vue";
import "@/styles/index.scss";
// 放公共的css代码，引入main.ts就可以在每个页面都用了
import "./style.css";
import router from "./router";
import App from "./App.vue";
//使用pinia
import pinia from "./store/index";
createApp(App).use(router).use(pinia).mount("#app");
A continuación puede escribir módulos separados, cada módulo se divide en un archivo
返回的函数统一使用useXXX作为命名方案，这是约定的规矩
import {
defineStore } from "pinia";
const userInfo = defineStore('user',{
})
export default userInfo;
usar:
- Para mantener la capacidad de respuesta y no poder desestructurar y asignar valores directamente, utilice
const currentPathName = computed(() => {
return currentPath.label;
});
O usarstoreToRefs
import {
storeToRefs } from "pinia";
const {
currentPath } = storeToRefs(useUser);
Persistencia :
instalar el pinia-plugin-persistedstatecomplemento
Agregarstore/indes.ts
import {
createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);//持久化
export default pinia;
Agregue a la tienda que debe persistir:
1 persist:true.: luego habilite
2. Cómo usar objetos
persist: {
// 修改存储中使用的键名称，默认为当前 Store的 id
key: "storekey",
storage: window.sessionStorage, // 修改为 sessionStorage，默认为 localStorage
paths: ["currentPath", "userBaseInfo"], // state 中的字段名，按组打包储存
},
entero
import {
defineStore } from "pinia";
import {
menuItem } from "../../types/menu";
interface menu {
userBaseInfo: object;
currentPath: menuItem;
}
//返回的函数统一使用useXXX作为命名方案，这是约定的规矩
const useUserInfo = defineStore("user", {
// 开启数据持久化
persist: {
// 修改存储中使用的键名称，默认为当前 Store的 id
key: "storekey",
storage: window.sessionStorage, // 修改为 sessionStorage，默认为 localStorage
paths: ["currentPath", "userBaseInfo"], // state 中的字段名，按组打包储存
},
// persist: true,
state: (): menu => ({
userBaseInfo: {
},
currentPath: {
path: "",
label: "",
key: "",
icon: "",
},
}),
actions: {
//设置currentPath
set_currentPath(item: menuItem) {
this.currentPath = item;
},
},
});
export default useUserInfo;
Monitorear los cambios del enrutador
watch(
() => router.currentRoute.value,
(newValue: any) => {
console.log("newValue", newValue);
}
},
{
immediate: true }
);
El reloj tiene dos parámetros, el primero es el valor a monitorear y el segundo es una función de devolución de llamada.
watch(WatcherSource, Callback, [WatchOptions])
参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue,oldValue）。
[WatchOptions]：deep、immediate、flush可选。
deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
post：dom更新渲染完毕后，执行回调函数。
sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。
Monitorear múltiples valores.
Si escucha un determinado valor en el objeto reactivo, use () => data.selectTemp
//有一个值发生了变更，则会触发watch，如果两个值同时发生变更，同样只是触发一次watch的回调函数。
watch([finalText, () => data.selectTemp], (newValue, oldValue) => {
});
La necesidad de un seguimiento profundo es el tipo de datos de referencia en sí, no sus propiedades. Además, sólo puede obtener el nuevo valor, pero no el valor anterior.
Uso de watchEffect
watchEffect también es un detector de fotogramas y una función de efectos secundarios.
Escuchará todas las propiedades del tipo de datos de referencia. No es necesario que sea específico de una propiedad específica. Escuchará inmediatamente una vez que se ejecute y dejará de escuchar cuando se desinstale el componente.
const stop = watchEffect(() => {
console.log('name:',obj.name)
})
const stopWatchEffect = () => {
console.log('停止监听')
stop();
}