HBuilder创建vue-cli项目并安装element-plus后测试打包

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

一、安装npm

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

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

二、新建vue3项目

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

1. 在HBuilder新建一个vue3项目：Admin

2. 项目创建后打开命令窗口

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

3. 输入命令运行程序

npm run dev

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

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

4. 页面显示正常

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

三、下载element-plus

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

npm install element-plus

或

npm install element-plus --save

根据自己需求来。

2. 查看是否下载好

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

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

四、添加element-plus组件

官方介绍：https://element-plus.org/zh-CN/guide/quickstart.html

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

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

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

2. 参考官网将代码修改为：

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. 在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>

2. 浏览器中显示正常，测试成功

六、打包生产

1. 使用命令

npm run build

或使用HBuilder自带的

2. 打包后生成dist文件夹

3. 展示页面为空白

在浏览器中运行dist目录中的网站，发现页面显示为空白~~

打开index.html可以看到路径为根目录，怎么办呢？总不可能每次打包时都去手动改写吧~~

5. 路径问题解决

vue3版本和vue2版本修改方式有所不同，HBuilder使用vite，修改方式也可能有所不同哦~~

• 打开Admin/vite.config.js

• 增加base:'./'目录路径

• 再次npm run build打包后问题解决

七、总结

1. vue3-cli项目
   element-plus为vue3项目，使用cli脚手架当然很有必要

2. 运行开发环境dev和运行生产环境build

npm run dev
npm run build

3. 安装组件

npm install [组件名]

4. 配置文件
   [项目名]/vite.config.js