Vue2'de yazılmış birçok eski projem var. Ve hangi stiller kitaplığını kullanıyorum? Elbette vuetify .

Bu makale, Vite'ın gücünden yararlanmanıza yardımcı olmak için tasarlanmıştır. Çünkü eski kodunuz olsa bile hızlı geliştirme sürelerini hak ediyorsunuz.

Daha eski tarayıcıları desteklemeniz gerekmiyorsa. Geliştirme yapılarınızı hızlandırmak istiyorsanız. Genel olarak daha iyi bir deneyim istiyorsanız. Vite'a bir göz atmak isteyebilirsiniz.

Vite, Webpack'e benzer işlevlere sahiptir. Tek Dosya Bileşenleri ve TypeScript'ten vanilya JavaScript'e kadar kodunuzu bir araya toplar ve derler.

Aynısını yapıyorsa neden kullanmak isteyeyim?

Basit. Vite tarafından üretilen demetler daha küçüktür. Uygulamada bunun 2 anlamı vardır:

1. Daha hızlı geliştirme hızı. Daha az kod üretmesi gerektiğinden, daha hızlı aktarılır.
2. Daha hızlı tarayıcı yükleme hızı. Daha küçük paketler daha hızlı yüklenir.

Feragatname

• Vite'a dalmadan önce. Eski tarayıcıları desteklemediğini bilmeniz gerekir.

Babil kaldırılıyor

package.json'unuzda babel ile ilgili her şeyi şu şekilde kaldırın :

"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",

Bu, Webpack ile ilgili kitaplıkları kaldıralım.

Webpack'i Kaldırma

package.json dosyanızda şunları kaldırın:

"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",

Webpack ve Babel kaldırıldı. Şimdi. Vite'ı ekleyelim.

Davet Ekleme

Yükleyin viteve vite-plugin-vue2çalıştırarak:

npm install -D vite vite-plugin-vue2

Dosyaları yeniden düzenleme

Vite, projemizin dosya yapısı konusunda biraz fikir sahibi. Statik dosyalarımızın dizinlerini değiştirmemiz gerekecek.

Ortak klasördeki her şeyi kök dizine çıkarın.

Bahsettiğim "her şey" genellikle:

• index.html
• favicon.ico

index.html dosyasındaki değişiklikler

index.html dosyanızı açarsanız, şöyle bir şey bulacaksınız:

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Diğer bir deyişle. Gitmesi gereken her şey <%...%>.

Bu yapıldıktan sonra şöyle bir şeye sahip olmalıyız:

<!DOCTYPE html>
<html lang="">
  <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" />
    <link rel="icon" href="./favicon.ico" />
    <title>Admin</title>
    <script type="module" src="/src/main.js" defer></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but the admin doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<script type="module" src="/src/main.js" defer></script>

Vite yapılandırmalarını ekleme

Webpack'e nasıl konfigürasyon eklediğimize benzer şekilde, bunu Vite ile yapmamız gerekiyor.

Basit bir yapılandırma dosyası:

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Öncelikle. İhtiyacımız olan bağımlılıkları import ediyoruz.

import { defineConfig } from "vite"

import { createVuePlugin as vue } from "vite-plugin-vue2";

import path from "path";

Şimdi zor şeylere.

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(''), "./src"),
    },
  },
});

plugins: [vue()],

resolve: {
  alias: {
    "@": path.resolve(path.dirname(''), "./src"),
  },
},

Vite betikleri ekleyin

Ayrıca betiklerimizi de güncellememiz gerekiyor. Bundan:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},

Şu ana kadarki yapılandırmamız Vuetify ile çalışmaz. Bunu yapmak için bazı özel ayarlara ihtiyacımız var.

ek adım

Şu andan itibaren. Bir Tek Dosya Bileşenini (SFC) içe aktardığımızda, uzantıyı dahil etmeniz gerekir.

Bunu daha önce ne zaman yapabilirdik:

import HelloWorld from '@/components/HelloWorld';

import HelloWorld from '@/components/HelloWorld.vue';

Eslint'in Vite ile düzgün çalışması için bazı ayarları yapmamız gerekiyor. Eğer kullanmıyorsanız, bu bölümü atlamaktan çekinmeyin.

Bilinen babel/eslint yapılandırması şuna benzer:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser"
  },
  "rules": {}
}

1. Seçenekte şuraya envgidin node: true:es2021: true
2. tamamen kaldırın parserOptions.

{
  "root": true,
  "env": {
    "es2021": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {}
}

Vuetify'ı Vite ile işlemek için aşağıdaki paketi kurmalıyız.

npm install -D unplugin-vue-components

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Sonuçlar

• Webpack'ten Vite'a geçiş büyük bir güçlük değil. Ancak, hızdaki artış buna değer.
• Artık Babel'e ihtiyacımız yok.
• Vite, dosya konumları konusunda fikir sahibidir.
• Vuetify özel yapılandırmalar gerektirir.