feat(*): to vue next

Author: vanoneang

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
     jest: true,
   },
   plugins: ['vue'],
-  extends: ['plugin:vue/essential', '@vue/airbnb'],
+  extends: ['plugin:vue/vue3-essential', '@vue/airbnb'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

package-lock.json

@@ -1,16 +1,16 @@
 {
-  "name": "lin-cms",
-  "version": "0.3.5",
-  "private": true,
+  "name": "lin-cms-vue",
+  "version": "0.4.0",
+  "license": "MIT",
   "scripts": {
     "serve": "node script/plugin-get-config.js && vue-cli-service serve",
     "build": "node script/plugin-get-config.js && vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "commit": "git-cz",
     "plugin:init": "node script/plugin-init.js",
     "plugin:new": "node script/plugin-new.js",
-    "plugin:reconfig": "node script/plugin-get-config.js",
-    "test:unit": "vue-cli-service test:unit"
+    "plugin:reconfig": "node script/plugin-get-config.js"
   },
   "dependencies": {
     "@antv/g2plot": "^0.11.35",
@@ -28,20 +28,21 @@
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
     "tinymce": "^5.0.1",
-    "vue": "^2.6.10",
+    "vue": "^3.0.0-beta.1",
     "vue-awesome-swiper": "^3.1.3",
     "vue-croppa": "^1.3.8",
-    "vue-router": "^3.0.7",
-    "vuex": "^3.1.1",
+    "vue-router": "^4.0.0-alpha.5",
+    "vuex": "^4.0.0-alpha.1",
     "vuex-persist": "^2.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.9.2",
-    "@vue/cli-plugin-eslint": "^3.9.2",
-    "@vue/cli-plugin-unit-jest": "^3.9.0",
-    "@vue/cli-service": "^3.9.2",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-unit-jest": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
+    "@vue/compiler-sfc": "^3.0.0-beta.1",
     "@vue/eslint-config-airbnb": "^4.0.1",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@vue/test-utils": "^2.0.0-alpha.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.8.0",
@@ -52,7 +53,7 @@
     "directory-tree": "^2.2.3",
     "ejs": "^2.6.2",
     "eslint": "^6.0.1",
-    "eslint-plugin-vue": "^5.2.3",
+    "eslint-plugin-vue": "^7.0.0-alpha.0",
     "fs-extra": "^8.1.0",
     "inquirer": "^6.5.0",
     "js-yaml": "^3.13.1",
@@ -62,8 +63,8 @@
     "semver": "^6.2.0",
     "shelljs": "^0.8.3",
     "validate-npm-package-name": "^3.0.0",
+    "vue-cli-plugin-vue-next": "~0.1.3",
     "vue-markdown-loader": "^2.4.1",
-    "vue-template-compiler": "^2.6.10",
     "yaml-front-matter": "^4.0.0"
   },
   "postcss": {

package.json

@@ -37,9 +37,10 @@
             :index="idMap[item.name]"
             popper-class="abc"
           >
-            <template slot="title">
-              <i v-if="!filterIcon(item.icon)" :class="item.icon"></i> <img v-else :src="item.icon" class="imgIcon" />
-              <span slot="title">{{ item.title }}</span>
+            <template v-slot:title>
+              <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
+              <img v-else :src="item.icon" class="imgIcon" />
+              <span>{{ item.title }}</span>
             </template>
 
             <!-- 二级菜单 -->
@@ -50,9 +51,9 @@
                 :index="idMap[subItem.name]"
                 class="subMenuContent"
               >
-                <template slot="title">
+                <template v-slot:title>
                   <i class="iconfont icon-erjizhibiao"></i>
-                  <span slot="title" class="two-folder">{{ subItem.title }}</span>
+                  <span class="two-folder">{{ subItem.title }}</span>
                 </template>
 
                 <!-- 三级菜单 -->
@@ -84,8 +85,9 @@
             v-else
             :key="idMap[item.name]"
           >
-            <i v-if="!filterIcon(item.icon)" :class="item.icon"></i> <img v-else :src="item.icon" class="imgIcon" />
-            <span slot="title">{{ item.title }}</span>
+            <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
+            <img v-else :src="item.icon" class="imgIcon" />
+            <span>{{ item.title }}</span>
           </el-menu-item>
         </template>
       </el-menu>

src/component/layout/side-bar.vue

@@ -1,5 +1,4 @@
-import '@babel/polyfill'
-import Vue from 'vue'
+import Vue, { createApp } from 'vue'
 import VueCompositionApi from '@vue/composition-api'
 import ElementUI from 'element-ui'
 
@@ -23,16 +22,6 @@ import '@/assets/style/index.scss' // eslint-disable-line
 import '@/assets/style/realize/element-variable.scss'
 import 'element-ui/lib/theme-chalk/display.css'
 
-Vue.config.productionTip = false
-
-Vue.use(ElementUI)
-Vue.use(VueCompositionApi)
-Vue.use(LinNotify, {
-  reconnection: true,
-  reconnectionAttempts: 5,
-  reconnectionDelay: 3000,
-})
-
 Vue.component(CollapseTransition.name, CollapseTransition)
 
 // base 组件注册
@@ -41,11 +30,10 @@ Vue.component('l-icon', LIcon)
 Vue.component('source-code', SourceCode)
 
 /* eslint no-unused-vars: 0 */
-const AppInstance = new Vue({
-  router,
-  store,
-  render: h => h(App),
-}).$mount('#app')
+const AppInstance = createApp(App)
+  .use(router)
+  .use(store)
+  .mount('#app')
 
 // 设置 App 实例
 window.App = AppInstance

src/main.js

@@ -1,12 +1,10 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter } from 'vue-router'
 import routes from './route'
 import store from '../store'
 import appConfig from '@/config/index'
 import Util from '@/lin/util/util'
 
-Vue.use(Router)
-
 // 判断是否需要登录访问, 配置位于 config 文件夹
 let isLoginRequired = routeName => {
   // 首次执行时缓存配置
@@ -35,8 +33,7 @@ let isLoginRequired = routeName => {
   return isLoginRequired(routeName)
 }
 
-const router = new Router({
-  // mode: 'history',
+const router = createRouter({
   scrollBehavior: () => ({
     y: 0,
   }),

src/router/index.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import Vuex from 'vuex'
 import createLogger from 'vuex/dist/logger'
 import VuexPersistence from 'vuex-persist'
@@ -7,8 +6,6 @@ import state from './state'
 import * as getters from './getter'
 import actions from './action'
 
-Vue.use(Vuex)
-
 const vuexLocal = new VuexPersistence({
   storage: window.localStorage,
   reducer: stateData => ({
@@ -21,7 +18,7 @@ const vuexLocal = new VuexPersistence({
 
 const debug = process.env.NODE_ENV !== 'production'
 
-export default new Vuex.Store({
+export default Vuex.createStore({
   state,
   getters,
   mutations,