Подготовка к 2021 году: инженерная практика Vite, рекомендуемая коллекция

что такое вите

viteэто инструмент для разработки, который использует браузер во время разработкиnative ES ModuleКод организации импорта функций, использование в производствеrollupКак упаковочный инструмент, он имеет следующие характеристики:

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

Цель этой статьи

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

установить вайт

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Анализ организации кода

Ключевое изменениеindex.htmlМетод импорта входного файла в

Таким образом, код может быть организован в виде модуля ES6 в main.js.

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

Затем получите файл для загрузки в соответствии с параметром файла записи в модуле package.json.

Для разработчиков в целом серьезных изменений нет.

Анализ способа загрузки ресурсов

Импорт файлов CSS напрямую

Vite можно импортировать напрямую.cssфайлы, стили повлияют на импортированные страницы, которые в конечном итоге будут упакованы вstyle.css.

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

Scoped CSS

<style scoped>
/**/
</style>

CSS Module

Использование модуля CSS в SFC

<style module>
/**/
</style>

Пример: измените стиль компонента на форму модуля CSS.

Импортируйте модуль CSS в JS: назовите файл css как*.module.cssТолько что

Препроцессор CSS

После установки соответствующего препроцессора вы можете использовать его прямо в проекте vite.

<style lang="scss">
/* use scss */
</style>

или импортировать в JS

import './style.scss'

PostCSS

Автоматическая пара Vite*.vueФайл и импортирован.cssфайл для применения конфигурации PostCSS, нам просто нужно установить необходимые плагины и добавитьpostcss.config.jsфайл.

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

npm i postcss autoprefixer@8.1.4

Обработка URL-адреса ресурса

ссылки на статические ресурсы

мы можем*.vueшаблон файла, стиль и простой.cssНа статические ресурсы ссылаются относительные и абсолютные пути в файле.

<!-- 相对路径 -->
<img src="./assets/logo.png">
<!-- 绝对路径 -->
<img src="/src/assets/logo.png">

<style scoped>
#app {
  background-image: url('./assets/logo.png');
}
</style>

`public`содержание

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

Эти файлы копируются без изменений в корень каталога дистрибутива.

<img src="/logo.png">

Обратите внимание, что ссылка находится вpublicВ приведенных ниже файлах необходимо использовать абсолютные пути, например.public/icon.pngследует использовать/icon.pngЦитировать

Спецификация кода: Eslint

мы используемeslintСтандартизируйте код проекта,prettierСделайте форматирование кода.

Сначала установите зависимости в проекте,package.json

{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,vue}\""
  },
  "devDependencies": {
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "prettier": "^1.19.1"
  }
}

затем настройтеlintправило,.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": [
      "warn",
      {
        // singleQuote: none,
        // semi: false,
        trailingComma: "es5",
      },
    ],
  },
};

Также можно настроить при необходимостиprettier.config.jsИсправлятьprettierправила форматирования по умолчанию для

module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: false, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  trailingComma: 'es5', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  arrowParens: "avoid", // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

тестовая среда

использоватьjestа также@vue/test-utilsтестовый компонент

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

"jest": "^24.0.0",
"vue-jest": "^5.0.0-alpha.3",
"babel-jest": "^26.1.0",
"@babel/preset-env": "^7.10.4",
"@vue/test-utils": "^2.0.0-beta.9"

Настройте babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env", { 
        targets: { 
          node: "current" 
        } 
      }
    ]
  ],
};

настроить jest.config.js

module.exports = {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\js$": "babel-jest",
  },
  moduleFileExtensions: ["vue", "js", "json", "jsx", "ts", "tsx", "node"],
  testMatch: ["**/tests/**/*.spec.js", "**/__tests__/**/*.spec.js"],
  moduleNameMapper: {
    "^main(.*)$": "<rootDir>/src$1",
  },
};

сценарий запуска

"test": "jest --runInBand"

тестовый код,tests/example.spec.js

import HelloWorld from "main/components/HelloWorld.vue";
import { shallowMount } from "@vue/test-utils";

describe("aaa", () => {
  test("should ", () => {
    const wrapper = shallowMount(HelloWorld, {
      props: {
        msg: "hello,vue3",
      },
    });
    expect(wrapper.text()).toMatch("hello,vue3");
  });
});

lintконфиг добавитьjestсреде, иначе будет сообщение об ошибке:

module.exports = {
  env: {
    jest: true
  },
}

будетlint,testа такжеgitмонтировать

npm i lint-staged yorkie -D

"gitHooks": {
  "pre-commit": "lint-staged",
  "pre-push": "npm run test"
},
"lint-staged": {
  "*.{js,vue}": "eslint"
},

При нормальных обстоятельствах хук фиксации будет автоматически установлен после установки yorkie. Если хук фиксации не действует, вы можете запустить его вручнуюnode node_modules/yorkie/bin/install.jsустановить. Конечно, вы также можете запуститьnode node_modules/yorkie/bin/uninstall.jsчтобы удалить хук фиксации.

интеграция машинописного текста

viteможно импортировать напрямую.tsфайл, переданный в SFC<script lang="ts">использовать

Пример: Создайте компонент с помощью ts

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

interface Course {
  id: number;
  name: string;
}
  
export default defineComponent({
  setup() {
    const state = ref<Course[]>([]);
    setTimeout(() => {
      state.value.push({ id: 1, name: "全栈架构师" });
    }, 1000);
  },
});
</script>

tsуказана версия,package.json

{
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}

tsэталонная конфигурация,tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "lib": ["dom", "esnext"]
  },
  "exclude": ["node_modules", "dist"]
}

Конфигурация проекта

Создание корневого каталога проектаvite.config.js, даviteПроект глубоко настроен.

определить псевдоним

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

датьsrc/componentsопределить псевдонимы,vite.config.js

const path = require("path");

module.exports = {
  alias: {
    // 路径映射必须以/开头和结尾
    "/comps/": path.resolve(__dirname, "src/components"),
  },
};

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

import CourseAdd from "/comps/CourseAdd.vue";
import Comp from "/comps/Comp.vue";

играет роль

настроить прокси сервера,vite.config.js

export default {
  proxy: {
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

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

fetch("/api/users")
  .then(response => response.json())
  .then(json => console.log(json));

имитация данных

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

npm i mockjs -S
npm i vite-plugin-mock cross-env -D

плагин импорта,vite.config.js

plugins: [
  createMockServer({
    // close support .ts file
    supportTs: false,
  }),
],

установить переменные окружения,package.json

"dev": "cross-env NODE_ENV=development vite"

Создайтеmockдокумент,mock/test.js

export default [
  {
    url: "/api/users",
    method: "get",
    response: req => {
      return {
        code: 0,
        data: [
          {
            name: "tom",
          },
          {
            name: "jerry",
          },
        ],
      };
    },
  },
  {
    url: "/api/post",
    method: "post",
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: "vben",
      },
    },
  },
];

Режимы и переменные среды

Используйте шаблоны для настройки нескольких сред,vite serveРежим времени по умолчаниюdevelopment,vite buildкогдаproduction.

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

VITE_TOKEN=this is token

читать в коде

import.meta.env.VITE_TOKEN

Упаковать и развернуть

Бэйл

использоватьnpm run buildвыполнить упаковку

развертывать

Конечно, можно вручную загрузить контент из dist на сервер, а затем настроить nginx, но лучше автоматизировать этот процесс, чтобы избежать этих утомительных операций. Здесь мы используем действия github для реализации процесса ci/cd.

Github ActionsПозволяет нам создавать собственные рабочие процессы жизненного цикла разработки программного обеспечения непосредственно в репозитории Github.

Готов к работе:

Али Клаудlinuxсервер

линукс операция

Операции, связанные с Alibaba Cloud

Шаг 1. Настройте рабочий процесс, следующая конфигурация может автоматически упаковать наше приложение и развернуть его на сервере Alibaba Cloud, когда мы отправим код, и создадим его в корневом каталоге проекта..github/workflows/publish.yml

name: 打包应用并上传阿里云

on:
  push:
    branches:
      - master

jobs:
  build:
    # runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
    runs-on: ubuntu-latest
    steps:
      # 获取源码
      - name: 迁出代码
        # 使用action库  actions/checkout获取源码
        uses: actions/checkout@master
      # 安装Node10
      
      - name: 安装node.js
        # 使用action库  actions/setup-node安装node
        uses: actions/setup-node@v1
        with:
          node-version: 14.0.0

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

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

      # 上传阿里云
      - name: 发布到阿里云
        uses: easingthemes/ssh-deploy@v2.1.1
        env:
          # 私钥
          SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
          # scp参数
          ARGS: "-avzr --delete"
          # 源目录
          SOURCE: "dist"
          # 服务器ip：换成你的服务器IP
          REMOTE_HOST: "47.98.252.43"
          # 用户
          REMOTE_USER: "root"
          # 目标地址
          TARGET: "/root/vue-in-action"

Шаг 2: Установите параметр закрытого ключа в текущем проекте на github.

截屏2020-11-20 上午11.04.57

скопируйте локальный закрытый ключ,~/.ssh/id_rsa

# ssh秘钥生成过程自行百度
cd .ssh/
cat id_rsa

截屏2020-11-20 上午11.09.37

Скопируйте и заполнитеgithub-secretes

Шаг 3. Настройте nginx на облачном сервере Alibaba.

сервер входа

ssh root@47.98.252.43 # ip换成你的

настроитьnginx

cd /etc/nginx/sites-enabled/
vi vue-in-action

Добавьте следующую конфигурацию

server {
    listen 8080;
    server_name 47.98.252.43;
    location / {
        root /root/vue-in-action/dist/;
        index index.html index.htm;
    }
}

перезагружатьnginx：nginx -s reload

Шаг 4. Нажмите код, чтобы запустить рабочий процесс

Вы закончили, взволнованы и быстро проверяете результат загрузки

доступ:47.98.252.43:8080Попробуйте! ! !

Поддерживающая демонстрация видео

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

"Деревенский староста" вит инжиниринг

Это не легко сделать, попросите один3连关注Не переусердствуйте! ?

план дальнейших действий

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

управление стилем
Макет страницы
Контроль доступа
Управление иконками
инкапсуляция запроса
визуализация данных

Каждый点个赞,收藏一下, для дальнейшего изучения.

поддержать старосту села

Вот и все про инженерию.Этот контент уже давно подбрасывает.Я наступил на много ям и потерял несколько волос.Друзья ставьте лайки и подбадривайте.

Мои последние статьи (спасибо моим друзьям за поддержку и ободрение 🌹🌹🌹):

🔥Подготовка к 2021 году, реализована версия vue3 компонента эффекта летающей карты Tantan.35👍
🔥Это еще одна ночь, вы думаете, что эта практика Composition-API коротка?211👍
🔥Чтобы выиграть vue3, вы должны сделать эти приготовления65👍
🔥Lightning Five Whips: углубленный анализ принципов Composition API52👍