Начните с нуля и вместе с вами создайте стандартную среду разработки проекта Vue3.x.

Официальные версии Vue3 и Vite выпущены давно, и экосистема постепенно обогащалась.Автор использовал ее во многих проектах.Подводя итог: это быстро! Не беспокойтесь о проблемах со стабильностью, опыт разработки действительно не очень хорош! Учащиеся, которые еще не пробовали ее, могут начать изучение с этой статьи и начать с нуля, чтобы создать стандартную интерфейсную инженерную среду Vite + Vue3 + TypeScript.

Длина этой статьи относительно велика, и она начинается со следующих аспектов:

• Архитектура
• спецификация кода
• спецификация фиксации
• модульный тест
• Автоматическое развертывание

Полный код этого проекта размещен по адресуРепозиторий GitHub, добро пожаловать, чтобы зажечь звездочку 🌟🌟

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

• Язык программирования:TypeScript 4.x + JavaScript
• Инструменты сборки:Vite 2.x
• Внешний фреймворк:Vue 3.x
• Инструмент маршрутизации:Vue Router 4.x
• Государственное управление:Vuex 4.x
• Фреймворк пользовательского интерфейса:Element Plus
• Прекомпиляция CSS:Stylus / Sass / Less
• HTTP-инструменты:Axios
• Инструмент Git Hook:husky + lint-staged
• Спецификация кода:EditorConfig + Prettier + ESLint + Airbnb JavaScript Style Guide
• Спецификация фиксации:Commitizen + Commitlint
• модульный тест:vue-test-utils + jest + vue-jest + ts-jest
• Автоматическое развертывание:GitHub Actions

Архитектура

Убедитесь, что Node.js успешно установлен на вашем компьютере.В этом проекте используется инструмент сборки Vite,Требуется версия Node.js >= 12.0.0.

Проверьте версию Node.js:

node -v

Рекомендуется обновить Node.js до последней стабильной версии:

# 使用 nvm 安装最新稳定版 Node.js
nvm install stable

Быстро инициализируйте прототипы проектов с помощью Vite

• Использование нпм:

  npm init @vitejs/app
  

• Используйте пряжу:

  yarn create @vitejs/app
  

Затем следуйте инструкциям терминала, чтобы выполнить следующее:

1. Введите название проекта

   Например: это название проектаvite-vue3-starter

   

2. Выберите шаблон

   Этот проект должен использовать Vue3 + TypeScript, поэтому мы выбираемvue-ts, Vue3 и TypeScript устанавливаются автоматически.

   

   

   Вы также можете указать имя проекта и шаблон напрямую через дополнительные параметры командной строки.Чтобы построить проект Vite + Vue3 + TypeScript в этом проекте, запустите:

   # npm 6.x
   npm init @vitejs/app vite-vue3-starter --template vue-ts
   
   # npm 7+（需要额外的双横线）
   npm init @vitejs/app vite-vue3-starter -- --template vue-ts
   
   # yarn
   yarn create @vitejs/app vite-vue3-starter --template vue-ts
   

3. Установить зависимости

   npm install
   

4. Стартовый проект

   npm run dev
   

   

   Как показано на рисунке выше, простой скелет проекта Vite + Vue3 + TypeScript завершен.Давайте интегрируем Vue Router, Vuex, Element Plus, Axios, Stylus/Sass/Less для этого проекта.

Измените файл конфигурации Vite

Файл конфигурации Vitevite.config.tsРасположенный в корневом каталоге, он автоматически считывается при запуске проекта.

Этот проект сначала выполняет простую настройку, например: установка@направлениеsrcКаталог, порт запуска службы, путь упаковки, прокси и т. д.

Дополнительные элементы конфигурации и использование Vite см. на официальном веб-сайте Vite.vitejs.dev/config/.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})

Каноническая структура каталогов

├── publish/
└── src/
    ├── assets/                    // 静态资源目录
    ├── common/                    // 通用类库目录
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── store/                     // 状态管理目录
    ├── style/                     // 通用 CSS 目录
    ├── utils/                     // 工具函数目录
    ├── views/                     // 页面组件目录
    ├── App.vue
    ├── main.ts
    ├── shims-vue.d.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json

Встроенный инструмент маршрутизации Vue Router

1. Установите инструмент маршрутизации vue-router@4, поддерживающий Vue3.

   npm i vue-router@4
   

2. Создайтеsrc/router/index.tsдокумент

   существуетsrcСоздать подrouterкаталог, затем вrouterновый в каталогеindex.tsдокумент:

    └── src/
        ├── router/
            ├── index.ts  // 路由配置文件
   

   import {
     createRouter,
     createWebHashHistory,
     RouteRecordRaw
   } from 'vue-router'
   import Home from '@/views/home.vue'
   import Vuex from '@/views/vuex.vue'
   
   const routes: Array<RouteRecordRaw> = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/vuex',
       name: 'Vuex',
       component: Vuex
     },
     {
       path: '/axios',
       name: 'Axios',
       component: () => import('@/views/axios.vue') // 懒加载组件
     }
   ]
   
   const router = createRouter({
     history: createWebHashHistory(),
     routes
   })
   
   export default router
   

   В соответствии с реальной ситуацией конфигурации маршрутизации этого проекта вам необходимоsrcСоздать подviewsКаталог, используемый для хранения компонентов страницы.

   мы вviewsСоздано в каталогеhome.vue,vuex.vue,axios.vue.

3. существуетmain.tsСмонтировать конфигурацию маршрутизации в файл

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

Интегрированный инструмент управления состоянием Vuex

1. Установите инструмент управления состоянием, который поддерживает Vue3 vuex@next.

   npm i vuex@next
   

2. Создайтеsrc/store/index.tsдокумент

   существуетsrcСоздать подstoreкаталог, затем вstoreновый в каталогеindex.tsдокумент:

   └── src/
       ├── store/
           ├── index.ts  // store 配置文件
   

   import { createStore } from 'vuex'
   
   const defaultState = {
     count: 0
   }
   
   // Create a new store instance.
   export default createStore({
     state() {
       return defaultState
     },
     mutations: {
       increment(state: typeof defaultState) {
         state.count++
       }
     },
     actions: {
       increment(context) {
         context.commit('increment')
       }
     },
     getters: {
       double(state: typeof defaultState) {
         return 2 * state.count
       }
     }
   })
   

3. существуетmain.tsКонфигурация монтирования Vuex в файле

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

Интегрированная среда пользовательского интерфейса Element Plus

1. Установите Element Plus, инфраструктуру пользовательского интерфейса, поддерживающую Vue3.

   npm i element-plus
   

2. существуетmain.tsУстановить Element Plus в файл

   import { createApp } from 'vue'
   import App from './App.vue'
   
   import ElementPlus from 'element-plus'
   import 'element-plus/lib/theme-chalk/index.css'
   
   createApp(App).use(ElementPlus).mount('#app')
   

Встроенный HTTP-инструмент Axios

1. Установите Axios (Axios не имеет прямого отношения к версии Vue, просто установите последнюю версию)

   npm i axios
   

2. Настроить Аксиос

   Чтобы сделать структуру каталогов проекта разумной и стандартизированной, мыsrcСоздать подutilsКаталог для хранения часто используемых функций инструментов.

   Axios как HTTP-инструмент, мы находимся вutilsСоздано в каталогеaxios.tsКак файл конфигурации Axios:

   └── src/
       ├── utils/
           ├── axios.ts  // Axios 配置文件
   

   import Axios from 'axios'
   import { ElMessage } from 'element-plus'
   
   const baseURL = 'https://api.github.com'
   
   const axios = Axios.create({
     baseURL,
     timeout: 20000 // 请求超时 20s
   })
   
   // 前置拦截器（发起请求之前的拦截）
   axios.interceptors.request.use(
     (response) => {
       /**
        * 根据你的项目实际情况来对 config 做处理
        * 这里对 config 不做任何处理，直接返回
        */
       return response
     },
     (error) => {
       return Promise.reject(error)
     }
   )
   
   // 后置拦截器（获取到响应时的拦截）
   axios.interceptors.response.use(
     (response) => {
       /**
        * 根据你的项目实际情况来对 response 和 error 做处理
        * 这里对 response 和 error 不做任何处理，直接返回
        */
       return response
     },
     (error) => {
       if (error.response && error.response.data) {
         const code = error.response.status
         const msg = error.response.data.message
         ElMessage.error(`Code: ${code}, Message: ${msg}`)
         console.error(`[Axios Error]`, error.response)
       } else {
         ElMessage.error(`${error}`)
       }
       return Promise.reject(error)
     }
   )
   
   export default axios
   

3. Использование Аксиос
   В файле Axios, который необходимо использовать, импортируйте файл конфигурации Axios, см. следующее:

   <template></template>
   <script lang="ts">
     import { defineComponent } from 'vue'
     import axios from '../utils/axios'
   
     export default defineComponent({
       setup() {
         axios
           .get('/users/XPoet')
           .then((res) => {
             console.log('res: ', res)
           })
           .catch((err) => {
             console.log('err: ', err)
           })
       }
     })
   </script>
   

Встроенный прекомпилятор CSS Stylus/Sass/Less

В этом проекте используется прекомпилятор CSS Stylus, который можно установить непосредственно как зависимость разработки. Vite уже интегрировал для нас соответствующий загрузчик, и дополнительная настройка не требуется. Точно так же вы можете использовать Sass или Less и т. д.

1. Установить

   npm i stylus -D
   # or
   npm i sass -D
   npm i less -D
   

2. использовать

   <style lang="stylus">
     ...
   </style>
   

На данный момент создана интерфейсная среда разработки проекта на основе TypeScript + Vite + Vue3 + Vue Router + Vuex + Element Plus + Axios + Stylus/Sass/Less, а демо-версия проекта размещена по адресуРепозиторий GitHub, Студенты, которым это нужно, могут загрузить его для ознакомления и изучения.

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

спецификация кода

По мере того, как интерфейсные приложения постепенно становятся больше и сложнее, когда в одном и том же проекте участвует несколько человек, интерфейсные возможности каждого человека различаются, и они часто используют разные стили кодирования и привычки для написания кода в проекте. надежность проекта неизбежно будет становиться все хуже и хуже. Для решения этих проблем теоретически можно использовать устное согласование и проверку кода, но этот метод не может обеспечить обратную связь в реальном времени, а стоимость коммуникации слишком высока, недостаточно гибка и, что более важно, не поддается контролю. Без правил мы не можем сформировать круг, мы должны использовать некоторые инструменты в проекте, чтобы ограничить спецификации кода.

В этой статье объясняется, как использоватьEditorConfig + Prettier + ESLintКомбинация для достижения канонизации кода.

Это приносит пользу:

• Решите проблему плохой читаемости и плохой ремонтопригодности, вызванную нестандартным кодом между командами.
• Решите проблему несовместимости стандартов кодирования, вызванную разными редакторами членов команды.
• Заранее выявляйте проблемы со стилем кода, давайте соответствующие советы по спецификации и вовремя устраняйте их.
• Экономьте время, сократив итеративный процесс модификации во время проверки кода.
• Автоматическое форматирование, единый стиль кодирования и попрощайтесь с беспорядочным кодом.

Интегрированная конфигурация EditorConfig

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

Официальный сайт:editorconfig.org

Добавьте в корневой каталог проекта.editorconfigдокумент:

# Editor configuration, see http://editorconfig.org

# 表示是最顶层的 EditorConfig 配置文件
root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

Уведомление:

• VSCode использует EditorConfig, вам нужно зайти на рынок плагинов, чтобы скачать плагинEditorConfig for VS Code.

  

• Серии JetBrains (WebStorm, IntelliJ IDEA и т. д.) не требуют установки дополнительных плагинов и могут напрямую использовать конфигурацию EditorConfig.

Интегрированная конфигурация Prettier

Prettier — это мощный инструмент форматирования кода, который поддерживает языки JavaScript, TypeScript, CSS, SCSS, Less, JSX, Angular, Vue, GraphQL, JSON, Markdown и др. По сути, он может обрабатывать все форматы файлов, которые можно использовать на переднем плане. конец, Это самый популярный инструмент форматирования кода на данный момент.

Официальный сайт:prettier.io/

1. Установить красивее

   npm i prettier -D
   

2. Создать профиль красивее

   Prettier поддерживает несколько форматовконфигурационный файл,Например.json,.yml,.yaml,.jsЖдать.

   Создан в корневом каталоге этого проекта.prettierrcдокумент.

3. настроить.prettierrc

   В этом проекте мы выполняем следующую простую настройку.Для получения дополнительной информации об элементах конфигурации перейдите на официальный сайт для просмотраPrettier-Options.

   {
     "useTabs": false,
     "tabWidth": 2,
     "printWidth": 100,
     "singleQuote": true,
     "trailingComma": "none",
     "bracketSpacing": true,
     "semi": false
   }
   

4. После установки и настройки Prettier вы можете использовать команды для форматирования кода.

   # 格式化所有文件（. 表示所有文件）
   npx prettier --write .
   

Уведомление:

• Редактор VSCode использует конфигурацию Prettier для загрузки плагина.Prettier - Code formatter.

  

• Редакторы серии JetBrains (WebStorm, IntelliJ IDEA и т. д.) не требуют установки дополнительных плагинов и могут напрямую использовать конфигурацию Prettier.

После настройки Prettier при использовании функций форматирования таких редакторов, как VSCode или WebStorm, редактор будет форматировать в соответствии с правилами файла конфигурации Prettier, избегая форматированного кода, вызванного различными конфигурациями редактора.Проблема несогласованного стиля.

Интегрированная конфигурация ESLint

ESLintЭто инструмент для поиска и сообщения о проблемах в коде, а также поддерживает автоматическое исправление некоторых проблем. Его ядром является возможность анализировать код для проверки качества и стиля кода путем сопоставления с образцом AST (абстрактного синтаксического дерева), полученного в результате синтаксического анализа кода.

Как мы упоминали ранее, проблема качества кода, вызванная разницей в способностях программирования и привычках кодирования среди членов команды, мы используем ESLint для решения проблемы и находим проблему во время написания кода.Если обнаружена ошибка, это даст запрос правила и его автоматическое исправление в долгосрочной перспективе может способствовать тому, чтобы члены команды приблизились к одному и тому же стилю кодирования.

1. Установить ESLint

   Его можно установить глобально или локально, автор рекомендует локальную установку (установка только в текущем проекте).

   npm i eslint -D
   

2. Настроить ESLint

   После успешной установки ESLint выполнитеnpx eslint --init, а затем следуйте инструкциям терминала, чтобы выполнить ряд настроек для создания файла конфигурации.

   • Как бы вы хотели использовать ESLint?

     

     Мы выбираем здесьПроверка синтаксиса, поиск проблем и соблюдение стиля кода

   • Какие типы модулей используются в вашем проекте?

     

     Мы выбираем здесьJavaScript modules (import/export)

   • Какой фреймворк использует ваш проект?

     

     Мы выбираем здесьVue.js

   • Ваш проект использует TypeScript?

     

     Мы выбираем здесьYes

   • Где работает ваш код?

     

     Мы выбираем здесьБраузер и узел(Нажмите пробел, чтобы выбрать, и нажмите клавишу Enter, чтобы подтвердить)

   • Как бы вы хотели определить стиль для вашего проекта?

     

     Мы выбираем здесьВоспользуйтесь популярным руководством по стилю

   • Какому руководству по стилю вы хотите следовать?

     

     Мы выбираем здесьAirbnb: GitHub.com/air не NB/Java…

     ESLint перечисляет для нас три самых популярных руководства по стилю JavaScript в сообществе: Airbnb, Standard и Google.

     Эти три руководства по стилю написаны многими крупными ребятами на основе многолетнего опыта разработки, и они достаточно хороши, чтобы ими могли пользоваться многие большие и малые компании по всему миру. мы выбралиAirbnb с наибольшим количеством звезд на GitHub, сэкономьте время на настройке правил ESLint и позвольте членам команды изучить руководство по стилю Airbnb для JavaScript.

     На данный момент мы настроили правила JavaScript Airbnb в ESLint. При кодировании весь код, не соответствующий стилю Airbnb, будет запрашиваться редактором и может быть автоматически исправлен.

     Автор здесь не рекомендует вам свободно настраивать правила ESLint. Поверьте мне, эти три руководства по стилю кода JavaScript стоит изучать снова и снова. После их освоения ваши навыки программирования могут быть улучшены до отличного уровня.

     

     • JavaScript Standard Style

       

     • Google JavaScript Style Guide

   • В каком формате вы хотите, чтобы ваш файл конфигурации был?

     

     Мы выбираем здесьJavaScript

   • Хотите установить их сейчас с помощью npm?

     

     В соответствии с выбранным выше, ESLint автоматически найдет недостающие зависимости, мы выбираем здесьYes, используйте NPM для загрузки и установки этих зависимостей.

     Примечание. Если автоматическая установка зависимостей не удалась, требуется ручная установка.

     npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue -D
     

3. Файл конфигурации ESLint.eslintrc.js

   существуетПредыдущийПосле завершения операции он будет автоматически сгенерирован в корневом каталоге проекта..eslintrc.jsКонфигурационный файл:

   module.exports = {
     env: {
       browser: true,
       es2021: true,
       node: true
     },
     extends: ['plugin:vue/essential', 'airbnb-base'],
     parserOptions: {
       ecmaVersion: 12,
       parser: '@typescript-eslint/parser',
       sourceType: 'module'
     },
     plugins: ['vue', '@typescript-eslint'],
     rules: {}
   }
   

   В соответствии с реальной ситуацией в проекте, если у нас есть дополнительные правила ESLint, также добавьте их в этот файл.

Уведомление:

• VSCode необходимо перейти на рынок плагинов, чтобы загрузить плагин для использования файла конфигурации ESLint.ESLint.

  

• Серии JetBrains (WebStorm, IntelliJ IDEA и т. д.) не требуют установки дополнительных плагинов.

После настройки мы открываем ESLin в таких редакторах, как VSCode или WebStorm.При написании кода ESLint выполнит проверку кода в реальном времени в соответствии с настроенными нами правилами и выдаст соответствующие подсказки об ошибках и решения для исправления, если проблемы будут обнаружены.

Как показано на рисунке:

• VSCode

• WebStorm

Хотя теперь редактор предоставил подсказки об ошибках и решения для исправления, нам довольно сложно щелкать и исправлять одно за другим. Очень просто, нам просто нужно настроить автоматический запуск редактора при сохранении файла.eslint --fixКоманда для исправления стиля кода.

• VSCode существуетsettings.jsonВ файле настроек добавьте следующий код:

   "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
   }
  

• Вебсторм Откройте окно настроек, сделайте следующее и, наконец, нажмитеApply -> OK.

Разрешение конфликтов между Prettier и ESLint

Обычно вы добавляете в проект дополнительные правила конфигурации ESLint и Prettier в соответствии с реальной ситуацией, и конфликты правил неизбежны.

Проверка руководства по стилю JavaScript Airbnb используется в конфигурации ESLint в этом проекте, и одно из его правилДобавьте точку с запятой после конца кода, и мы добавили в конфигурационный файл PrettierНе ставьте точку с запятой после конца кодаВ случае конфликта появится код, отформатированный с помощью Prettier, ESLint обнаружит проблему с форматом и выдаст сообщение об ошибке.

Чтобы разрешить конфликт между ними, вам нужно использоватьeslint-plugin-prettierа такжеeslint-config-prettier.

• eslint-plugin-prettierУстановите правила Prettier на правила ESLint.

• eslint-config-prettierОтключите конфликтующие правила в ESLint и Prettier.

Наконец, сформируйте приоритет:Prettier 配置规则 > ESLint 配置规则.

• Установить плагин

  npm i eslint-plugin-prettier eslint-config-prettier -D
  

• существует.eslintrc.jsДобавить красивый плагин

  module.exports = {
    ...
    extends: [
      'plugin:vue/essential',
      'airbnb-base',
      'plugin:prettier/recommended' // 添加 prettier 插件
    ],
    ...
  }
  

Таким образом, мы реализуемeslint --fixкомандой, ESLint отформатирует код в соответствии с правилами конфигурации Prettier и легко разрешит конфликт между ними.

Интеграция хаски и lint-staged

Мы интегрировали в проект ESLint и Prettier.При написании кода эти инструменты могут проверять код, который мы пишем, в режиме реального времени, что может в определенной степени эффективно стандартизировать код, который мы пишем, но некоторым людям в команде может показаться, что эти правила ограничено. Это очень хлопотно, выберите игнорировать «подсказку» и по-прежнему писать код в соответствии со своим стилем, или просто отключите эти инструменты, и отправляйте код сразу на склад после завершения разработки. Со временем ESLint будет бесполезен .

Следовательно, нам также необходимо ввести некоторые ограничения, чтобы запретить отправку кода, не прошедшего обнаружение и исправление ESLint, чтобы обеспечить соответствие кода хранилища спецификации.

Чтобы решить эту проблему, нам нужно использовать Git Hook для локального выполнения.git commit, выполнить обнаружение и исправление ESLint в отправленном коде (то есть выполнитьeslint --fix), если код не проходит проверку по правилу ESLint, его отправка запрещена.

Для достижения этого мы используемhusky + lint-staged.

husky- Инструмент Git Hook, который можно установить на различных этапах git (pre-commit,commit-msg,pre-pushи т. д.) запустить нашу команду.
lint-staged- Запускать линтеры для файлов, подготовленных git.

настроить хаски

• Автоматическая настройка (рекомендуется)

  использоватьhusky-initКоманда быстро инициализирует хаски в проекте.

  npx husky-init && npm install
  

  Эта строка команды делает четыре вещи:

  1. Установите хаски в зависимости от разработки

  2. Создан в корневом каталоге проекта.huskyсодержание

  3. существует.huskyсоздание каталогаpre-commitловить и инициализироватьpre-commitКомандаnpm test

  4. Исправлятьpackage.jsonизscripts,Увеличивать"prepare": "husky install"

• Ручная настройка (не рекомендуется, ленивый - первая продуктивность программистов)

  1. установить хаски

     npm i husky -D
     

  2. Создание хуков Git

     npx husky install
     

     Эта команда сделала две вещи:

     • Создан в корневом каталоге проекта.huskyсодержание

     • существует.huskyсоздание каталогаpre-commitловить и инициализироватьpre-commitКомандаnpm test

  3. Ручная модификацияpackage.jsonизscripts,Увеличивать"prepare": "husky install"

Специальное примечание: в этом проекте используется версия Husky 6.x, и метод настройки версии 6.x сильно отличается от предыдущей версии. В настоящее время большинство руководств по хаски в Интернете представляют собой версии до 6, что не совпадает с руководствами в этой статье.официальный сайт хаскипреобладать.

На данный момент хаски настроен, теперь воспользуемся им:

хаски содержит многоhook(крюк), обычно используется:pre-commit,commit-msg,pre-push. Здесь мы используемpre-commitдля запуска команды ESLint.

Исправлять.husky/pre-commitТриггерная команда файла хука:

eslint --fix ./src --ext .vue,.js,.ts

выше этогоpre-commitРоль файла ловушки такова: когда мы выполняемgit commit -m "xxx", сначала исправлюsrcвсе в каталоге.vue,.js,.ts выполнение файлаeslint --fixкоманда, если ESLint прошел успешноcommit, иначе завершитьcommit.

Но есть еще одна проблема: иногда мы меняем только один или два файла, а выполнять приходится все файлы.eslint --fix. Если это исторический проект и мы настраиваем правила ESLint посередине, то при отправке кода будут проверяться и другие немодифицированные "исторические" файлы, что может вызвать ошибки ESLint в большом количестве файлов, что явно не то, что мы хочу результат.

Мы должны использовать ESLint только для исправления кода, который мы написали на этот раз, не затрагивая другой код. Итак, нам нужно использовать волшебный инструментlint-staged.

Настройка lint-staged

Инструмент с ворсовой стадией обычно используется в сочетании с хаски, что позволяетhookТриггерные команды действуют только наgit addЭти файлы (то есть файлы в промежуточной области git), не затрагивая другие файлы.

Далее продолжаем оптимизировать проект с помощью lint-staged.

1. Установите lint-staged

   npm i lint-staged -D
   

2. существуетpackage.jsonДобавьте элемент конфигурации lint-staged в

   

   "lint-staged": {
     "*.{vue,js,ts}": "eslint --fix"
   },
   

   Эта строка команды означает: только для промежуточной области git.vue,.js,.tsвыполнение файлаeslint --fix.

3. Исправлять.husky/pre-commitТриггерная команда хука:npx lint-staged

   

На этом комбинированная конфигурация хаски и линта завершена.

Теперь, когда мы отправим код, он будет выглядеть так:

Если мы изменимscrв каталогеtest-1.js,test-2.tsа такжеtest-3.mdфайл, затемgit add ./src/,наконецgit commit -m "test...", то будет толькоtest-1.js,test-2.tsЭти два файла выполняютсяeslint --fix. Если ESLint проходит успешно, зафиксируйте успешно, в противном случае завершите фиксацию. Это гарантирует, что код, который мы отправляем в репозиторий Git, стандартизирован.

• перед подачейtest-1.js,test-2.ts

• после подачиtest-1.js,test-2.tsФорматирование кода автофиксации

Независимо от того, пишете ли вы код или занимаетесь другими вещами, вы должны ориентироваться на долгосрочную перспективу. Когда вы впервые начнете использовать ESint, может возникнуть много проблем, и изменение будет трудоемким и трудоемким. Пока вы придерживаетесь его, качество кода и эффективность разработки будут улучшены.Жертвы того стоят.

Эти инструменты необязательны, вы все равно можете завершить функциональную разработку без них, но используя эти инструменты, вы сможете писать код более высокого качества. В частности, некоторые люди, которые только что вступили в контакт, могут почувствовать себя хлопотно и отказаться от использования этих инструментов, потеряв хорошую возможность улучшить свои навыки программирования.

Полный код этого проекта размещен по адресуРепозиторий GitHub, Студенты, которым это нужно, могут загрузить его для ознакомления и изучения.
Зажги звездочки 🌟 Поддержи автора~

спецификация фиксации

Ранее мы унифицировали спецификацию кода и реализовали строгие ограничения при отправке кода, чтобы гарантировать качество кода хранилища. В совместном проекте с несколькими людьми также возникает ситуация в ссылке отправки кода: точное описание отправляемой информации не может быть гарантировано для всех, поэтому отправляемая информация будет неупорядоченной и непоследовательной по стилю.

еслиgit commitИнформация описания является точной, и она станет хорошо документированной при последующем обслуживании и обработке ошибок.Во время цикла разработки проекта журналы разработки могут быть быстро сгенерированы в соответствии со стандартной информацией о представлении, что удобно для нас, чтобы отслеживать проект и контролировать прогресс.

Здесь мы отправляем спецификации, используя самую популярную, известную и признанную команду сообщества Angular.

Первый взглядУгловой проект фиксирует:

Как показано на рисунке выше, эти сообщения фиксации имеют фиксированный формат.Давайте изучим формат сообщения фиксации спецификации Angular.

спецификация формата сообщения фиксации

Сообщение фиксации состоит из заголовка, тела и нижнего колонтитула.

<Header>

<Body>

<Footer>

Header

Раздел «Заголовок» включает три поля: тип (обязательно), область действия (необязательно) и тема (обязательно).

<type>(<scope>): <subject>

type

type используется для описания типа фиксации (должен быть одним из следующих).

стоимость	описывать
feat	добавить функцию
fix	исправить ошибку
docs	Изменения в документации
style	Формат кода (не влияет на функции, такие как исправления формата, такие как пробелы, точки с запятой и т. д.)
refactor	Рефакторинг
perf	Повысить производительность
test	тестовое задание
build	Измените сборки проекта или внешние зависимости (например, области: webpack, gulp, npm и т. д.)
ci	Измените файл конфигурации программного обеспечения непрерывной интеграции и команды сценариев в пакете, таких как области: Travis, Circle и т. д.
chore	Изменить процесс сборки или вспомогательные средства
revert	резервный код

scope

scope используется для указания области, затронутой этой фиксацией. Объем зависит от проекта, например, в бизнес-проекте он может быть разделен по меню или функциональным модулям, если это разработка библиотеки компонентов, он может быть разделен по компонентам. (область может быть опущена)

subject

subject — это краткое описание этого коммита длиной менее 50 символов, обычно со следующими спецификациями:

• Начните с глагола, выраженного в настоящем времени от первого лица, например, изменить вместо изменить или изменить
• первая буква строчная
• Не добавляйте точку (.) в конце

Body

body — подробное описание этого коммита, которое можно разделить на несколько строк. (тело можно опустить)

Как и подлежащее, начинающееся с глагола, тело должно указывать причину изменения и сравнение поведения до и после изменения.

Footer

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

• Прорывное изменение

  Если в текущем коде есть радикальное изменение по сравнению с предыдущей версией, нижний колонтитул начинается с БЛАГОТВОРИТЕЛЬНОГО ИЗМЕНЕНИЯ, за которым следует описание изменения и причина изменения.

• закрыть ошибку

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

Справочный пример

• feat

  feat(browser): onUrlChange event (popstate/hashchange/polling)
  
  Added new event to browser:
  - forward popstate event if available
  - forward hashchange event if popstate not available
  - do polling when neither popstate nor hashchange available
  
  Breaks $browser.onHashChange, which was removed (use onUrlChange instead)
  

• fix

  fix(compile): couple of unit tests for IE9
  
  Older IEs serialize html uppercased, but IE9 does not...
  Would be better to expect case insensitive, unfortunately jasmine does
  not allow to user regexps for throw expectations.
  
  Closes #392
  Breaks foo.bar api, foo.baz should be used instead
  

• style

  style(location): add couple of missing semi colons
  

• chore

  chore(release): v3.4.2
  

Преимущества стандартизации сообщений коммитов

• Первая строка — краткая и практичная ключевая информация, которая удобна для быстрого просмотра истории git.
• С более подробным телом и нижним колонтитулом вы можете четко увидеть цель и влияние отправки.
• Вы можете отфильтровать информацию, которую хотите найти, по типу или быстро найти похожие материалы по ключевому слову.
• Журналы изменений могут быть созданы непосредственно из коммитов.

Интеграция Commitize для реализации отправки спецификаций

Выше описан формат подачи спецификации Angular.Начинающим студентам он может показаться сложным на первый взгляд.На самом деле это не так.Если впустить всехgit commitПри написании в строгом соответствии с вышеуказанным форматом должно быть давление, прежде всего, вы должны помнить, какие типы используются для определения, как писать тему, как писать тело, писать ли нижний колонтитул и т. д. Ленивый это программа Первая производительность персонала, мы используем инструмент Commitizen, который помогает нам автоматически генерировать формат сообщения фиксации, чтобы реализовать отправку спецификации.

Commitizen — это инструмент, помогающий писать канонические сообщения коммитов. Он имеет инструмент командной строки cz-cli.

Установить Commitizen

npm install commitizen -D

Инициализировать проект

После успешной установки Commitize используемcz-conventional-changelogАдаптер для инициализации проекта:

npx commitizen init cz-conventional-changelog --save-dev --save-exact

Эта строка команды делает две вещи:

• Установите cz-conventional-changelog как devDependencies
• существуетpackage.jsonдобавлено вconfig.commitizen

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
  

  

Используйте Commitizen

Раньше мы отправляли кодgit commit -m "xxx", который теперь изменен наgit cz, а затем следуйте подсказкам терминала, вводите информацию шаг за шагом, и стандартное сообщение фиксации может быть сгенерировано автоматически.

Наконец, в истории коммитов Git вы можете увидеть только что указанную вами запись коммита:

Инструкции по отправке пользовательской конфигурации

Как вы можете видеть на скриншоте выше,git czВсе подсказки терминала на английском языке.Если вы хотите перейти на китайский язык или настроить эти параметры конфигурации, мы используемcz-customizableадаптер.

cz-настраиваемый проект инициализации

Запустите следующую команду, чтобы использовать cz-customizable для инициализации проекта, обратите внимание, что он уже был инициализирован один раз, на этот раз вам нужно добавить--forceпокрытие.

npx commitizen init cz-customizable --save-dev --save-exact --force

Эта строка команды делает две вещи:

• Установите cz-customizable как devDependencies

  "devDependencies": {
    ...
    "cz-customizable": "^6.3.0",
    ...
  },
  

• Исправлятьpackage.jsonсерединаconfig.commitizenПоля:

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
  }
  

Использовать cz-настраиваемый

Создан в корневом каталоге проекта.cz-config.jsдокумент, а затем следуйте официальномуПримернастроить.

В этом проекте мы модифицируем его на китайский язык:

module.exports = {
  // type 类型（定义之后，可通过上下键选择）
  types: [
    { value: 'feat', name: 'feat:     新增功能' },
    { value: 'fix', name: 'fix:      修复 bug' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式（不影响功能，例如空格、分号等格式修正）' },
    { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     添加、修改测试用例' },
    { value: 'build', name: 'build:    构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
    { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
    { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
    { value: 'revert', name: 'revert:   回滚 commit' }
  ],

  // scope 类型（定义之后，可通过上下键选择）
  scopes: [
    ['components', '组件相关'],
    ['hooks', 'hook 相关'],
    ['utils', 'utils 相关'],
    ['element-ui', '对 element-ui 的调整'],
    ['styles', '样式相关'],
    ['deps', '项目依赖'],
    ['auth', '对 auth 修改'],
    ['other', '其他修改'],
    // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
    ['custom', '以上都不是？我要自定义']
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`
    }
  }),

  // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。
  // allowCustomScopes: true,

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',


  // 针对每一个 type 去定义对应的 scopes，例如 fix
  /*
  scopeOverrides: {
    fix: [
      { name: 'merge' },
      { name: 'style' },
      { name: 'e2eTest' },
      { name: 'unitTest' }
    ]
  },
  */

  // 交互提示信息
  messages: {
    type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
    scope: '\n选择一个 scope（可选）：',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope：',
    subject: '填写简短精炼的变更描述：\n',
    body:
      '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
    breaking: '列举非兼容性重大的变更（可选）：\n',
    footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
    confirmCommit: '确认提交？'
  },

  // 设置只有 type 选择了 feat 或 fix，才询问 breaking message
  allowBreakingChanges: ['feat', 'fix'],

  // 跳过要询问的步骤
  // skipQuestions: ['body', 'footer'],

  // subject 限制长度
  subjectLimit: 100
  breaklineChar: '|', // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
}

Рекомендуется настраивать правила отправки конфигурации в соответствии с реальной ситуацией проекта, например, во многих случаях нам не нужно писать длинные описания, а также нам не нужно управлять проблемами на внутреннем складе кода компании, поэтому вы можете пропустить шаги запроса тела и нижнего колонтитула (в.cz-config.jsизменено вskipQuestions: ['body', 'footer']).

Интегрируйте commitlint для проверки спецификации коммита

В главе «Спецификации кода» мы уже упоминали, что, хотя спецификации сформулированы, в совместных проектах с несколькими людьми некоторые люди все же идут своим путем, поэтому мы также добавляем ограничение на отправку кода:Разрешить прохождение только сообщений коммитов, которые соответствуют спецификации Angular., мы делаем это с помощью @commitlint/config-conventional и @commitlint/cli .

Установить коммитлинт

Установите @commitlint/config-conventional и @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D

Настроить коммитлинт

• Создайте файл commitlint.config.js Создан в корневом каталоге проектаcommitlint.config.jsфайл и заполните следующее:

  module.exports = { extends: ['@commitlint/config-conventional'] }
  

  Или используйте команду быстрого доступа напрямую:

  echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
  

• используя хаскиcommit-msgХук запускает команду для проверки отправленной информации.
  Мы используем команду хаски в.huskyСоздано в каталогеcommit-msgфайл и выполните здесь команду проверки сообщения фиксации.

  npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
  

  

проверка фиксации

• Предоставление информации, не соответствующей спецификации
  Отправьте информацию, как показано нижеtest commitlintНе соответствует спецификации, отправка не удалась.

• Представления, соответствующие спецификации
  Отправьте информацию, как показано нижеtest: commitlint testОн соответствует спецификации и успешно сдан на склад.

Поскольку в проект интегрирован коммит, рекомендуется использоватьgit czзаменитьgit commitОтправить код, вы можете обеспечить представление информации спецификаций.

Полный код этого проекта размещен по адресуРепозиторий GitHub, учащиеся могут загрузить его для ознакомления.
Зажги звездочки 🌟 Поддержи автора~

модульный тест

Модульное тестирование является очень важным звеном в разработке проекта.Полное тестирование может обеспечить гарантию качества кода и бизнеса и уменьшить количество ошибок.

Эта глава поможет вам интегрировать инструменты модульного тестирования в проекты Vite + Vue3 + TypeScript.

Установить основные зависимости

Мы используем официальный Vuevue-test-utilsи популярные инструменты тестирования сообществаjestдля модульного тестирования компонентов Vue.

• vue-test-utils The next iteration of Vue Test Utils. It targets Vue 3.
• jest Delightful JavaScript Testing.
• vue-jest Jest Vue transformer
• ts-jest A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.

Установите эти инструменты как devDependencies:

npm i @vue/test-utils@next jest vue-jest@next ts-jest -D

Создать файл конфигурации шутки

Создайте новый проект в корневом каталоге проектаjest.config.jsдокумент:

module.exports = {
  moduleFileExtensions: ['vue', 'js', 'ts'],
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue-jest', // vue 文件用 vue-jest 转换
    '^.+\\.ts$': 'ts-jest' // ts 文件用 ts-jest 转换
  },
  // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(ts)$'
}

Создание файлов модульных тестов

надjest.config.jsфайл, мы настраиваем только соответствующие__tests__любой каталог.tsфайл или другой каталогxx.test.ts/xx.spec.tsфайл для модульного тестирования.

Здесь мы создаем в корневом каталоге проектаtestsкаталог для хранения файлов модульных тестов

├── src/
└── tests/                           // 单元测试目录
    ├── Test.spec.ts                 // Test 组件测试

• Test.vue

<template>
  <div class="test-container page-container">
    <div class="page-title">Unit Test Page</div>
    <p>count is: {{ count }}</p>
    <button @click="increment">increment</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'Vuex',
    setup() {
      const count = ref<number>(0)
      const increment = () => {
        count.value += 1
      }
      return { count, increment }
    }
  })
</script>

• Test.spec.ts

  import { mount } from '@vue/test-utils'
  import Test from '../src/views/Test.vue'
  
  test('Test.vue', async () => {
    const wrapper = mount(Test)
    expect(wrapper.html()).toContain('Unit Test Page')
    expect(wrapper.html()).toContain('count is: 0')
    await wrapper.find('button').trigger('click')
    expect(wrapper.html()).toContain('count is: 1')
  })
  

Интегрируйте @types/jest

Как показано выше, когда мы используем такие редакторы, как VSCode/WebStrom/IDEA, в файле модульного теста IDE подскажет, что некоторые методы не существуют (например,test,describe,it,expectи т. д.), установите @types/jest, чтобы решить эту проблему.

npm i @types/jest -D

Компилятор TypeScript также сообщит, что методы и типы jest не могут быть найдены.Также нам нужно добавить @types/jest в корневую директорию.ts.config.json(файл конфигурации TypeScript):

{
  "compilerOptions": {
    ...
    "types": ["vite/client", "jest"]
  },
}

Добавить eslint-plugin-jest

Поскольку мы интегрировали ESLint в проект, как показано на рисунке выше, очевидно, что тест правила ESLint не пройден. Поэтому нам также нужно добавить в ESLinteslint-plugin-jestПлагин для девалидации шутки.

• Установите eslint-plugin-jest

  npm i eslint-plugin-jest -D
  

• Добавьте eslint-plugin-jest в файл конфигурации ESLint..eslintrc.jsсередина

  module.exports = {
    ...
    extends: [
      ...
      'plugin:jest/recommended'
    ],
    ...
  }
  

Теперь в коде модульного теста не будет сообщений об ошибках.

Выполнение модульных тестов

в корневом каталогеpackage.jsonдокументscripts, добавьте команду модульного теста:"test": "jest".

Выполнение заказаnpm run testМодульное тестирование может быть выполнено, и шутка будетjest.config.jsфайл конфигурации, чтобы найти__tests__в каталоге.tsфайл или любой другой каталог.spec.tsа также.test.tsфайл, а затем выполните метод модульного теста.

ты сможешьjest.config.jsВ конфигурационном файле каталог для бесплатных файлов юнит-тестов конфигурации.

• Терминал отображает информацию, когда все модульные тесты пройдены

• Сообщение терминала отображается, когда не все модульные тесты пройдены

Когда модульные тесты не проходят, нам необходимо оптимизировать код соответствующего компонента в соответствии с информацией об ошибках, чтобы еще больше повысить надежность проекта. А вот писать юнит-тесты — дело относительно болезненное, лично я не считаю необходимым писать юнит-тесты на все компоненты, достаточно писать их целенаправленно по реальной ситуации проекта.

Ограничения модульного теста

Ранее мы использовали хаски в Gitpre-commitа такжеcommit-msgЭтапы ограничивают спецификацию стиля кода и спецификацию сообщения фиксации соответственно. На этом шаге мыpre-pushМодульное тестирование выполняется на этапе, и код допускается только в случае прохождения всех модульных тестов.pushна удаленный склад, в противном случае прекратитьpush.

Используйте команду хаски в.huskyАвтоматически создается в каталогеpre-pushловите файл и выполняйте команды модульного теста здесьnpm run test.

npx husky add .husky/pre-push "npm run test $1"

Теперь мыgit pushМодульные тесты могут быть выполнены первыми, и только когда все модульные тесты пройдены, они могут быть успешными.push.

Полный код этого проекта размещен по адресуРепозиторий GitHub, учащиеся могут загрузить его для ознакомления.
Зажги звездочки 🌟 Поддержи автора~

Автоматическое развертывание

На данный момент мы интегрировали в проектОграничения спецификации кода,Ограничения спецификации отправки информации,Ограничения модульного теста, чтобы гарантировать высокое качество кода в наших удаленных репозиториях (таких как репозитории GitHub, GitLab, Gitee и т. д.).

Этот проект предназначен для создания набора стандартизированной интерфейсной инженерной среды, поэтому мы используем CI (непрерывную интеграцию) для завершения окончательного развертывания проекта.

Распространенными инструментами CI являются GitHub Actions, GitLab CI, Travis CI, Circle CI и т. д.

Здесь мы используем действия GitHub.

Что такое действия GitHub

GitHub Actions — это служба непрерывной интеграции GitHub.Непрерывная интеграция состоит из множества операций, таких как очистка кода, выполнение тестов, вход на удаленные серверы, публикация в сторонних службах и т. д. GitHub называет эти операции действиями.

Настройка действий GitHub

Создайте репозиторий GitHub

Поскольку действия GitHub работают только с репозиториями GitHub, мыСоздайте репозиторий GitHubдля размещения кода проекта.

Среди них мы используем:

• masterФорки хранят исходный код проекта
• gh-pagesФилиал хранит упакованные статические файлы

gh-pagesВетка — это фиксированная ветвь службы GitHub Pages, и к статическим файловым ресурсам этой ветки можно получить доступ через HTTP.

Создать токен GitHub

создатьrepoа такжеworkflowразрешениеGitHub Token

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

Добавить секрет в репозиторий

Добавьте только что созданный токен выше в репозиторий GitHub.Secretsи добавьте этот новыйsecretназванныйVUE3_DEPLOY(Название не имеет значения, смотрите, что вам нравится).

Шаг: Склад ->settings -> Secrets -> New repository secret.

только что созданный секретVUE3_DEPLOYОн используется в файле конфигурации Actions, и эти два места должны быть согласованы!

Создайте файл конфигурации действий

1. Создан в корневом каталоге проекта.githubсодержание.
2. существует.githubСоздано в каталогеworkflowsсодержание.
3. существуетworkflowsСоздано в каталогеdeploy.ymlдокумент.

deploy.ymlСодержимое файла:

name: deploy

on:
  push:
    branches: [master] # master 分支有 push 时触发

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js v14.x
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'

      - name: Install
        run: npm install # 安装依赖

      - name: Build
        run: npm run build # 打包

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3 # 使用部署到 GitHub pages 的 action
        with:
          publish_dir: ./dist # 部署打包后的 dist 目录
          github_token: ${{ secrets.VUE3_DEPLOY }} # secret 名
          user_name: ${{ secrets.MY_USER_NAME }}
          user_email: ${{ secrets.MY_USER_EMAIL }}
          commit_message: Update Vite2.x + Vue3.x + TypeScript Starter # 部署时的 git 提交信息，自由填写

Принцип триггера автоматического развертывания

Когда есть новый отправленный кодpushКогда вы достигнете репозитория GitHub, будут запущены действия GitHub, и команды в файле конфигурации действия будут выполняться на сервере GitHub, например:Установить зависимости,Упаковка проектаПодождите, затем разверните упакованные статические файлы на GitHub Pages, и, наконец, мы сможем получить к ним доступ через доменное имя.

🌏 через доменное имяvite-vue3-starter.xpoet.cn/посетите этот проект

Используя автоматическое развертывание, нам нужно сосредоточиться только на этапе разработки проекта, а любые повторяющиеся и скучные действия оставляются программе для выполнения, а лень — это первая производительность программистов.

На самом деле, автоматическое развертывание — это лишь верхушка айсберга GitHub Actions.GitHub Actions может многое.Если вам интересно, вы можете проверить это.

наконец

От технических вариантов до построения архитектуры, от ограничений спецификации кода до ограничений спецификации представления информации, от модульного тестирования до автоматического развертывания, эта статья шаг за шагом проведет вас, как перейти от простейшего скелета внешнего интерфейса к стандартизированному интерфейсному инжинирингу. среда, в основном охватывающая интерфейс. Весь процесс разработки проекта особенно подходит для студентов, которые плохо знакомы с интерфейсом.

Из-за длины страницы и связанных с ней технических моментов ошибки неизбежны. Надеюсь, вы сможете меня исправить, спасибо!

---

Эта статья была впервые опубликована в паблике @front-end supervisorr.

Следуйте за мной и предлагайте вам интерфейсный пакет 2021 года, тщательно подготовленный автором, охватывающий последние версии Vue / React / Angular / Node.js / Vite / видеоуроки / учебные документы / руководства для интервью / банк вопросов Dachang и другие материалы.