vue-ui 快速搭建vue项目

【准备阶段】

安装好NodeJS、NPM工具
安装Vue CLI - 官方发布的一个vue.js项目脚手架，使用vue-cli可以快速创建Vue项目
vue ui 是在 vue-cli 基础上封装的。

$ npm install -g @vue/cli

【vue-ui 搭建vue项目】

dos cmd命令行输入："vue ui"

$ vue ui

启动后有个浏览器页面引导搭建项目，步骤：

1.使用npm作为包管理器
2.选择vue版本vue2/3，选定手动配置项目
3.选择功能：Babel、Router、Vuex，其他不选，也不要预设项目
4.右上角：安装依赖 axios、element-plus，查看运行依赖中是否到位

5.安装完成，参考element-plus官网(https://element-plus.org/zh-CN/)指南-"完整引入"部分引入element-plus
  # 在src/main.js文件中引入
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'

  app.use(ElementPlus)

官网：
https://element-plus.org/zh-CN/
指南：https://element-plus.org/zh-CN/guide/design.html
https://element-plus.gitee.io/zh-CN

6.测试element-plus组件是否生效

 右上角"组件" --引入"按钮"组件代码 -- 放到src/views/AboutView.vue，覆盖所有页面内容

 去掉<script lang="ts" setup>中的lang="ts"

7.运行服务：npm run serve

8.访问：localhost:8080/#/about

9.访问成功，前端项目搭建成功！

10.开发过程中如果需要安装组件，比如：sass

 # 登录：localhost:8080/dashboard
 # "项目依赖"页面展示中如果没有需要的组件则进行安装
 # 点击左侧菜单"依赖" --> 页面右上角"安装依赖" --> 查找输入框里输入"sass" --> 选中组件 --> 右下角点击"安装"
 # 同上安装：sass-loader
 # 安装完成后会跳转到"项目依赖"页面，里面展示的就有你刚安装好的组件了