Vue3+Echarts5+Element UI开发笔记——从创建文件开始

我昕依旧

渐进式JavaScript 框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。作为最流行的前端框架之一，在实际工作开发也就必不可少的。简介 | Vue.js


1、安装Vue3

有两种方式，可选择在项目文件CDN中引入：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  const { createApp } = Vue
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
也可以在cmd终端下载Vue的文件：确保你的电脑已经下载node.js，并配置系统变量才能使用npm命令
> npm init vue@latest2、创建Vue项目

下载成功后在cmd终端输入：vue ui打开Vue可视化创建工具，你也可以用IDEA/vs code新建文件夹然后在根目录打开终端npm install  xxx@版本下载需要的依赖。


这里就选择默认的Vue3版本，也可以手动配置选择需要的包（有几个包必须带上）。
3、IDEA打开文件，默认是这样的：



src文件才是后面我们开发的地方。package.json可以查看下载的包及版本号，以及更改项目端口号。
4、根文件下打开终端下载Echarts5

npm install echarts --save 5、根文件下打开终端下载Element UI，Vue3用的是element plus

npm i element-plus --save6、src/main.js全局引入包文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index' //引入路由规则，在src/router下新建一个js文件用于保存项目的路由规则
import './index.css'

import ElementPlus from 'element-plus' //引入element ui
import 'element-plus/dist/index.css'  //引入element ui 的css文件
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //中文版vue

// 创建应用
const app = createApp(App)
app.use(ElementPlus, {locale: zhCn})
app.use(router)
app.mount('#app')7、src/router/index.js路由规则

const User = {
  template: '<div>User</div>',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]
export default routes //暴露路由详细规则可参考Vue3路由手册：介绍 | Vue Router
8、html文件跳转标签

<router-link to="/main">main</router-link> 
<router-link to="/index">index</router-link>  
      
<!-- 声明路由占位符 -->        
<router-view></router-view>9、Element UI 使用，在html里直接上组件代码：Button 按钮 | Element Plus



10、Echarts，在Vue全局引入Echarts好像不太行，在需要引入的文件中引入吧

import * as echarts from 'echarts' //局部引入
import {ref} from "vue"
export default {
  setup(){},
  mounted(){},
  methods:{}
}
//这里在Vue的哪个周期函数中绘制或是在methods绘制看需求，
//假设在methods绘制，通过一个button按钮点击后再绘制
methods：{
     let echartsDemo = echarts.init(this.$refs.chartTest)  //创建一个<div ref="chartTest"></div>
     echartsDemo.setOption（{
       title: {},
       tooltip: {},
       legend: {},
       .......
      }） //这里存放的是绘制图表所需的数据
}echartsDemo.setOption（{}）绘制什么样的图表看需求而定，具体参考Echarts官网Examples - Apache ECharts
10、总结

Vue3和Vue2还是有区别的比如在使用脚手架或其他包的时候版本号一定要对上，这个问题我在用python的torch框架时也深受折磨，开发的第一步决定后面能不能继续。
另外，作为前端学习多年的小编，从曾经的原生代码写前端到现在的框架，感觉发现了”新大陆“，很多炫酷个性化的界面组件我们直接用就行，还能解决很多跨终端冲突的问题，用vue哪里还会去调用ajax实时显示呢，有时候自己写的原生代码自己都不一定信得过。