HBuilder创建vue-cli项目并安装element-plus

强烈建议先把这篇文章学习了《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载等》

一、安装npm

下载node.js，安装完node.js自然就安装好了npm。

本机安装了npm后才可以正常使用安装启动命令。

二、新建vue3项目

HBuilder只是一个开发环境，可以借用其自带的项目生成功能，这和使用命令vue init webpack Admin创建项目生成的目录文件结构略有不同。

在HBuilder新建一个vue3项目：Admin

在这里插入图片描述

项目创建后打开命令窗口

右键点击项目，打开命令行窗口，以保证你的命令是用于该目录的。

在这里插入图片描述

输入命令运行程序

npm run dev
1

当然也可以利用HBuilder快速执行命令

在这里插入图片描述

执行成功后会给出测试地址和端口。

在这里插入图片描述

页面显示正常

在浏览器中使用提供的http://localhost:3000/打开页面，

在这里插入图片描述

三、下载element-plus

在命令行窗口输入下载命令

npm install element-plus
1

或

npm install element-plus --save
1

根据自己需求来。

查看是否下载好

node_modules目录存在@element-plus文件夹

在这里插入图片描述

根目录package.json中已经标记了element-plus

在这里插入图片描述

四、添加element-plus组件

官方介绍：https://element-plus.org/zh-CN/guide/quickstart.html
在这里插入图片描述

HBuilder中打开Admin/src/main.js，代码如下：

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

createApp(App).mount('#app')
1
2
3
4

参考官网将代码修改为：

import { createApp } from 'vue'

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

import App from './App.vue'

//createApp(App).mount('#app')

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

在这里插入图片描述

五、测试

在Admin/src/components/HelloWorld.vue页面中添加element-plus 按钮

  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>
1
2
3
4
5
6
7
8
9