从vue2.0更新到vue3.0

87 阅读 0 评论 58 点赞

我是靠谱客的博主忧心钢铁侠，最近开发中收集的这篇文章主要介绍从vue2.0更新到vue3.0，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、从vue2.0过渡到vue3.0要重新搭建脚手架

共有两种方式

第一种：vue-cli : 安装并执行 npm init vue@latest

选择项目功能时：除了第一项的项目名字外，其他可以暂时No

cd <your-project-name>

npm install

npm run dev ：运行

npm run build: 打包 (生成一个dist文件夹)

第二种： vite: 使用vite 体验更快速

npm init vite-app <project-name>

cd <your-project-name>

npm install

npm run dev

二、安装我们要使用的组件：

1.axios 2.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, // 不支持https
    proxy: {
      '/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'

六、在组件中更改代码

<template>
  <div class="data-view">
    <el-card>
      <div id="main1"></div>
    </el-card>
    <el-card>
      <div id="main2"></div>
    </el-card>
  </div>
</template>

<script setup>
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]
        }
      ],
    });
    // 第三步：将配置和数据添加到实例中
  }
  })
</script>

<style lang="scss">
.data-view{
  width: 100%;
  display: flex;
  justify-content: space-around;
  .el-card{
    width: 50%;
    #main1,#main2{
      height: 500px;
    }
  }
}
</style>