创建Vue3项目以及引入Element-Plus

╰+哭是因爲堅強的太久メ 2024-03-30 15:47 73阅读 0赞

## 创建Vue3项目以及引入Element-Plus ##

前提条件：本地需要有node环境以及安装了npm，最好设置了镜像，这样下载包的时候会快些。  
1、安装vue脚手架vue-cli3

npm install @vue/cli -g

2、安装后查看vue的版本

vue -V

![在这里插入图片描述][d25718f07ac04748a8ee9a87ef0ec9c3.png]  
3、创建Vue项目，项目名称**不支持特殊字符也不支持驼峰命名**

vue create 项目名称

![在这里插入图片描述][eaac21dee8f14599845ae3d6ae65bd45.png]  
4、启动项目

npm run serve

### 项目中引入Element-Plus ###

1、安装element-plus

npm install element-plus --save

安装后在package.json中可以看到element-plus的版本  
![在这里插入图片描述][43ab9930dfc4411695e6dd3071424f00.png]

2、在main.js中导入element-plus

//导入element-plus
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'

3、使用element-plus

const app = createApp(App)
    //挂载ElementPlus
    app.use(ElementPlus)
    app.mount('#app')

[d25718f07ac04748a8ee9a87ef0ec9c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e4511d4d279248788be603c1278e70cf.png
[eaac21dee8f14599845ae3d6ae65bd45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8a7665c210b842b8943a995cafd28171.png
[43ab9930dfc4411695e6dd3071424f00.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c1889ab3fbe143e980bef735e2d4f8a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关创建Vue3项目以及引入Element-Plus

创建Vue3项目以及引入Element-Plus 前提条件：本地需要有node环境以及安装了npm，最好设置了镜像，这样下载包的时候会快些。 1、安装vue脚手架vu

╰+哭是因爲堅強的太久メ/ 2024年03月30日 15:47/ 0 赞/ 74 阅读

相关 SpringBoot3+SpringSecurity6.x+Vue3+TypeScript+ElementPlus项目

> 今天给大家带来的是本人写的一套快速开发框架，具备动态角色、权限管理，整合工作流Activiti7、quartz定时器，代码生成器 [下载地址][Link 1] 后端技

野性酷女/ 2024年03月24日 20:51/ 0 赞/ 69 阅读

相关【Vue】 Vue 项目创建和相关组件引入

一、Vue 项目创建 vue init webpack 【项目名】二、ElementUI 引入安装 ElementUI npm

以你之姓@/ 2023年02月18日 10:56/ 0 赞/ 23 阅读

相关 vue3+elementplus倒计时效果按钮

效果 ![在这里插入图片描述][20210428091119293.gif] 代码实现 <template> <el-form label

深碍√TFBOYSˉ_/ 2023年01月17日 08:27/ 0 赞/ 430 阅读

相关 Vue3+ElementPlus 根据路由自动创建二级菜单

最终效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

绝地灬酷狼/ 2023年01月16日 14:30/ 0 赞/ 655 阅读

相关 Vue3 ElementPlus Admin

Vue3 Element Plus Admin 开箱即用的后管理系统。它基于vue3和element plus 实现。内置了动态路由，i18n国际化，动态权限菜单等功能 ✅

- 日理万妓/ 2022年10月14日 01:01/ 0 赞/ 651 阅读

相关 Vue3+TS+Vite+elementPlus项目搭建

0 - 0 - 项目地址 https://gitee.com/wswhq/vue3-element-plus-vite2-updating.git [Vue3-El

梦里梦外;/ 2022年10月09日 14:29/ 0 赞/ 345 阅读

相关 Vue3 + Ts + ElementPlus 简易项目搭建

初始化项目如果不是最新的脚手架，就需要重新安装一下了：脚手架用的是`vue-cli ，在安装新版vue-cli时，先删掉旧版的依赖，不然报错，删掉@vue` `位置C

╰+哭是因爲堅強的太久メ/ 2022年10月07日 12:55/ 0 赞/ 237 阅读

相关创建 vue3 项目

创建 vue3 项目，需要安装 @vue/cli，如果电脑里已安装了 vue-cli，可以选择卸载 vue-cli 或者同时保留 vue-cli 和 @vue/cli。如

男娘i/ 2022年10月06日 00:51/ 0 赞/ 226 阅读

相关【vue】vue创建3.x项目

vue创建3.x项目转载自：[https://blog.csdn.net/weixin\_49257048/article/details/107436525][htt

淡淡的烟草味﹌/ 2022年09月03日 13:12/ 0 赞/ 138 阅读