使用场景:当一个页面加载的时候,时间过久(特别是首屏)。一般是两个原因,资源太大,接口拉取时间过久;页面中有较为复杂的组件,导致渲染过久。 当我们一个页面中引入的子组件很多时,打包的时候这个组件生成的文件也会很大 按需引入的原理 对于link标签的引入: 1. 2. preload 是告诉浏览器页面必定需要的资源,...
vite独有的钩子: (1)config:在解析 Vite 配置前调用 .接收原始用户配置(命令行选项指定的会与配置文件合并)和一个描述配置环境的变量,包含正在使用的 mode 和 command。 .它可以返回一个将被深度合并到现有配置中的部分配置对象(也可以返回一个Promise),或者直接改变配置 .用户插件在运行这个钩子之前会被解析,因此...
app.use(ElementPlus).use(router).mount('#app') 以上就可以开始使用ElementPlus组件了 4. 现在让我们来测试一下所有的功能: 首先在views下创建一个bottons.vue组件来做测试页: 然后把bottons.vue路径添加到router的index.ts配置中 import{createRouter,createWebHistory}from'vue-router'constrouter =createRouter(...
在上面的element-plus国际化配置基础上 import{useI18n}from"vue-i18n";const{locale:localeLanguage}=useI18n();constchangeLanguage=(language:any)=>{locale.value=language;localeLanguage.value=language.name;// 在language参数中有一个name属性,值就是 zh-cn 或者 en, 这样就可以修改 vue-i18n中的语言属性了...
element-plus官网给的方案是在html上添加dark类名,在项目中创建个响应变量去修改css变量,可以添加很多种配色方案吧。 document.querySelector(':root').computedStyleMap().get("--el-text-color-primary") 补充element-plus网站的代码 (() => { const e = localStorage.getItem("el-theme-appearance"); (e...
配置plgins export default defineConfig({ plgins: [ createStyleImportPlugin({ resolves: [ElementPlusResolve()], libs: [ { libraryName: 'element-plus', esModule: true, resolveStyle: (name: string) => { name = name.substring(0, name.length); return `element-plus/theme-chalk/${name}.cs...
1. 在VS Code终端中执行命令 pnpm install element-plus 2.按需自动导入Vue (1)安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。在VS Code终端中执行命令以下命令：npm install -D unplugin-vue-components unplugin-auto-import (2)把下列代码插入到 vite.config.ts 配置文件中，注意...
element-plus中文配置 这里补上一个之前遗漏的点,就是element-plus国际化,element-plus默认语言为英文,我们这里需要设置为中文,所以需要引入一下中文包。 由于我们是自动引入的,所以无法进行全局配置,element-plus为我们提供了一个全局配置的组件,我们可以在App.vue中进行使用 ...
进入项目目录,安装 Element Plus: cd my-vue-app npm install element-plus 4. 配置项目 在项目根目录下,创建一个名为 `src` 的文件夹。将 `src` 文件夹下的 `main.js` 文件内容替换为以下代码: import { createApp } from 'vue' import App from './App.vue' ...
整合element-plus 整合vue-router 1.在 src 下创建 router 文件 2.在router创建index.js 还有 index.vue 3.全局引入,在main.js中(@没配置可以去vite.config.js里配置) 4.app.vue 整合vuex 1.在 src 文件下创建 store 文件 2.在 store 文件下创建 以下文件 ...