create-vue 创建VUE3 项目及基础组件的安装-优快云博客

创建一个工程化的Vue项目，执行命令：npm init vue@latest
进入项目目录，执行命令安装当前项目的依赖：npm install
启动项目：npm run dev

Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/
引入Axios的js文件（参照官网）
网络引用：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
local安装axios（在当前工程的目录下）： npm install axios

CSS扩展语言Sass <style lang="scss" scoped>

安装Sass（在当前工程的目录下）：npm install sass -D

Element：是饿了么团队研发的，基于 Vue 3，面向设计师和开发者的组件库。
组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。
官网：https://element-plus.org/zh-CN/#/zh-CN
ElementPlus的使用步骤
安装组件库（在当前工程的目录下）：npm install element-plus –save
引入：在main.js中引入Element Plus（参照官方文档）
组件：访问官方文档中的组件，调整成我们需要的样子即可

跨域配置：vite.config.js 文件
server: {
  proxy: {
     '/api': {
      target: 'http://localhost:8080’,
      changeOrigin: true,
      rewrite: (path) =>path.replace(/^\/api/, '')
    }
  }
}
request.js 文件
import axios from 'axios';
const baseURL = '/api';
const instance = axios.create({baseURL})

路由 Vue Router
安装vue-router（在当前工程的目录下）：npm install vue-router@4
在src/router/index.js中创建路由器，并导出
在vue应用实例中使用vue-router
声明router-view标签，展示组件内容

Pinia状态管理库
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态
安装pinia（在当前工程的目录下）： npm install pinia
在vue应用实例中使用pinia
在src/stores/token.js中定义store
在组件中使用store
Pinia持久化插件-persist
Pinia默认是内存存储，当刷新浏览器的时候会丢失数据。
Persist插件可以将pinia中的数据持久化的存储
安装persist（在当前工程的目录下）： npm install pinia-persistedstate-plugin
在pinia中使用persist
定义状态Store时指定持久化配置参数

附Echarts资料网址：

https://echarts.apache.org/zh/index.html 官网
https://echarts.apache.org/examples/zh/index.html 实例
https://echarts.apache.org/handbook/zh/get-started/ 快速上手
https://www.isqqw.com/ 图表可实时视化样式调试