Начальный тест vue3+vite+ant-design-vue2.0 резюме фонового проекта разработки

Vue.js

задний план

Появление vue3 особенно популярно в сообществе разработчиков интерфейсов.Обновление vue3 претерпело значительные изменения с точки зрения разработки, производительности и конструкции, и это также является тенденцией развития в будущем. С обновлением vue3 You Yuxi также разработала инструмент сборки vite, который сокращает этап упаковки на этапе разработки проекта.По сравнению с vue-cli скорость была улучшена в несколько раз.

стек технологий

vite+vuex4+vueRouter4+axios+antDesignVue2

ресурс

Поскольку текущий vue3 и окружающие ресурсы (vuex, vueRouter) находятся в стадии бета-тестирования, а официальные документы не обновлялись, их можно просмотреть только через GitHub, документы npm

vue3 :(v UE3 находится в /docs/this/expensive…)

векс4 :(GitHub.com/v UE JS/v u ex/…)

vite:(github.com/vitejs/vite)

vueRouter:(GitHub.com/v UE JS/v UE-день…)

antDesignVue2:(2 small.ant DV.com/docs/v UE/in…)

Строительство проекта и базовая конфигурация

  1. Соберите исходный проект в соответствии с документацией vite.
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
  1. разница в структуре проекта

В отличие от vue2, vue3index.htmlне вpublicкаталог, находится в корневом каталоге. vite работает в браузере, а main.js напрямую вводится на главную страницу. Внедрение значков favicon.ico также напрямую в корневой каталог, а не в vue. <link rel="icon" href="<%= BASE_URL %>favicon.ico">Способ. Стоит отметить, что/favicon.icoперед дорогой/Его нельзя опустить, структура после сборки такова, что favicon.ico и index.html находятся на одном уровне.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>易工品运营中心</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

3. Архитектура проекта и базовая конфигурация

Обычная конфигурация проекта такая же, как и у vue2, которую можно настроить в соответствии с потребностями проекта.

Конфигурация вайта: в корневом каталогеvite.config.js, для получения дополнительных сведений обратитесь к исходному коду файла конфигурации GitHub (GitHub.com/Вите есть/Вите…)

в конфигурацииaliasКонфигурация каталога src должна быть/@/Таким образом, с/символ

import path from 'path'
const { VITE_API_PREFIX, VITE_SERVICE_ORIGIN } = process.env //.env文件的环境变量
module.exports = {
  // open: true, //是否自动打开
  proxy: { //设置代理
    [VITE_API_PREFIX]: {
      target: VITE_SERVICE_ORIGIN,
      changeOrigin: true
    }
  },
  minify: 'esbuild', //压缩
  cssPreprocessOptions: { //css预处理
    less: {
      modifyVars: {
        'primary-color': '#FE5F23',
        'link-color': '#1890FFFF',
        'info-color': '#1890FFFF'
      },
      javascriptEnabled: true
    }
  },
  optimizeDeps: { //加载的其他资源
    include: ['ant-design-vue/es/locale/zh_CN', 'lodash-es']
  },
  alias: { //src目录的配置
    '/@/': path.resolve(__dirname, 'src')
  }
}

Конфигурация форматирования кода

в корневом каталоге.eslintrc.jsНастройте правила по мере необходимости, и последующая разработка должна быть улучшена

module.exports = {
  root: true, 
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    '@vue/prettier'
  ],
  plugins: ['vue'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    indent: [1, 2],
    eqeqeq: [1, 'always'],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'import/no-unresolved': 'off',
    'vue/valid-v-model': 'off',
    'vue/no-deprecated-slot-attribute': 'off',
    'vue/no-v-html': 'off',
    'vue/no-dupe-keys': 'off',
    'vue/require-default-prop': 'off',
    'vue/require-prop-types': 'off',
    'vue/no-template-key': 'off',
    'prettier/prettier': [
      'off',
      {
        semi: false,
        singleQuote: true,
        endOfLine: 'auto'
      }
    ]
  },
  overrides: [{
    files: ['*.vue'],
    rules: {}
  }],
  settings: {
    'import/resolver': { //配置/src目录下的索引
      alias: {
        map: [
          ['/@/', 'src']
        ]
      }
    }
  }
}

.eslintignoreдокумент

*.sh
node_modules
*.md
*.scss
*.woff
*.ttf
/dist/

конфигурация vscode.vscodeПод содержаниемsettings.json

{
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.format.enable": false,
  "cSpell.words": [
    "Appstore",
    "vuex",
    "wangeditor"
  ]
}

Применение технических приемов и сводка засыпки котлована

Стоит отметить, что магазин и antdesign2 на этот раз маршрутизатор немного отличается в использовании. Кроме того, компонент Api, представленный vue3 и всем семейством Bucket, а также внедрение по запросу значительно сократили объем упаковки проекта, что также является оптимизацией.

Кратко упомянем функцию настройки, используемую на этот раз, пожалуйста, обратитесь к документации для получения более подробной информации.

Настройка будет выполнена только один раз, в основном, когда компонент должен быть только один раз, в жизненном циклеcreatedа такжеbeforeCreatedПеред хуком компонент в настоящее время не полностью создан, поэтому его нельзя использовать в настройке.thisуказал на.

Функция настройки также может легко получить объект реквизита, а также может использовать часто используемые крючки жизненного цикла, вычисляемые, наблюдаемые...

пример:

setup({title}){
	console.log(title)
}
1. Использование vuex4

Vuex4 вводится по требованию, ниже введенcreateStoreСоздайте хранилище, другие API перед vuex одинаковы. где модули - это каталог модулей

import { createStore } from 'vuex'
import * as modules from './modules'
export const store = createStore({
  state() {
    return {
      showMore: false,
      distributionType: 'userRecord'
    }
  },
  mutations: {
    //搜索展开更多
    showMore(state, newTarget) {
      state.showMore = newTarget
    }
  },
  modules
})

Зарегистрироваться в main.js

приложение для регистрации vue3 принимаетcreateAppвместо vue2 напрямуюnew Vue()Таким образом, он может гарантировать, что сам vue чист и не загрязняет весь мир, а все необходимые глобальные конфигурации смонтированы в приложении.

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')

Чаще всего используется состояние в vuex4, которое можно ввести, введяuseStoreПолучение функции, которую очень удобно использовать в функции настройки vue3

import { useStore } from "vuex";
 setup() {
    let store = useStore();
    //展开按钮
    const checkShowMore = () => {
      store.commit("showMore", false);
    };
    return {
      checkShowMore
    };
  }
2. Использование vueRoute4

(1) Создание и импорт

Из-за управления разрешениями маршрутизаторы делятся на общедоступные маршруты и маршруты разрешений.createRouterсоздавать объекты,createWebHashHistoryУстановите маршрутизатор в режим хеширования. allowModel — модуль маршрутизации разрешений.

import { createRouter, createWebHashHistory } from 'vue-router'
import { pickUserRoutes } from './pickUserRoutes'
import { store } from '/@/store'
import * as permitModel from './modules'
const routes = {
  public: [
    {
      path: '/',
      redirect: () => {
        const { menus } = store.state.user
        if (menus) {
          return menus[0].path
        } else {
          return '/login'
        }
      }
    },
    {
      path: '/login',
      component: () => import('/@/views/login.vue')
    },
    {
      path: '/403',
      component: () => import('/@/views/403.vue')
    },
    {
      path: '/404',
      component: () => import('/@/views/404.vue')
    }
  ],
  permits: Object.values(permitModel)
}

const newRouter = () => {
  return createRouter({
    history: createWebHashHistory(),
    scrollBehavior: () => ({ top: 0 }),
    routes: routes.public
  })
}
const router = newRouter()
export { router, routes }

main.js

import { createApp } from 'vue'
import { router } from './router'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

(2) Установка маршрутизации разрешений, сброс

4.x монтирует маршрут, сброс маршрута отличается от предыдущего, старая версия сбрасывала маршрут сбросомrouter.matcherдля нового объекта маршрутаmatcher. но 4.х нетmatcher. Ниже представлен динамический маршрут, сгенерированный при входе в систему.

Следует отметить, что 4.x не имеетaddRoutes(Arr),ТолькоaddRoute(route: RouteRecordRaw): () => void;Добавить функцию перехвата объекта маршрутизатораisReady(): Promise<void>, используется для обработки вещей после загрузки маршрута

login() {
      this.loading = true
      let { mobile, password } = this.form
      password = md5(password)
      api.login({ mobile, password }).then(({ ret, data}) => {
        if (ret === 0) {
          const { token, role_name:roleName, allow_module: menusPath } = data
          let menus = pickUserRoutes(roleName,routes.permits,menusPath) //过滤出权限路由
          this.addMenu(menus) //挂载路由
          this.cacheData({ token, menusPath, menus,roleName }) //存储
        }
      }).finally(() => this.loading = false)
    },
    addMenu(menus){
      if(menus){
        menus.forEach(route => {
          this.$router.addRoute(route)
        })
      }
      //router挂载完毕后再跳转
      this.$router.isReady().then(() => {
        this.$router.replace(menus?'/':'/403')   
      })
    }

Выйдите из системы, сбросьте маршрут мой путь через 4.xremoveRoute(name: string | symbol): void

 logout() {
      api.logout().then(({ret})=>{
        if(ret === 0){
          this.menus.forEach(route=>{
            this.$router.removeRoute(route) //清空路由
          })
          this.clearCache(['token', 'menusPath', 'menus','roleName']) //清掉存储
          this.$router.replace('/login')
        }
      })
    }
3.antDesign2 использовать (по мере необходимости для ввода цвета темы)

Принят метод импорта по запросу.Разница в том, что Babel нужно настроить для импорта по требованию под vue2 и antd1.x, а vue3 не нужно импортировать его напрямую. существуетantdновый каталогcomponents.js, регистрация компонента инкапсулируется как fn, вmain.jsИспользуйте входящий экземпляр приложения.

В отличие от vue2, глобальные свойства vue3 монтируются вapp.config.globalProperties

import 'ant-design-vue/dist/antd.less'
import { Button, message, Modal } from 'ant-design-vue'
export default app => {
	app.use(Button)
   	app.config.globalProperties.$message = message 
   	app.config.globalProperties.$confirm = Modal.confirm
}

main.jsпредставлять/antd/components

import { createApp } from 'vue'
import { router } from './router'
import { store } from './store'
import App from './App.vue'
import 'normalize.css'
import antdComponent from './antd/components'
import '/@/styles/index.less'
const app = createApp(App)
app.use(store)
app.use(router)
antdComponent(app) //引入dantd组件注册
app.mount('#app')

Конфигурация цвета темы: antd принимаетmodifyVarsЧтобы настроить тему, зайдите в репозиторий vite на GitHub и настройте его в vite.cssPreprocessOptionsПредварительная обработка:

module.exports = {
  cssPreprocessOptions: {
    less: {
      modifyVars: {
        'primary-color': '#FE5F23',
        'link-color': '#1890FFFF',
        'info-color': '#1890FFFF'
      },
      javascriptEnabled: true
    }
  }
}
Расширение табличного компонента: перетаскивание ширины столбца

Из-за потребностей бизнес-сценариев, но в antDesignVue1.x зависимости перетаскивания таблицыvue-draggable-resizable Плагин, но плагин пока не поддерживает vue3, поэтому с помощью гигантского демо на Du Niang я расширил перетаскивание ширины столбца таблицы.

 mounted() {
    this.setDraggable();
  },
  updated() {
    this.setDraggable();
  },
  methods:{
	 setDraggable() {
      let tableEle = document.querySelector(".ant-table-bordered");
      let colEle = tableEle.getElementsByTagName("table")[0];
      //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
      var tTD;
      var table = colEle;
      var flag = 0;
      for (let j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function() {
          //记录单元格
          tTD = this;
          flag = j;
          if (event.offsetX > tTD.offsetWidth - 10) {
            tTD.mouseDown = true;
            tTD.oldX = event.x;
            tTD.oldWidth = tTD.offsetWidth;
          }
        };
        table.rows[0].cells[j].onmouseup = function() {
          //结束宽度调整
          if (tTD === undefined) tTD = this;
          tTD.mouseDown = false;
          tTD.style.cursor = "default";
        };
        table.rows[0].cells[j].onmousemove = function() {
          //更改鼠标样式
          if (event.offsetX > this.offsetWidth - 10)
            this.style.cursor = "col-resize";
          else this.style.cursor = "default";
          //取出暂存的Table Cell
          if (tTD === undefined) tTD = this;
          //调整宽度
          if (tTD.mouseDown !== null && tTD.mouseDown === true) {
            tTD.style.cursor = "default";
            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
              tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
            //调整列宽
            tTD.style.width = tTD.width;
            tTD.style.cursor = "col-resize";
            //调整该列中的每个Cell
            while (table.tagName !== "TABLE") table = table.parentElement;
            let innerTable = document.getElementsByClassName(
              "ant-table-scroll"
            )[0];
            let inTable = innerTable.getElementsByTagName("table");
            for (let i = 0; i < inTable.length; i++) {
              let col = inTable[i].getElementsByTagName("colgroup")[0];
              let colArr = col.getElementsByTagName("col");
              if (tTD.width > 70) {
                colArr[flag].style.width = tTD.width + "px";
              }
            }
          }
        };
      }
    }
}

резюме

Подопытный кролик.Я использовал ведро семейства vue3 в проекте впервые.Ресурсов про vue3 в интернете тоже мало.На проверку и изучение ушло много времени,и оно до сих пор совершенствуется. Учиться, пробуя, самосовершенствоваться. Приветствуются исправления и дополнения

Категории