HBuilder X+Vue3+element-plus_使用hbuilder x开发vue3+node+element-plus

1.node安装

node安装
网上有详细教程

2.HBuilder X创建Vue3项目

npm run dev （ctrl+c停止运行）

http://localhost:3000/

3.安装element-plus

npm install element-plus --save

修改main.js

import { createApp } from 'vue'
import App from './App.vue'
 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10

App.vue

		<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>
1
2
3
4
5

4.打包

1.npm run build打包

2.下载nginx
3.打开html文件夹，删掉里面的内容，将已打包的dist文件夹里面的内容，全部复制到html文件夹下

4.打开conf文件夹，找到 nginx.conf文件，用编辑器打开
7080端口

5.启动项目
在地址栏输入localhost:7080即可

浏览器打开

cmd窗口

查看nginx是否启动

tasklist /fi "imagename eq nginx.exe"

重启nginx

nginx -s reload

关闭nginx

taskkill /f /t /im nginx.exe
1
2
3
4
5
6
7
8
9
10
11