从vue2.0更新到vue3.0

这篇具有很好参考价值的文章主要介绍了从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更新到vue3.0

         在vue2.0中引入组件可以通过手写@自动查找组件路径位置

import {getToken} from '@/utils/setToken.js'

        在vue3.0不支持@自动寻找组件路径位置

import {getToken} from '../../utils/setToken.js'

六、在组件中更改代码文章来源地址https://www.toymoban.com/news/detail-438159.html

<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>

到了这里,关于从vue2.0更新到vue3.0的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2-全局事件总线、消息的订阅与发布、TodoList的编辑功能、$nextTick、动画与过渡

    🥔:高度自律即自由 更多Vue知识请点击——Vue.js 一种组件间通信的方式,适用于任意组件间通信。通俗理解就是一个定义在所有组件之外的公共嘎达,这个嘎达可以有vm或vc上的同款 $on、$off、$emit ,也可以让所有组件都访问到。要想实现这个事情,只能在 Vue.prototype 上添加

    2024年02月11日
    浏览(41)
  • 使用Electron + Vue3 + TS搭建桌面端应用并可热更新

    以下是必要的技术: Electron 13.0.0 Vue3 + TS Electron-updater Node 16.13.1 Element-plus Less Meansjs 安装Vue-cli(如果未安装): npm install -g @vue/cli 创建Vue3项目: vue create electron-vue3 启动项目: yarn serve 安装Electron: vue add electron-builder 启动项目: yarn electron:serve 如果报错,需要安装ts-loader: yar

    2023年04月26日
    浏览(89)
  • electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

    demo项目地址 electron-updater官网 我们不可能每次发布新的版本都让用户去手动下载安装最新的包,而是应用可以自动下载新包进行覆盖安装,electron-updater就可以非常方便的实现这个功能 引入依赖 实测用pnpm安装打包运行会有问题,这里还是推荐使用npm管理依赖 配置electron-bui

    2024年02月14日
    浏览(72)
  • vue2项目 使用海康视频h5player@2.0版本

    一、下载开发包         我们需要去海康官网下载h5player@2.0版本的一些用到的文件 二、引入开发包         下载之后我们把下载的文件打开把bin里的文件移动到pubilc文件里,可以自己单独建一个文件放在里面 注意:一定要放在vue中的public文件夹中 否则会报错 三、引用下载

    2024年02月03日
    浏览(52)
  • 【vue2】vue2中的性能优化(持续更新中)

    ⭐ v-for 遍历避免同时使用 v-if ⭐ v-for 中的key绑定唯一的值 ⭐ v-show与v-if对性能的影响 ⭐ 妙用计算属性 ⭐ 使用防抖与节流控制发送频率 ⭐ 路由守卫处理请求避免重复发送请求 ⭐ 使用第三方UI库的引入方式 【前言】 该系列是博主在使用vue2开发项目中常用上的一些小Tips,学

    2024年01月16日
    浏览(45)
  • vue2和vue3

    1. 双向数据绑定原理发生了改变 vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。 相比与vue2,使用proxy API 优势有:defineProperty只能监听某个属性,不能对全对象进行监听;可以省

    2024年02月12日
    浏览(38)
  • vue2+vue3——42+

    vue2 v-cloak指令【14:14】 调网速 : no throttling 不让慢 ; offline 断网 JS 阻塞 红色 外部JS ; 绿色 网页核心 ; 粉色 JS 脚本 红色 外部JS 我要走不了, 谁都别想走 : 绿色 不可以渲染到页面,放到页面容器 ; 粉色 JS脚本 不可以被执行 ,没有容器 换位置: body 最下方 v-cloak 本质

    2024年02月02日
    浏览(116)
  • vue3对比vue2

    使用vite创建vue项目 什么是vite? 新一代前端构建工具 优势如下: 开发环境中,无须打包操作,可快速的冷启动 清亮快速的热重载 真正的按需编译,不在等待整个应用编译完成 注意,vite初始化后需要你手动安装一下node_modules vue3中的根标签可以不止一个 vue2就不行 setup vue3中一个新的

    2024年02月08日
    浏览(39)
  • vue2和vue3的区别(Vue3升级部分)

    区别有两个目的:一面试说一下书面化的表达,二工作需要升级大白话说一下项目应用的区别。 双向数据绑定: vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅(gettersetter)模式的⽅式来实现的。 vue3 中使⽤了 ES6 的 ProxyAPI 对数据

    2024年02月12日
    浏览(46)
  • Vue3与Vue2比较

    Vue.js 3相对于Vue.js 2带来了一些重大变化,其中包括一些语法变化。 下面是Vue.js 2和Vue.js 3的一些语法差异比较: 在Vue.js 2中,我们使用Vue.component()或者Vue.extend()方式创建一个组件。但是在Vue.js 3中,我们需要使用 createApp().component()方式来注册一个组件。 当我们使用Vue.js 2时,

    2024年02月05日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包