uniApp+Vue3+vite+Element UI或者Element Plus开发学习，使用vite构建管理项目,HBuilderX做为开发者工具

news2024/12/24 9:19:41

我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。

准备工作

1，下载HBuilderX 开发者工具
2，安装node和npm

至于如何下载开发者工具和安装node我就不说了，大家自行百度即可。

一，vue3项目创建

1-1，HBuilder开发者工具下载

有点开发基础的同学可能会问了，为什么不用vscode或者webstorm来开发vue项目呢？
我这里出于以下考虑，所以建议新手，跟着石头哥一起使用HBuider来开发vue3项目

1，HBuider是国产的，我们使用起来更容易上手
2，HBuider为我们傻瓜式创建vue3，而其他的开发者工具还要我们自己去输入命令行来创建。所以新手来学习vue3还是HBuider更容易些。
3，我们后续开发uniapp，小程序也会用到HBuider

1-2，创建新的vue3项目

打开开发者工具以后，我们点击左上角的文件，然后点新建，点击新建项目。

然后新建项目如下，记得项目名称要是英文或者拼音。

创建好的vue3项目如下

1-4，运行vue3项目

我们可以按照下图所示，运行项目，这样就不用去记命令行了，是不是对新手很友好。
选中App.vue然后运行，运行终端，点击npm run dev

终端命令行就会执行 npm run dev
然后就会生成一个网址

打开网址，就可以看到我们的项目了

我们可以先简单的改下内容，比如在代码里加入一个文字

到此我们自己的第一个vue3项目就创建好了，接下来跟着石头哥愉快的开发吧。如果你只是想学习vue3的基本知识和语法，到这里就可以在这个框架里敲代码学习了。

二，引入element-plus

1-1，命令行安装element-plus

如下图所示我们新开一个终端。

新开的终端，要确认我们在当前目录下，才可以去安装依赖。如果看不多，可以关闭项目，重启，然后去执行命令行。

然后同样是要终端命令行里执行以下代码

npm install element-plus @element-plus/icons-vue

依然是耐心等待安装element

安装完成以后如下

1-2，配置引入element plus

在main.js里做如下操作

对应代码贴出来给到大家

import { createApp } from 'vue'
import App from './App.vue'

// ElementPlus相关配置
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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