vue后台管理系统从0到1(3)element plus 的三种导入方式
文章目录
- vue后台管理系统从0到1(3)element plus 的三种导入方式
- element plus 引入方式
- 完整引入
- 按需导入
- 手动导入
vue后台管理系统从0到1(3)element plus 的三种导入方式
element plus 引入方式
官方网址:https://element-plus.org/zh-CN/guide/quickstart.html
完整引入
根据官网提升,首先在 main.js 中引入代码
在我们上一期的代码中加入以下三条代码
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
然后我们测试一下,是否引入成功,在app.vue中加入一个按钮
Main.vue
<script setup></script><template>
helloworld<RouterView></RouterView><el-button>默认按钮</el-button>
</template><style scoped></style>
运行代码看浏览器
这种方式引入成功
按需导入
第一步先下载插件
npm install -D unplugin-vue-components unplugin-auto-import
第二部在vite.config.js中加入配置代码
这里你们直接复制我的就好了
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';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: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],resolve: {alias: [{find:"@",replacement:"/src"}]},
});
然后我们先去把上次的全部导入的代码注释掉
在main.js中注释掉这三行代码
重新启动程序
发现依旧可以显示按钮,配置成功
手动导入
第一步,下载插件
npm install unplugin-element-plus -D
第二步,修改配置文件
加入这两句
import ElementPlus from 'unplugin-element-plus/vite'plugins: [vue(),ElementPlus()// AutoImport({// resolvers: [ElementPlusResolver()],// }),// Components({// resolvers: [ElementPlusResolver()],// }),],
完整配置代码如下
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({plugins: [vue(),ElementPlus()// AutoImport({// resolvers: [ElementPlusResolver()],// }),// Components({// resolvers: [ElementPlusResolver()],// }),],resolve: {alias: [{find:"@",replacement:"/src"}]},
});
第三步,在使用按钮的地方导入
App.vue
<script>
import { ElButton } from 'element-plus'
export default {components: { ElButton },
}
</script><template>
helloworld<RouterView></RouterView><el-button>默认按钮</el-button>
</template><style scoped></style>
重启项目
查看按钮状态:
配置成功!!!!
最后,我们使用第二种,按需导入
删除 App.vue script 代码
注释掉两行加入的代码在vite.config.js
重新取消注释的上面三行导入代码,和下面两行配置代码
最后重启启动项目就好了
到这里第三期就结束了