VUE搭建关系系统
- 1. 安装vue脚手架工具
- 2. 使用脚手架创建项目
- 2.1 选择`VUE`版本
- 2.2 启动demo
- 2.3 `vue`工程搭建完的目录
- 3. 安装Element UI
- 3.1 测试`ElementUI`
- 3.1.1 更换`Demo`页面的内容
- 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得基础框架应该是好了。后面就看要咋整了。
