【Vue3 ElementUI开发环境搭建】

VUE搭建关系系统

• [1. 安装vue脚手架工具](#1. 安装vue脚手架工具)
• [2. 使用脚手架创建项目](#2. 使用脚手架创建项目)
• • [2.1 选择`VUE`版本](#2.1 选择VUE版本)
  • [2.2 启动demo](#2.2 启动demo)
  • [2.3 `vue`工程搭建完的目录](#2.3 vue工程搭建完的目录)
• [3. 安装Element UI](#3. 安装Element UI)
• • [3.1 测试`ElementUI`](#3.1 测试ElementUI)
  • • [3.1.1 更换`Demo`页面的内容](#3.1.1 更换Demo页面的内容)
    • [3.1.2 引入`ElementUI`的样式表](#3.1.2 引入ElementUI的样式表)

1. 安装vue脚手架工具

npm install -g @vue/cli

执行命令后等他跑一下

没有直接的错误提示信息就当正确安装了吧。

2. 使用脚手架创建项目

vue create demo01

其中demo01指的是要创建的工程名称。执行命令之后会进入工程创建导航

2.1 选择VUE版本

目前先选择Vue3尝试下，虽然我也搞不来Vue3。但是不要虚，反正搞不来就想办法，搞了说不定就搞得来了啦。

选了之后他就各种嘎嘎一顿操作，应该是从网上下周各种库文件.

然后居然就一口气执行完了，导航结束

2.2 启动demo

根据提示，进入工程目录，后执行

npm run serve

使用浏览器访问提示的URL地址http://172.16.17.1:8080/

2.3 vue工程搭建完的目录

3. 安装Element UI

在工程目（我这里是demo01）下执行安装操作，ElementUI对应的Vue3.0版本是Element Plus。所以命令如下

npm install element-plus --save

好了，从下图来看应该是顺利安装成功了。

3.1 测试ElementUI

3.1.1 更换Demo页面的内容

Demo文件在 src下，为了测试ElementUI是否能正常工作，就直接更改入口文件App.vue，进行测试。

替换为测试内容如下:

<template>
  <el-button>默认按钮</el-button>
</template>
 
<script>
import { ElButton } from 'element-plus';
export default {
  components: {
    [ElButton.name]: ElButton,
  },
};
</script>

再次运行服务,访问URL地址得到的界面内容

从上图可以看出按钮已经可以正常被显示，说明ElementUI被正常解析、执行。但是这按钮有点不太美观，应该是ElementUI的样式没有被应用。

3.1.2 引入ElementUI的样式表

全局引入ElementUI样式表，应该是在vue程序的入口文件main.js中加入。

main.js原始的内容

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

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

增加以下ElementUI样式表的导入，

所以导入样式的内容应该是：

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'

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

保存之后，再看界面(界面会主动刷新，不行就手动试试吧 )。

从上面看样式已经被应用上了。至此，应该是Vue3 加ElementUI得基础框架应该是好了。后面就看要咋整了。