Tabla de contenido
1.2 Componentes de referencia en main.js
Dos, modificación del enrutador vue3
3.1 configuración de vue3 vuex
3.2 valor de acceso vue3.x en vuex
3.3 Ver los datos en vuex en vue3 mostrará Proxy
Cuarto, la modificación de view-ui-plus en vue3
4.1, método de escritura iview Model upgrade vue3
4.2, iview table upgrade vue3 render método de escritura
4.3, casilla de verificación iview
5. Vue3 usa la versión china de monaco-editor
Esto se actualizará continuamente, todos son bienvenidos a discutir juntos
Si no tiene una base de vue2, primero puede ver la URL de vue2
Si no entiende la diferencia entre vue2 y vue3, primero puede ver la diferencia que he compilado.La diferencia entre vue3 y vue2 y cómo actualizar (básico para vue2)
O mira el sitio web oficial de vue3 sitio web oficial de vue3
La estructura del directorio es la siguiente
1. vue3
1.2 Componentes de referencia en main.js
Método de escritura Vue2.x
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import UrlPath from "./axiosConfig/path"
Vue.prototype.GlobalUrl = UrlPath;
Vue.use(ViewUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')Método de escritura Vue3.x
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const Vue = createApp(App)
import ViewUIPlus from "view-ui-plus"
import "view-ui-plus/dist/styles/viewuiplus.css"
import UrlPath from "./axiosConfig/path"
Vue.config.globalProperties.GlobalUrl = UrlPath;
Vue.use(store).use(router).use(ViewUIPlus).mount('#app')el lugar necesita cambiar
import Vue from 'vue' import { createApp } from 'vue'
const Vue = createApp(App)Vue.prototype 改成 Vue.config.globalProperties
Dos, modificación del enrutador vue3
Método de escritura Vue2.x
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
export default new VueRouter({
linkExactActiveClass: "active",
mode: 'history',
base: process.env.VUE_APP_URL_BASE_PATH,
routes: [
{
path: '/',
redirect: '/versionManagement',
component: Home,
children: [
{
path: '/versionManagement',
name: 'versionManagement',
component: () => import('@/views/versionManagement/versionManagement.vue'),
meta: {
title: '版本管理',
parentId: "versionManagement",
},
},
]
},
]
})Método de escritura Vue3.x
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
redirect: '/versionManagement',
component: Home,
children: [
{
path: '/versionManagement',
name: 'versionManagement',
component: () => import(`@/views/versionManagement/versionManagement.vue`),
meta: {
title: '版本管理',
parentId: "versionManagement",
},
},
]
},
]
const router = createRouter({
history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
linkExactActiveClass: "active",
routes
})
export default routerel lugar necesita cambiar
1,
import VueRouter from 'vue-router'cambiado a
import { createRouter, createWebHistory } from 'vue-router'2,
la historia es el modo anterior
historial => crearHistorialWeb、
hash => crearWebHashHistory、
memory =>createMemoryHistory
Por ejemplo
mode: 'history',
base: process.env.VUE_APP_URL_BASE_PATH,const router = createRouter({
history: createWebHistory(process.env.VUE_APP_URL_BASE_PATH),
linkExactActiveClass: "active",
routes
})3. la base puede estar directamente en createWebHistory (base)
3. Referencia en vue3 vuex
3.1 configuración de vue3 vuex
tienda/index.js
import { createStore } from 'vuex'
import state from './state'
import mutations from './mutations'
import modules from './modules'
import getters from './getter'
export default createStore({
state,
getters,
mutations,
modules,
})store/state.js es lo mismo que en vue2
export default{
datasetData: null,
}store/mutations.js es lo mismo que en vue2
export default {
setDatasetData: function (state, value) {
state.datasetData = value;
},
}store/getter.js es lo mismo que en vue2
export default {
getDatasetData: state => state.datasetData,
}3.2 valor de acceso vue3.x en vuex
en vue2.
取值
import { mapGetters, mapMutations } from "vuex";
methods: {
...mapGetters(["getCodeTreeData"]),
}
let codeTreeData = this.getCodeTreeData()
存值
this.$store.commit("setCodeTreeData", _treeData);
En vue3.x
取值
let codeTreeData = this.$store.getters.getCodeTreeData
存值
this.$store.commit("setCodeTreeData", _treeData);
La diferencia es que los mapGetters se usan en vue 2.x
3.3 Ver los datos en vuex en vue3 mostrará Proxy
Cuando imprimimos y mostramos a Jiangzi, entra en pánico, es solo un azúcar gramatical de vue3
Si queremos ver sus datos
El primer método se puede ver después de hacer referencia a su toRaw
import { toRaw } from "@vue/reactivity";
toRaw(this.$store.getters.getCodeTreeData)Nota: El segundo método generará una copia, dejando los datos anteriores,
//第二种获取target值的方式，通过json序列化之后可获取值
JSON.parse(JSON.stringify(this.$store.getters.getCodeTreeData))
Cuarto, la modificación de view-ui-plus en vue3
4.1, método de escritura iview Model upgrade vue3
Método de escritura de la versión Vue2.x
<Modal :value="modal2" width="500" draggable sticky :mask="false">
<p slot="header">
<span> {
{ keyTitle }} </span>
</p>
<div slot="footer">
<Button @click="modal2 = false">取消</Button>
<Button type="primary" @click="SubmitForm('formItems')">确定</Button>
</div>
</Modal>
</div>Método de escritura de la versión Vue3.x
<Modal v-model="modal2" width="500" draggable sticky :mask="false">
<template #header>
<p>
<span> {
{ keyTitle }} </span>
</p>
</template>
<template #footer>
<div>
<Button @click="modal2 = false">取消</Button>
<Button type="primary" @click="SubmitForm('formItems')">确定</Button>
</div>
</template>
</Modal>el lugar necesita cambiar
1. Cambiar: valor a v-modelo
2. La ranura debe estar en la plantilla
4.2, iview table upgrade vue3 render método de escritura
Método de escritura Vue2.x
{
title: "更新内容",
key: "content",
align: "left",
render: (h, params) => {
return h("div", [
h("span", {
domProps: {
innerHTML: params.row.content,
},
}),
]);
},
},
{
title: "操作",
key: "action",
align: "center",
width: 140,
render: (h, params) => {
return h("div", [
h("Icon", {
props: {
size: "20",
type: "ios-create",
},
style: {
marginRight: "5px",
cursor: "pointer",
},
on: {
click: () => {
this.jumpDetail(params.row);
},
},
}),
]);
},
},Método de escritura Vue3.x
{
title: "更新内容",
key: "content",
align: "left",
render: (h, params) => {
return h("div", [
h("span", {
innerHTML: params.row.content,
}),
]);
},
},
{
title: "操作",
key: "action",
align: "center",
width: 140,
render: (h, params) => {
return h("div", [
h(
"i",
{
class: "ivu-icon ivu-icon-ios-create",
style: {
marginRight: "5px",
fontSize: "20px",
cursor: "pointer",
},
onClick: () => {
this.jumpDetail(params.row);
},
},
{
default() {
return "";
},
}
),
]);
},
},{
title: "操作",
key: "action",
align: "center",
width: 80,
render: (h, params) => {
return h("div", [
h(
"div",
{
class: "ivu-btn ivu-btn-default ivu-btn-small ivu-btn-ghost",
style: {
marginRight: "5px",
cursor: "pointer",
},
onClick: () => {
this.sendMail(params.row);
},
},
{
default() {
return "发送邮件";
},
}
),
]);
},
},el lugar necesita cambiar
1. Cuando el tipo es innerHTML, no se usa
domProps: { innerHTML: params.row.content, }, pero direct innerHTML: params.row.content,
2. Vue3 usa la tabla para mostrar el ícono de operación
En lugar de usar su ícono después de h, use la clase directamente (puede discutir otras formas de escribir esto)
4.3, casilla de verificación iview
vista2.x
<Checkbox :value="getIsPublic" @on-change="getCheckboxStatus">设置为公共代码</Checkbox>ver3.x
<Checkbox v-model="getIsPublic" @on-change="getCheckboxStatus">设置为公共代码</Checkbox>Diferencia: cambiar el valor a v-model
5. Vue3 usa la versión china de monaco-editor
Presta atención a la configuración de la versión.
npm install [email protected] --save
npm install [email protected] --save
usar
<template>
<div :style="myEditorStyle" ref="pieMyEditor" style="height: 100%">
<div style="height: 100%; width: 100%" ref="pieMyContainer"></div>
</div>
</template>
<script>
import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";
setLocaleData(zh_CN);
const monaco = require("monaco-editor/esm/vs/editor/editor.api");
export default {
props: {
codes: {
type: String,
default: "",
},
language: {
type: String,
default: "javascript",
},
},
data() {
return {
theme: "vs",
fontSize: 14,
suggestionsList: [],
myEditorStyle: {},
minimapEnabled: false,
};
},
beforeUnmount() {
// 销毁编辑器
this.monacoEditor.dispose();
},
mounted() {
this.initEditor();
},
methods: {
initEditor() {
this.$refs.pieMyContainer.innerHTML = "";
this.monacoEditor = monaco.editor.create(this.$refs.pieMyContainer, {
value: this.codes,
language: this.language,
theme: this.theme, //vs, hc-black, or vs-dark
fontSize: this.fontSize,
selectOnLineNumbers: true,
roundedSelection: false,
cursorStyle: "line", //光标样式
glyphMargin: true, //字形边缘
useTabStops: false,
autoIndent: false, //自动布局
quickSuggestionsDelay: 500, //代码提示延时
folding: true, // 是否折叠
foldingHighlight: true, // 折叠等高线
foldingStrategy: "indentation", // 折叠方式 auto | indentation
showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
disableLayerHinting: true, // 等宽优化
emptySelectionClipboard: false, // 空选择剪切板
selectionClipboard: false, // 选择剪切板
automaticLayout: true, // 自动布局
codeLens: false, // 代码镜头
scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
colorDecorators: true, // 颜色装饰器
accessibilitySupport: "off", // 辅助功能支持 "auto" | "off" | "on"
lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
lineNumbersMinChars: 5, // 行号最小字符 number
enableSplitViewResizing: false,
readOnly: false, //是否只读 取值 true | false
minimap: { enabled: true },
});
this.monacoEditor.onDidChangeModelContent((event) => {
//编辑器内容change事件
this.$emit("onCodeChange", this.monacoEditor.getValue(), event);
});
this.$emit("onMounted", this.monacoEditor); //编辑器创建完成回调
window.monacoEditor = this.monacoEditor;
this.monacoEditor.addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
() => {
this.$emit("onSaveCode");
}
);
this.monacoEditor.addCommand(
monaco.KeyMod.WinCtrl | monaco.KeyCode.KEY_S,
() => {
this.$emit("onSaveCode");
}
);
},
getSuggestions() {
this.suggestionsList.length = 0;
pieAPI.forEach((item) => {
if (item.length > 0) {
this.getSuggestionsList(item);
}
});
},
getSuggestionsList(item) {
item.forEach((ele) => {
this.suggestionsList.push({
label: ele.name,
kind: monaco.languages.CompletionItemKind.Function,
insertText: ele.name,
insertTextRules:
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
detail: ele.description ? ele.description : ele.name,
});
if (ele.children && ele.children.length > 0) {
this.getSuggestionsList(ele.children);
}
});
},
},
};
</script>
<style scoped>
</style>
Configurar en vue.config.js
Nota: asegúrese de prestar atención a la versión de monaco-editor, de lo contrario no se ejecutará
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
plugins: [
new MonacoWebpackPlugin({
output: './static/js/monaco-editor',
languages: ['javascript', 'css']
})
]