Vite2 участвует в Vue2? Я буду

Vue.js

默认文件1612960239033.png

Изучите решения, которые ускорят разработку проекта в десять раз.исходный язык

0 Нажмите

В последнее время Vite довольно популярен, особенно продвижение Vite2, смена нового логотипа, твиты и лайки вокруг vite, а код работает без остановок: он действительно полон энергии!

image.png

image.png

Vite2 еще больше отделяется от Vue и становится все более и более независимым от технологий Проекты Vue3 и React работают одинаково.

Вопрос в том, может ли Vite2 запустить семейство Vue2? В официальном шаблоне vite нет vue2.

После тестирования ответ положительный. Делюсь этим временемНе говорите об устаревшем принципе Vite1, (я действительно не могу его выучить), говоря о применении: используйтеVite2 взаимодействует с Vue2Семейное ведро.

Схема этого обмена идеями:

1 проект Vue2

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

Собрать проект относительно просто:

Vue2 + router + vuex + + less + ts + prettier

vue add element

image.png

Финальный проект прошелyarn serveначать бежать.

image.png

2 Введение зависимостей Vite

Благодаря механизму плагина vite нам нужно сделать только следующее, чтобы перейти с vue-cli на vite:

npm i vite vite-pugin-vue2 -D

Исправлятьpackage.jsonсерединаscript.dev="vite".

Далее мы готовимsrc/index.html, содержание и оригиналpublic/index.htmlОбщий контент такой же, но его нужно импортировать вручнуюsrc/main.tsНачать вход, установитьtype=module,Как показано ниже:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue2 vite2</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Нам нужно подготовить файл конфигурации, вы можете обратиться к моему файлу конфигурации/vite.config.js

import { createVuePlugin } from "vite-plugin-vue2";
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
  alias: {
    "@": path.resolve(__dirname, "src")
  },
  base: "/",
  plugins: [
    // vue()
    createVuePlugin()
  ]
});

Здесь мы устанавливаемbase=/а такжеaliasДве конфигурации.

Есть еще одна конфигурация, с которой нужно иметь дело, потому что по умолчаниюrouter/index.tsИспользуются переменные окружения, согласно документации vite здесь требуются модификации.

const router = new VueRouter({
  mode: "history",
  base: import.meta.env.BASE_URL,
  routes
});

отprocess.envизменился наimport.meta.env

Все готово, пробуйте:

npm run dev

image.png

Вот и все, работает: работа маршрутизатора, работа с элементами, работа с Vue2 Devtools, работа с измененным файлом, работа с горячим обновлением.

image.pngВот и все.

Подождите, поскольку API композиции Vue3 так популярен, попробуйте и его.

3 Попробуйте CompositionAPI

Справочная документацияGitHub.com/vUEJS/compo…

Единая установка, настройка и использование

npm install @vue/composition-api

Исправлятьsrc/main.ts

import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

Изменить следующую страницу

<template>
  <div class="about">
    <h1>info</h1>
    <p>{{ number }}</p>
    <el-button @click="addCount" type="primary">add</el-button>
    <p>我是{{ obj.name }}</p>
    <p>今年 {{ prettyAge }}</p>
  </div>
</template>
<script lang="ts">
import { ref, reactive, defineComponent, computed } from "@vue/composition-api";
interface TypeInfo {
  name: string;
  age: number;
  hobby?: string[];
}
export default defineComponent({
  setup() {
    const number = ref(0);
    const obj: TypeInfo = reactive({
      name: "xinbao",
      age: 18
    });
    const addCount = () => number.value++;
    const prettyAge = computed(() => obj.age + "岁");
    return {
      number,
      prettyAge,
      obj,
      addCount
    };
  }
});
</script>

беги снова, беги

image.png

4 предварительных вывода

Теория осуществима, можно запустить.

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

Технические преимущества:

  • режим разработки веб-пакета

image.png

  • вайт режим

image.png

4584/407 примерно равно 11.3, как вы думаете, мой переход с webpack на vite улучшился?10 разскорость компиляции?

Добро пожаловать, чтобы оставить сообщение.

Категории