一、从vue2.0过渡到vue3.0要重新搭建脚手架
共有两种方式
第一种 ：vue-cli : 安装并执行 npm init vue@latest
选择项目功能时： 除了第一项的项目名字外，其他可以暂时No
cd
npm install
npm run dev ：运行
npm run build: 打包 (生成一个dist文件夹)
第二种： vite: 使用vite 体验更快速
npm init vite-app
cd
npm install
npm run dev
二、安装我们要使用的组件：
1.axios2.echarts 3.element-plus 4.node-sass
安装方式 cnpm i element-plus axios vue-router@4 echarts@4 -s
查看package.json文档
{"name": "project_two","version": "0.0.0","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"axios": "^1.3.3","echarts": "^4.9.0","element-plus": "^2.2.30","qs": "^6.11.0","vue": "^3.0.4","vue-router": "^4.1.6"},"devDependencies": {"@vitejs/plugin-vue": "^4.0.0","font-awesome": "^4.7.0","node-sass": "^6.0.1","sass": "^1.58.1","sass-loader": "^10.4.1","vite": "^4.1.0"}}三、在main.js中全局引入
import { createApp } from 'vue'import App from './App.vue'import './index.css'import aixos from 'axios'import ElementPlus from 'element-plus'import '../node_modules/element-plus/dist/index.css'import "font-awesome/css/font-awesome.min.css";//国际版(翻译)import locale from '../node_modules/element-plus/es/locale/lang/zh-cn'import router from './router'import service from './api/service'// import echarts from 'echarts'const app = createApp(App);app.config.globalProperties.$https = aixos;app.config.globalProperties.service = service;// app.config.globalProperties.echarts = echarts;app.use(ElementPlus, { locale })app.use(router)app.mount('#app')注：小编的echarts是在组件中引入的，所以就先注释到了
四、将vue.config.js文件重命名为vite.config.js
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({plugins: [vue()],// resolve: {// alias: {// '@': fileURLToPath(new URL('./src', import.meta.url))// }// },//服务server: {// 默认打开的端口和本地// host: '0.0.0.0',port: 3000,// https: false, // 不支持httpsproxy: {'/api': {target: 'http://1.116.64.64:5004/api2/',// 实际请求地址changeOrigin: true, // 是否跨域rewrite: (path) => path.replace(/^\/api/, '') // 对什么类的服务器匹配},}}})五、引入组件
在vue2.0中引入组件可以通过手写@自动查找组件路径位置
import {getToken} from '@/utils/setToken.js'在vue3.0不支持@自动寻找组件路径位置
import {getToken} from '../../utils/setToken.js'六、在组件中更改代码
import {dataView} from '../../api/api.js';import {onMounted} from 'vue';import echarts from 'echarts'let draw = function(leg,x_data,series_data){let myCharts2 = echarts.init(document.getElementById('main2'));myCharts2.setOption({title:{text:'会话量'},tooltip:{trigger:'axis' //鼠标移入},legend:{data:leg,},xAxis:{type:'category',data:x_data,},yAxis:{type:'value',},series:series_data});}dataView().then(res=>{if(res.data.status === 200){let{legend,xAxis,series} = res.data.data;draw(legend,xAxis,series);}})onMounted(()=>{{// 第一步：初始化echarts实例，并挂载到DOM容器中// 初始化echarts实例，并挂载DOM容器中let myChart = echarts.init(document.getElementById('main1'));// 第二步：对照着需求，来逐个编写配置项（参考文档）和 接受数据myChart.setOption({title:{text:'绘画量',},tooltip:{trigger:'axis', //鼠标移入},legend:{data:['销量'],},xAxis:{type:'category', // 类目轴data:['衬衫','羊毛衫','雪绒衫','裤子','高跟鞋','袜子'],},yAxis:{type:'value',},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}],});// 第三步：将配置和数据添加到实例中}}).data-view{width: 100%;display: flex;justify-content: space-around;.el-card{width: 50%;#main1,#main2{height: 500px;}}}