Теперь, независимо от gitee или github, все больше и больше внешних проектов с открытым исходным кодом используют Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass (предварительно скомпилированный язык css и т. д.), среди которых есть различные конфигурации проектов, такие как Настройка инструмента проверки кода eslint Подождите, и если мы хотим проводить вторичную разработку фронтенд-проектов, мы должны знать, как использовать эти вещи, поэтому автор написал эту статью для краткого ознакомления.

1. Обзор Vue3+Vite+TypeScript

1.1 вид3

1.1.1 Обзор Vue3

Vue.js — это интерфейсная среда JavaScript, которую можно использовать для создания интерактивных веб-страниц и одностраничных приложений. Vue.js 3 — это последняя версия фреймворка Vue.js, официально выпущенная в сентябре 2020 года. По сравнению с Vue.js 2, Vue.js 3 имеет следующие изменения и улучшения:
1. Лучшая производительность: производительность Vue.js3 оптимизирована.Оптимизируя отзывчивую систему, можно повысить производительность приложения.
2. Улучшенная поддержка TypeScript: Vue.js 3 лучше поддерживает TypeScript и имеет встроенную поддержку TypeScript.
3. Улучшенный опыт разработчиков: в Vue.js 3 значительно обновлен компилятор шаблонов, все исходные шаблоны теперь компилируются в функции, что означает более быструю компиляцию и меньшую зависимость от Vue.js во время выполнения.
4. Улучшенный API компонентов: Vue.js 3 представляет Composition API, который может помочь разработчикам писать код компонентов более легко и гибко.
5. Улучшенная поддержка Tree-Shaking: Vue.js 3 поддерживает улучшенную функцию Tree-Shaking. Это позволяет включать в приложение только тот код, который вам нужен, что значительно сокращает время загрузки и размер приложения.

1.1.2 Статус-кво и тенденции развития vue3

В настоящее время Vue 3 стал одним из самых популярных фреймворков во фронтенд-разработке. Многие компании и разработчики используют Vue 3 для разработки своих проектов. Вот некоторые тенденции в Vue 3:

1. Улучшенная поддержка TypeScript: Vue 3 представляет множество новых определений типов TypeScript, обеспечивая улучшенную проверку типов и функции автодополнения. Это упрощает для разработчиков написание приложений Vue с использованием TypeScript.
2. Популярность Composition API: Composition API — это новый компонентный API, представленный в Vue 3, который может помочь разработчикам лучше организовывать и повторно использовать логику компонентов. Поскольку все больше и больше разработчиков начинают использовать Composition API, он станет важной частью разработки Vue 3.
3. Более высокая производительность и меньший размер пакета: Vue 3 представляет множество оптимизаций производительности, включая более высокую скорость рендеринга, меньший размер пакета и многое другое. Эти улучшения делают Vue 3 более эффективной и надежной средой, которая помогает разработчикам быстрее создавать высококачественные приложения.
4. Больше вкладов сообщества: Vue 3 получил широкую поддержку сообщества, и многие разработчики и компании разрабатывают новые плагины, компоненты и инструменты для Vue 3. Это еще больше повысит функциональность и удобство использования Vue 3.

1.2 Быстро

1.2.1 Практические проблемы

До того, как браузеры стали поддерживать модули ES, JavaScript не предоставлял разработчикам встроенного механизма модульной разработки. Вот почему мы знакомы с концепцией «упаковки»: с использованием инструментов для захвата, обработки и объединения наших модулей исходного кода в файлы, которые можно запускать в браузере.

Со временем мы стали свидетелями изменений в таких инструментах, как webpack , Rollup и Parcel , которые значительно улучшили опыт разработки интерфейсных разработчиков.

Однако по мере того, как мы начинали создавать все более и более крупные приложения, объем обрабатываемого кода JavaScript увеличивался в геометрической прогрессии. Довольно распространены большие проекты с тысячами модулей. Инструменты, разработанные на основе JavaScript, начинают сталкиваться с узкими местами в производительности: обычно требуется много времени (даже минуты!) для запуска сервера разработки, и даже при горячей замене модулей (HMR) эффект модификации файлов проявляется через несколько секунд. браузер. Такой цикл продолжается и продолжается, и медленная обратная связь сильно повлияет на эффективность разработки и удовлетворенность разработчика.

Vite стремится решить вышеуказанные проблемы, используя преимущества новых разработок в экосистеме: браузеры начинают изначально поддерживать модули ES, а все больше и больше инструментов JavaScript пишут на скомпилированных языках.

1.2 Сборка проекта vite

Использование НПМ:

npm create vite@latest

Использование ПНПМ:

pnpm create vite

1.3 Машинописный текст

1.3.1 Определение TypeScript

Аббревиатура TypeScript: TS — это надмножество JavaScript. На основе JS в JS добавлена поддержка типов. TypeScript = Тип + JavaScript

1.3.2 Базовые типы данных TypeScript

Как показано ниже:

1.3.3 Краткое введение в синтаксис TypeScript

1.3.3.1 Примитивные типы

// 数值类型
let age: number = 20
 
// 字符串类型
let myName: string = 'hello'
 
// 布尔类型
let isLoading: boolean = false
 
// undefined
let un: undefined = undefined
 
// null
let timer:null = null

1.3.3.2 Типы соединений

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

let arr: (number | string)[] = [12, 'a']

1.3.3.3 Типы массивов

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]


let numbers: number[] = [40, 43, 45]

1.3.3.4 Типы функций

Обычная функция : имя функции функции (параметр 1: тип, параметр 2: тип): тип возвращаемого значения { } Функция
стрелки : константное имя функции (параметр 1: тип, параметр 2: тип): тип возвращаемого значения => { }

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number, num2: number): number => {
  return num1 + num2
}

1.3.3.5 Интерфейс

Когда тип объекта используется несколько раз, существует два способа описания типа объекта для достижения цели повторного использования.

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}

interface login_form {
    username:string,
    password:string
}

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

интерфейс интерфейс 1 расширяет интерфейс 2 для реализации мультиплексирования атрибутов или методов.

1.3.3.6 Общие сведения

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

общая функция

// T 只是一个名字而已，可以改成其他的，例如 R
 
function fn<T>(value: T): T { return value }
const num = fn<number>(10)

универсальный интерфейс

interface myinterface<T> {
        list:Array<T> 
}

Конечно, в ts еще много контента, вот только краткое введение.

2. Краткий обзор конфигурации проекта

2.1 Настройка инструмента проверки кода eslint

2.1.1 определение эслинта

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

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

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

2.1.2 установка eslint

установить эслинт

pnpm i eslint -D

Создайте файл конфигурации: .eslint.cjs

npx eslint --init

2.2 более красивая конфигурация инструмента форматирования

2.2.1 более красивое определение

С eslint, зачем тебе красивше? eslint нацелен на javascript, который является инструментом обнаружения, включая синтаксис js и небольшое количество проблем с форматом.По мнению eslint, правильный синтаксис может обеспечить нормальную работу кода, а проблемы с форматом стоят на втором месте;

А prettier — это инструмент форматирования, он не может понять несовместимый формат, поэтому продолжает делать то, что не удалось eslint, кроме того, prettier поддерживает несколько языков, включая js. Подводя итог, два брата eslint и prettier гарантируют качество js-кода и красоту кода.

2.2.2 красивая установка

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.3 конфигурация stylelint

2.3.1 определение stylelint

stylelint — это инструмент lint для css. Он может форматировать код CSS, проверять синтаксические ошибки CSS и необоснованное написание, указывать порядок написания CSS и т. д.

2.3.2 scss устанавливает зависимости stylelint

Проект использует scss в качестве препроцессора и устанавливает следующие зависимости:

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

2.4 хаски конфигурация

2.4.1 определение хаски

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

Для этого нам нужно использовать husky для запуска git hook (хука git на стороне клиента) перед отправкой кода, а затем выполнить формат запуска pnpm для автоматического форматирования нашего кода.

2.4.2 установка лайки

Установитьhusky

pnpm install -D husky

осуществлять

npx husky-init

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

3. Интеграция проекта

3.1 Интегрирующий элемент-плюс

element-plus основан на Vue 3, библиотеке компонентов для дизайнеров и разработчиков.

3.1.1 Установка

Установить элемент-плюс

pnpm install element-plus

Установить библиотеку компонентов

pnpm install element-plus @element-plus/icons-vue

3.1.2 Применение

Входной файл main.ts глобально устанавливает element-plus.

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import elementplus from 'element-plus'
import 'element-plus/dist/index.css'
const app=createApp(App)
app.use(elementplus).mount('#app')

Использование компонентов

<script setup lang="ts">
 import {Plus} from '@element-plus/icons-vue'
</script>

<template>
  <div>
    <el-button type="primary" :icon="Plus">hello</el-button>
  </div>

</template>

3.2 Настройка псевдонима src

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

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

Конфигурация компиляции TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

3.3 Макет

3.3.1 Фиктивное определение

Мок- тест — это метод тестирования, в котором используется виртуальный объект для создания метода тестирования некоторых объектов, которые непросто создать или получить в процессе тестирования.
Mock может имитировать фоновый ответ http-интерфейса, это так просто, он может имитировать запрос и ответ.

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

1. При обращении к сторонней системе не удается создать демонстрационную среду для клиентов
2. При обращении к сторонней системе не удается выполнить стабильную разработку и тестирование
3. При обращении к сторонней системе не удается выполнить тестирование производительности собственной системы
4. Разработка внутреннего интерфейса не завершена, сначала необходимо разработать внешний интерфейс
5. Возвращаемое значение реальной сцены не может охватывать тестовую сцену

3.3.3 Установка и тестирование

установить зависимости

pnpm install -D [email protected] mockjs

Включите плагин в файле конфигурации vite.config.ts.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import {viteMockServe} from 'vite-plugin-mock'


export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
  }
}

Создайте фиктивную папку в корневом каталоге: чтобы создать фиктивные данные и интерфейс, которые нам нужны, создайте файл user.ts внутри фиктивной папки.

//用户信息数据
function createUserList() {
    return [
        {
            username: 'admin',
            password: '111111',
        },
        {
            username: 'system',
            password: '111111',
        },
    ]
}

export default [
    // 用户登录接口
    {
        url: '/user/login',//请求地址
        method: 'post',//请求方式
        response: ({ body }) => {
            //获取请求体携带过来的用户名与密码
            const { username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username == username && item.password == password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
                return { code: 201, data: { message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const { token } = checkUser
            return { code: 200, data: {message: '登录成功'}  }
        },
    },

]

Наконец, вы можете проверить это через axios.

3.4 пакет аксиом

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

1: Используя перехватчик запросов, вы можете обрабатывать некоторые дела в перехватчике запросов (запуск индикатора выполнения, заголовок запроса, содержащий общедоступные параметры)

2: Используя перехватчик ответов, вы можете обрабатывать некоторые дела в перехватчике ответов (конец индикатора выполнения, упрощение данных, возвращаемых сервером, и обработка сетевых ошибок http)

import axios from "axios";
import { ElMessage } from "element-plus";
//创建axios实例
let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config => {
    return config;
});
//响应拦截器
request.interceptors.response.use((response) => {
    return response.data;
}, (error) => {
    //处理网络错误
    let msg = '';
    let status = error.response.status;
    switch (status) {
        case 401:
            msg = "token过期";
            break;
        case 403:
            msg = '无权访问';
            break;
        case 404:
            msg = "请求地址错误";
            break;
        case 500:
            msg = "服务器出现问题";
            break;
        default:
            msg = "无网络";

    }
    ElMessage({
        type: 'error',
        message: msg
    })
    return Promise.reject(error);
});
export default request;

3.5 Интеграция Sass

3.5.1 Введение в sass

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

3.5.2 Установка

pnpm install sass sass-loader

Но вы обнаружите, что нет возможности использовать переменные в глобальном файле стилей src/styles/index.scss, поэтому вам нужно ввести глобальные переменные в проект. Создайте файл variable.scss в style/variable.scss! Сохраните в нем глобальные переменные, а затем настройте в vite.config.ts следующим образом:

export default defineConfig((config) => {
	css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
	}
}

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

3.5.3 сасс-синтаксис

переменная　

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

$highlight-border: 1px solid red;

нормальная вложенность

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

 div{
        h1{
            color:$red;
        }
    }

селектор псевдокласса

Когда мы используем селекторы псевдоклассов

article a {
    color: blue;
    :hover { color: red }
}

　Скомпилированный код css выглядит так

article a {
  color: blue;
}
article a :hover {
  color: red;
}

В настоящее время sass предоставляет & для использования и представляет собой селектор нашего родительского класса, где & представляет статью a, мы можем написать код sass следующим образом:

article a {
    color: blue;
    &:hover { color: red }
}

миксин миксин

Мы можем использовать идентификатор @mixin для определения большого раздела стилей css, а затем использовать @include для его повторного использования в разных местах.

@mixin alert {
    background-color: yellow;
    color: red;
}
    h1{
        @include alert
    }

　Mixer поддерживает передачу параметров как функцию для достижения функций, настраиваемых модулем.

@mixin alert($text-color,$backgroud-color) {
    background-color: $backgroud-color;
    color: $text-color;
}
    h1{
        @include alert(red,blue)
    }

наследовать

Наследование — очень важная функция SASS.Вы можете повторно использовать свойства CSS между селекторами с помощью директивы @extend без создания лишнего кода.

@mixin alert($text-color,$backgroud-color) {
    background-color: $backgroud-color;
    color: $text-color;
}
    h1{
        @include alert(red,blue)
    }
    h2{
        @extend h1
    }

@Импортировать

　Sass может импортировать другие файлы sass в форме @import для достижения модульного эффекта.Те файлы, которые специально импортируются другими файлами sass, называются частичными файлами, и sass имеет специальное соглашение об именах этих файлов. То есть начинать с подчеркивания, а подчеркивание можно опустить при его вводе. Например, если вы хотите импортировать styles/_a.scssпеременные в этот локальный файл, вам просто нужно написать в таблице стилей@import "styles/a"。

这篇文章到此结束，由于篇幅问题其中的很多内容也是仅仅简单的介绍一下比较常用的内容，后面会进行拆分对每一个模块内容进行详细的介绍和代码实战。

Подробное объяснение общих модулей проекта Vue3+Vite+TypeScript