• vue3 + view-ui-plus + js 项目 升级

    目录

    ​编辑

    一、vue3

    1.2、main.js中引用组件

    二、vue3 router修改

    三、vue3 vuex 中引用

    3.1 vue3配置vuex

    3.2 vue3.x 存取 vuex中的值

    3.3、在vue3中查看vuex中的数据会显示Proxy

    四、view-ui-plus在vue3中的改法

    4.1、iview Model 升级 vue3 写法

    4.2、iview table 升级 vue3 render 写法

    4.3、iview CheckBox

    五、vue3 使用中文版的monaco- editor

    这个会不间断的更新，欢迎大家一起讨论 

    如果没有vue2基础的可以先看下vue2 网址

    如果没有了解vue2 和vue3 的区别的可以先看下我整理的这个区别vue3和vue2的区别并且如何升级 （对于vue2有基础的）_侧耳倾听...的博客-CSDN博客

    或者看下vue3官网 vue3 官网 

    目录结构如下 

    一、vue3

    1.2、main.js中引用组件

    vue2.x 写法

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. import store from './store'
    5. import ViewUI from 'view-design';
    6. import 'view-design/dist/styles/iview.css';
    7. import UrlPath from "./axiosConfig/path"
    8.  
    9. Vue.prototype.GlobalUrl = UrlPath;
    10.  
    11. Vue.use(ViewUI);
    12.  
    13. new Vue({
    14.   router,
    15.   store,
    16.   render: h => h(App)
    17. }).$mount('#app')

    vue3.x 写法

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4. import store from './store'
    5.  
    6. const Vue = createApp(App)
    7.  
    8. import ViewUIPlus from "view-ui-plus"
    9. import "view-ui-plus/dist/styles/viewuiplus.css"
    10. import UrlPath from "./axiosConfig/path"
    11.  
    12. Vue.config.globalProperties.GlobalUrl = UrlPath;
    13.  
    14. Vue.use(store).use(router).use(ViewUIPlus).mount('#app')

    修改的地方

    import Vue from 'vue' 
    1. import { createApp } from 'vue' 
    2. const Vue = createApp(App)

    Vue.prototype 改成 Vue.config.globalProperties

    二、vue3 router修改

    vue2.x 写法

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import Home from '../views/Home.vue'
    4. export default new VueRouter({
    5.   linkExactActiveClass: "active",
    6.   mode: 'history',
    7.   base: process.env.VUE_APP_URL_BASE_PATH,
    8.   routes: [
    9.     {
    10.       path: '/',
    11.       redirect: '/versionManagement',
    12.       component: Home,
    13.       children: [
    14.         {
    15.           path: '/versionManagement',
    16.           name: 'versionManagement',
    17.           component: () => import('@/views/versionManagement/versionManagement.vue'),
    18.           meta: {
    19.             title: '版本管理',
    20.             parentId: "versionManagement",
    21.           },
    22.         },
    23.       ]
    24.     },
    25.   ]
    26. })

    vue3.x 写法

    1. import { createRouter, createWebHistory } from 'vue-router'
    2. import Home from '../views/Home.vue'
    3. const routes = [
    4.   {
    5.     path: '/',
    6.     redirect: '/versionManagement',
    7.     component: Home,
    8.     children: [
    9.       {
    10.         path: '/versionManagement',
    11.         name: 'versionManagement',
    12.         component: () => import(`@/views/versionManagement/versionManagement.vue`),
    13.         meta: {
    14.           title: '版本管理',
    15.           parentId: "versionManagement",
    16.         },
    17.       },
    18.     ]
    19.   },
    20. ]
    21. const router = createRouter({
    22.   history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
    23.   linkExactActiveClass: "active",
    24.   routes
    25. })
    26.  
    27. export default router

    修改的地方

    1、

    import VueRouter from 'vue-router'

    改成 

    import { createRouter, createWebHistory } from 'vue-router'

    2、 

    history 就是之前的mode  

    history => createWebHistory、

    hash => createWebHashHistory、

    memory =>createMemoryHistory

    例如

    1.  mode: 'history',
    2.   base: process.env.VUE_APP_URL_BASE_PATH,
    1. const router = createRouter({
    2.   history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
    3.   linkExactActiveClass: "active",
    4.   routes
    5. })

    3、base 可以直接在createWebHistory（base）

    三、vue3 vuex 中引用

    3.1 vue3配置vuex

    store/index.js

    1. import { createStore } from 'vuex'
    2. import state from './state'
    3. import mutations from './mutations'
    4. import modules from './modules'
    5. import getters from './getter'
    6.  
    7.  
    8. export default createStore({
    9.     state,
    10.     getters,
    11.     mutations,
    12.     modules,
    13. })

    store/state.js  和vue2中一样

    1. export default{
    2.     datasetData: null,
    3. }

    store/mutations.js   和vue2中一样

    1. export default {
    2.     setDatasetData: function (state, value) {
    3.         state.datasetData = value;
    4.     },
    5. }

    store/getter.js   和vue2中一样

    1. export default {
    2.     getDatasetData: state => state.datasetData,
    3. }

    3.2 vue3.x 存取 vuex中的值

    在vue2.中 

    1. 取值
    2.  
    3. import { mapGetters, mapMutations } from "vuex";
    4.  
    5. methods: {
    6.     ...mapGetters(["getCodeTreeData"]),
    7. }
    8.  
    9. let codeTreeData = this.getCodeTreeData()
    10.  
    11.  
    12. 存值
    13.  
    14. this.$store.commit("setCodeTreeData", _treeData);

    在vue3.x 中

    1. 取值
    2.  
    3. let codeTreeData = this.$store.getters.getCodeTreeData
    4.  
    5. 存值
    6.  
    7. this.$store.commit("setCodeTreeData", _treeData);
    8.  
    9.

    区别在于vue 2.x中用到mapGetters  

    3.3、在vue3中查看vuex中的数据会显示Proxy

    当我们打印 展示酱紫的时候，表慌，他只是vue3 的一个语法糖

     

     如果我们要查看他的数据

    第一种方法 可以引用他的 toRaw 后查看

    1. import { toRaw } from "@vue/reactivity";
    2. toRaw(this.$store.getters.getCodeTreeData)

    注意：第二种方法，会产生复制，脱离之前的数据， 

    1. //第二种获取target值的方式，通过json序列化之后可获取值
    2. JSON.parse(JSON.stringify(this.$store.getters.getCodeTreeData))

     

     

    四、view-ui-plus在vue3中的改法

    4.1、iview Model 升级 vue3 写法

    vue2.x 版本写法

    1. <Modal :value="modal2" width="500" draggable sticky :mask="false">
    2.       <p slot="header">
    3.         <span> {{ keyTitle }} span>
    4.       p>
    5.         
    6.       <div slot="footer">
    7.         <Button @click="modal2 = false">取消Button>
    8.         <Button type="primary" @click="SubmitForm('formItems')">确定Button>
    9.       div>
    10.     Modal>
    11.   div>

    vue3.x 版本写法

    1. <Modal v-model="modal2" width="500" draggable sticky :mask="false">
    2.       <template #header>
    3.         <p>
    4.           <span> {{ keyTitle }} span>
    5.         p>
    6.       template>
    7.       
    8.  
    9.       <template #footer>
    10.         <div>
    11.           <Button @click="modal2 = false">取消Button>
    12.           <Button type="primary" @click="SubmitForm('formItems')">确定Button>
    13.         div>
    14.       template>
    15.     Modal>

    修改的地方 

    1、:value改成v-model

    2、slot 插槽，要在template 上

    4.2、iview table 升级 vue3 render 写法

    vue2.x 写法

    1. {
    2.                     title: "更新内容",
    3.                     key: "content",
    4.                     align: "left",
    5.                     render: (h, params) => {
    6.                         return h("div", [
    7.                             h("span", {
    8.                                 domProps: {
    9.                                     innerHTML: params.row.content,
    10.                                 },
    11.                             }),
    12.                         ]);
    13.                     },
    14.                 },
    15.                 {
    16.                     title: "操作",
    17.                     key: "action",
    18.                     align: "center",
    19.                     width: 140,
    20.                     render: (h, params) => {
    21.                         return h("div", [
    22.                             h("Icon", {
    23.                                 props: {
    24.                                     size: "20",
    25.                                     type: "ios-create",
    26.                                 },
    27.                                 style: {
    28.                                     marginRight: "5px",
    29.                                     cursor: "pointer",
    30.                                 },
    31.                                 on: {
    32.                                     click: () => {
    33.                                         this.jumpDetail(params.row);
    34.                                     },
    35.                                 },
    36.                             }),
    37.                            
    38.                         ]);
    39.                     },
    40.                 },

    vue3.x 写法

    1. {
    2.           title: "更新内容",
    3.           key: "content",
    4.           align: "left",
    5.           render: (h, params) => {
    6.             return h("div", [
    7.               h("span", {
    8.                 innerHTML: params.row.content,
    9.               }),
    10.             ]);
    11.           },
    12.         },
    13.         {
    14.           title: "操作",
    15.           key: "action",
    16.           align: "center",
    17.           width: 140,
    18.           render: (h, params) => {
    19.             return h("div", [
    20.               h(
    21.                 "i",
    22.                 {
    23.                   class: "ivu-icon ivu-icon-ios-create",
    24.                   style: {
    25.                     marginRight: "5px",
    26.                     fontSize: "20px",
    27.                     cursor: "pointer",
    28.                   },
    29.                   onClick: () => {
    30.                     this.jumpDetail(params.row);
    31.                   },
    32.                 },
    33.                 {
    34.                   default() {
    35.                     return "";
    36.                   },
    37.                 }
    38.               ),
    39.               
    40.             ]);
    41.           },
    42.         },

    修改的地方

    1、当类型是innerHTML 是，不在使用

     domProps: { innerHTML: params.row.content, }, 而是直接 innerHTML: params.row.content,

    2、vue3 使用table 展示操作icon

    h后不在用他的Icon 而直接使用class(这个大家可以讨论其他的写法)

    4.3、iview CheckBox

    vue2.x 

    <Checkbox :value="getIsPublic" @on-change="getCheckboxStatus">设置为公共代码Checkbox>

    vue3.x

    <Checkbox v-model="getIsPublic" @on-change="getCheckboxStatus">设置为公共代码Checkbox>

    区别 ：value改成v-model

    五、vue3 使用中文版的monaco- editor

    注意版本的配置

    1. npm install monaco-editor@0.30.1 --save
    2. npm install monaco-editor-webpack-plugin@6.0.0 --save

     

     

     使用

    在vue.config.js 中配置

    注意：一定要注意 monaco-editor 的版本，要不然跑不起来

    1. const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
    2.  
    3.  plugins: [
    4.                     new MonacoWebpackPlugin({
    5.                         output: './static/js/monaco-editor',
    6.                         languages: ['javascript', 'css']
    7.                     })
    8.                 ]

  • 相关阅读:
    如何从零开始解读产品经理需求分析-需求挖掘
    SNCP，子网连接保护简介
    浅谈基于LoRa技术下智能建筑能耗管理系统的分析与设计
    深度学习推理框架
    vue filters过滤器分别在template和script中使用
    3. 双向约瑟夫问题
    一文看懂推荐系统：排序09：Field-aware Factorization Machines（FFM），从FM改进来的，效果不咋地
    软件测开记录（二）
    C语言第四章第2节用if语句实现选择结构学习导案
    SpringBoot Web开发----简单功能分析
  • 原文地址：https://blog.csdn.net/xm_w_xm/article/details/126013210