Vue3+Vite+ElementPlus管理系统常见问题 本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题,没有技术深度,但全都是解决实际问题的干货,可以当作是问题手册以备后用。本人日常工作偏后端开发,因此,文中的一些前端术语描述可能不严谨,敬请谅解。重点是:这里记录的解决方案都是行之有效...
1、安装Element-Plus 1 npm install element-plus --save 2、在main.ts中引入element-plus 1 2 3 4 importElementPlus from'element-plus'// element-plus import'element-plus/dist/index.css'// element-plus createApp(App).use(router).use(ElementPlus).mount('#app') 配置Pinia 1、安装Pinia 1 npm...
Element Plus: 其中Element Plus官方也说明了这种换肤方式: (主题| Element Plus) 构建包(dist)中的皮肤目录 为了统一后端寻址,dist中的皮肤文件默认统一放置在`dist/assets/skin`,也可以存放到其他位置。目录中即是开发`src/skin`中的每个皮肤的文件夹,内容也一致。 ├─dist | ├─index.html | └─assets ...
{ ElementPlusResolver } from "unplugin-vue-components/resolvers"; import ElementPlus from "unplugin-element-plus/vite"; import Inspect from "vite-plugin-inspect"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx({ // options are passed on to @vue/...
首先我们进行element-plus安装 代码语言:javascript 复制 yarn add element-plus 之后我们在vite.config.ts中进行配置,这里既然进行自动引入了,顺便把vue的组件也自动引入了,大家应该知道vue3的组合式API(也是本文采用的方式)中无论是ref还是生命周期函数之类的,都需要在使用时进行手动引入,这里我们把vue的组件也还有vue...
import'element-plus/es/components/message-box/style/css'import{ElMessageBox}from'element-plus' ts-ignore 在vscode 中有时会有报错提示,如下图: 解决办法是添加//@ts-ignore(我创建的是JS工程,IDE本来不应该报错的,但是vscode可能误报,消除红色提示就可以用这个方法) ...
$ yarn add element-plus $ pnpm install element-plus 1. 2. 3. 4. 5. 2.安装对应的插件 npm install -D unplugin-vue-components unplugin-auto-import 1. 3.在vite.config.ts中引入 <!-- vite.config.ts 代码结束 --> import { defineConfig } from 'vite' ...
import{ElTable}from'element-plus' 直接删掉或者注释掉就可以了,因为之前下载主动引入的组件了,这里在引入就冲突了 第二种复杂化的 需要给main.js里面添加一行代码,引入element 的样式 import'element-plus/theme-chalk/src/index.scss' 如果项目中没有scss的话可能会报错 ...
为了开发一套高效使用的 Vite5 + Vue3 + Element Plus 前端框架,你可以按照以下步骤进行。话不多说,先上演示地址:Vue Shop Vite。 1, 安装开发环境 开发之前,确保你的电脑已经安装了 Node.js(建议使用最新稳定版 LTS),然后安装 Vite CLI。在命令行中运行以下命令: ...
(ElemenPlus 官网:https://element-plus.gitee.io/zh-CN/) 首先来安装包: npm install element-plus--save 完整导入项目(会使项目大小增加很多,可以按需导入) // main.tsimport{ createApp }from'vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importAppfrom'./App.vue'constapp...