Vite 開發快速入門

2022-02-07 Vue中文社區

Vite已經出來很久了，新版本也比較穩定，有沒有打算入手一下，推薦下面這篇文章。

一、Vite簡介

Vite (法語意為 "快速的"，發音 /vit/) 是一種面向現代瀏覽器的一個更輕、更快的前端構建工具，能夠顯著提升前端的開發體驗。除了Vite外，前端著名的構建工具還有Webpack和Gulp。目前，Vite已經發布了Vite2，Vite全新的插件架構、絲滑的開發體驗，可以和Vue3的完美結合。

1.1 Vite組成

Vite構建工具由兩部分組成：

總的來說，Vite希望提供開箱即用的配置，同時它的插件API和JavaScript API帶來了高度的可擴展性。不過，相比Vue-cli配置來說，Vite構建的項目還是有很多的配置需要開發者自己進行處理。1.2 瀏覽器支持二、環境搭建2.1 創建項目根據Vite官網介紹，我們可以使用npm或yarn來初始化Vite項目，並且Node.js的版本需要 >= 12.0.0。除此之外，還可以通過附加的命令行選項直接指定項目名稱和模板。例如，要構建一個 Vite + Vue 項目，命令如下：
# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要額外的雙橫線：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue
輸入完命令之後，按照提示操作即可。如果項目需要支持TypeScript，可以在初始化項目的時候選擇vue-ts。項目創建好之後，可以發現Vite所創建好的項目其實與使用Vue-cli所創建的項目目錄結構其實是差不多的。
2.2 集成Vue-Router2.2.1 安裝配置Vue-RouterVue-Router作為大多數項目必不可少的路由工具，已經被大多數的前端項目所使用，Vue-Router可以讓構建單頁面應用變得更加的容易。首先，在項目中安裝Vue-Router，安裝命令如下：
//npm
npm install vue-router@next --save

//yarn
yarn add vue-router@next --save
安裝完成之後，在src目錄下創建一個文件夾router/index.ts，然後添加如下一些配置：
import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: () => import('views/home.vue') }
  ]
});

export default router
然後，我們在main.ts文件中引入Vue-Router，如下所示。
import router from './router';
createApp(App).use(router).mount("#app");
2.2.2 新增路由頁面
為了方便掩飾，我們再新增兩個路由頁面。熟悉，創建pages文件夾，把需要展示的頁面創建完成。然後，我們在router/index.ts註冊我們新增的頁面，如下所示。
routes: [
        {
            path: "/home",
            name: "Home",
            alias: "/",
            component: () => import("../pages/Home.vue")
        },
    ]
接下來，我們再修改一下App.vue的代碼，如下所示。
<template>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

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

export default defineComponent({
  name: 'App'
})
</script>
接下來啟動服務，就可以看到所配置的頁面了，並且點擊還能夠跳轉到對應的頁面。
2.3 集成VuexVuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。使用Vuex之前，需要先安裝Vuex插件，如下所示。
//npm
npm install vuex@next --save

//yarn
yarn add vuex@next --save
安裝完成之後，需要先初始化Vuex。首先，創建一個store/index.ts文件，添加如下代碼。
import { createStore } from "vuex";

const store = createStore({
  modules: {
    home: {
      namespaced: true,
      state: {
        count: 1
      },
      mutations: {
        add(state){
          state.count++;
        }
      }
    }
  }
})

export default store;
上面的代碼作用就是實現一個簡單的自加功能。然後，我們在main.js文件中引入Vuex。
import { createApp } from 'vue';
import App from './App.vue';

import store from "./store";

const app = createApp(App);
app.use(store);
app.mount('#app');
完成上述操作之後，接下來我們給Vuex編寫一個測試代碼看Vuex是否有效。修改Home.vue的代碼如下。
<template>
  <h1>Home Page</h1>
  <h2>{{count}}</h2>
  <button @click="handleClick">click</button>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup () {
    const store = useStore();
    const count = computed(() => store.state.home.count);
    const handleClick = () => {
      store.commit('home/add');
    };
    return {
      handleClick,
      count
    };
  }
})
</script>
上面的代碼實現的就是一個簡單的自加功能，和默認示例工程的效果事一樣的，只不過我們使用Vuex。
2.4 集成EslintESLint是一個用來識別 ECMAScript語法， 並且按照規則給出報告的代碼檢測工具，使用它可以避免低級錯誤和統一代碼的風格。集成Eslint需要安裝如下一些插件：
npm install eslint -D
npm install eslint-plugin-vue -D
npm install @vue/eslint-config-typescript -D
npm install @typescript-eslint/parser -D
npm install @typescript-eslint/eslint-plugin -D
npm install typescript -D
npm install prettier -D
npm install eslint-plugin-prettier -D
npm install @vue/eslint-config-prettier -D
yarn add eslint --dev
yarn add eslint-plugin-vue --dev
yarn add @vue/eslint-config-typescript --dev
yarn add @typescript-eslint/parser --dev
yarn add @typescript-eslint/eslint-plugin --dev
yarn add typescript --dev
yarn add prettier --dev
yarn add eslint-plugin-prettier --dev
yarn add @vue/eslint-config-prettier --dev
安裝完成之後，還需要根目錄下創建一個.eslintrc文件，如下。
{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2021
  }
}
添加了配置規則之後，還需要在package.json文件的scripts中添加如下命令：
{
    "lint": "eslint --ext src/**/*.{ts,vue} --no-error-on-unmatched-pattern"
}
接下來運行一下yarn lint就可以了，可以通過eslint完成格式的校驗了。不過，我們在執行yarn lint的時候會把所有的文件全部都校驗一次，如果有很多文件的話，那麼校驗起來速度將會很慢，此時，我們一般只在git提交的時候才對修改的文件進行eslint校驗，那麼我們可以這麼做。
那就需要使用 lint-staged插件。
//npm
npm install lint-staged -D
//yarn 
yarn add lint-staged --dev
{
  "gitHooks": {
    "commit-msg": "node scripts/commitMessage.js",
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,vue}": "eslint --fix"
  },
  "scripts": {
    "test:unit": "jest",
    "test:e2e": "cypress open",
    "test": "yarn test:unit && npx cypress run",
    "lint": "npx prettier -w -u . && eslint --ext .ts,.vue src/** --no-error-on-unmatched-pattern",
    "bea": "npx prettier -w -u ."   
  },
}
2.5 配置alias
在過去使用vue-cli的時候，我們總是使用@去引入某些文件，由於Vite沒有提供類似的配置，所以我們需要手動的對其進行相關配置，才能繼續使用@符號去快捷的引入文件。首先，我們需要修改vite.config.ts的配置。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { join } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: '/src',
      },
      { find: 'views', replacement: '/src/views' },
      { find: 'components', replacement: '/src/components' },
    ]
  }
});
然後，我們在修改tsconfig.json文件，如下。
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
   
   //以下為需要添加內容
    "types": ["vite/client", "jest"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    } 
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ]
}
2.6 集成element-plus
Element Plus是由餓了麼大前端團隊開源出品的一套為開發者、設計師和產品經理準備的基於 Vue 3.0 的組件庫，可以幫助開發者快速的開發網站，如果你使用過element-ui，那麼可以快速的過渡到element-plus。除了element-plus，支持Vue 3.0 的UI框架還有很多。首先，在項目的根目錄下安裝element-plus，命令如下：
npm install element-plus --save
2.6.1 引入element-plus
我們可以引入整個 element-plus，也可以根據需要僅引入部分組件。如果是全部引入，只需要在main.js 添加如下代碼即可。
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
i

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
如果為了減小項目的包體積，那麼只需要引入對應的功能組件即可。首先，安裝 babel-plugin-component插件，如下所示。
npm install babel-plugin-component --save
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
如果我們只需要引入部分組件，比如 Button 和 Select組件，那麼需要在 main.js 中引入對應的組件即可，如下所示。
import { createApp } from 'vue'
import { store, key } from './store';
import router from "./router";
import { ElButton, ElSelect } from 'element-plus';
import App from './App.vue';
import './index.css'

const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);

/* 或者
 * app.use(ElButton)
 * app.use(ElSelect)
 */

app.use(store, key)
app.use(router)
app.mount('#app')
2.6.2 添加配置
引入 Element Plus後，我們可以添加一個全局配置對象。該對象目前支持 size 與 zIndex 欄位。size 用於改變組件的默認尺寸，zIndex 設置彈框的初始 z-index。以下是兩種不同的引入方式：
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';

const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);
2.6.3 配置proxy 和 alias
如果要在Vite中使用alias別名配置和proxy代理配置，那麼需要在vite.config.ts文件中進行單獨的配置。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ],

  /**
   * 在生產中服務時的基本公共路徑。
   * @default '/'
   */
  base: './',
  /**
  * 與「根」相關的目錄，構建輸出將放在其中。如果目錄存在，它將在構建之前被刪除。
  * @default 'dist'
  */
  // outDir: 'dist',
  server: {
    // hostname: '0.0.0.0',
    host: "localhost",
    port: 3001,
    // // 是否自動在瀏覽器打開
    // open: true,
    // // 是否開啟 https
    // https: false,
    // // 服務端渲染
    // ssr: false,
    proxy: {
      '/api': {
        target: 'http://localhost:3333/',
        changeOrigin: true,
        ws: true,
        rewrite: (pathStr) => pathStr.replace('/api', '')
      },
    },
  },
  resolve: {
    // 導入文件夾別名
    alias: {
      '@': path.resolve(__dirname, './src'),
      views: path.resolve(__dirname, './src/views'),
      components: path.resolve(__dirname, './src/components'),
      utils: path.resolve(__dirname, './src/utils'),
      less: path.resolve(__dirname, "./src/less"),
      assets: path.resolve(__dirname, "./src/assets"),
      com: path.resolve(__dirname, "./src/components"),
      store: path.resolve(__dirname, "./src/store"),
      mixins: path.resolve(__dirname, "./src/mixins")
    },
  }
})
其中，vite-plugin-style-import是一個可以按需引入樣式的庫。
三、數據請求Vue本身是不支持ajax調用的，如果需要執行網絡請求，那麼就需要藉助一些工具，如superagent和axios。不過，Vue開發使用得比較多的還是axios。
//npm
npm insall axios -save

//yarn 
yarn add axios -save
然後，新建一個request.ts，添加如下的代碼。
import axios from 'axios';

let request = axios.create({
    baseURL: 'http://localhost:3555/api'
})

export default request;
然後，在新建一個index.ts，用來處理具體的網絡請求，比如：
import request from "./axios";

export const getUrl = () => {
    return request({
        url: "/users/test" // 請求地址
    })
}

export default { getUrl };
import { getUrl } from "../api/index"

export default {
    setup() {
        const getUrls = async() =>{
            const res = await getUrl()
            console.log(res)
        }
        onMounted(() => { 
            getUrls()
        })
    }
}
關於本文
作者：xiangzhihong
來源：SegmentFault 思否社區

相關焦點

  • Vue 3全新的Web開發構建工具——Vite介紹
    Vite是Vue的作者尤雨溪開發的Web開發構建工具，它是一個基於瀏覽器原生ES模塊導入的開發伺服器，在開發環境下，利用瀏覽器去解析import，在伺服器端按需編譯返回，完全跳過了打包這個概念，伺服器隨啟隨用。
  • 基於 vite 的組件文檔編寫神器,又快又省心
    （Vue）除了 VitePress 之外，其他都是用 Webpack 作為開發伺服器。一個只有幾頁的簡單文檔站點啟動開發伺服器所花費的時間變得難以忍受。即使是 HMR 更新也可能需要幾秒鐘才能反映在瀏覽器中。Vite 的出現很好地解決了這些問題：近乎即時的伺服器啟動、僅編譯所服務頁面的按需編譯以及閃電般快速的 HMR。
  • 【組件庫從0到1】Vite + Vue3 + TSX開發指南
    在這個過程中大家需要解決不少工程問題，比如：這些任務對於日常和業務打交道的同學來說當然很有挑戰性，12月16日，村長特意準備了一節0元公開課《vue3+ts組件庫開發實戰》，本次課準備給小夥伴們實戰一下Tree組件的開發，深度體驗vue3+tsx開發的各種知識點。
  • 把 Vue-cli 項目遷移至 Vite!
    npm un @vue/cli-servicenpm i vite -D你也可以刪除任何其他以 @vue/cli-plugin-xxx 開頭的開發依賴項，因為它們將不再起作用，例如：, 這個會用在vite.config.js中：
  • 用 Vitepress 來用 Vue3 生成漂亮的文檔
    於是，我去查了一些資料，發現，Vue3和新的Vite構建工具為我們提供了另一種快速開發靜態站點的方法，那就是 Vitepress。今天，我們來一起看看，如何使用 Vitepress 快速為Vue應用創建文檔。
  • 十分鐘了解vite如何支持react
    丁楠:  微醫前端技術部醫療支撐組  專業標題黨，人菜癮大的刀斯林前言vite 是基於瀏覽器支持 ESM 模塊，用以解決大型應用本地開發環境打包、熱更新時間久的一套解決方案，目前已支持vue、react、Svelte、Solid等主流框架，相信不少同學已經開始使用 vite，並體驗到「飛一般」的體驗啦，下面我們來看看vite是如何支持
  • 10分鐘搞懂 Vite devServer,速來圍觀!
    梁曉瑩，微醫前端技術部前端開發工程師，一隻喜歡遊泳&&讀書的豬豬女孩。分析 version：2.2.3，和我來一場 vite server 探尋之旅吧~(❦ω❦)一、初始 cli 啟動服務做了什麼？
  • 湯臣倍健擬收購拜耳旗下兒童營養補充劑Penta-vite
    5月31日，中國膳食補充劑品牌湯臣倍健宣布，以約1億元人民幣價格收購拜耳旗下具有70多年歷史的兒童營養補充劑品牌Penta-vite業務資產。Penta-vite品牌於1940年在澳洲創立，曾屬於在國際健康事業領域居世界領先地位的世界500強企業羅氏公司（Roche）；2004年，Penta-vite被另一世界知名500強企業拜耳公司（Bayer）收購。Penta-vite品牌專注於0-12歲兒童的營養補充劑產品，是澳洲兒童營養領域的專業領導品牌之一。
  • Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3目前最流行的項目框架!
    隨著vue3.0的越來越受歡迎，開始有許多公司和個人開始學習並使用vue3開發項目。我從接觸學習並使用vue2，到現在的vue3，工作中也一直在使用vue。VueRequest 旨在為開發者提供便捷、快速的方式來管理接口的狀態。只需要簡單的配置即可使用，專注於業務核心的開發。
  • Vite使Vue CLI過時了嗎?
    Vue CLI概述大多數Vue開發人員都知道，Vue CLI是使用標準構建工具和最佳實踐配置快速建立基於Vue的項目的不可或缺的工具。Vite目前還處於測試階段，看來Vite項目的目的並不是像Vue CLI那樣的一體化工具，而是專注於提供一個快速的開發伺服器和基本的構建工具。Vite怎麼這麼快?Vite開發伺服器至少會比Webpack快10倍左右。對於一個基本的項目來說，與2.5秒相比，開發構建/重新構建的時間相差250ms。
  • 009 | 快速入門Web前端開發的正確姿勢
    入門標準很簡單，就一條：達到能參與 Web 前端實際項目的開發水平。請注意，是實際項目，這就需要了解如今的實際項目開發都用了哪些技術棧。HTML/CSS/JavaScript 這三大基礎技術棧肯定是需要掌握的，但要能參與實際項目開發，肯定還要掌握其他一些主流的框架體系。
  • 薦書 | Kotlin開發快速入門與實戰
    ；本書就是為這些人準備的學習與開發指南。等程式語言，卻不知道如何配合Kotlin開發新的技術。資深軟體開發工程師根據Kotlin最新版本撰寫，內容全面，系統講解Kotlin開發技巧和項目實戰，將為您打造一個全棧工程師。1．零基礎在學習本書之前不需要具備任何的計算機專業背景，任何有志於APP開發的讀者都能利用本書從頭學起。
  • GraphVite 超高速圖表示學習系統,1 分鐘可學百萬節點
    GraphVite 可以幫助用戶實現：在統一的平臺上重現學習算法對圖形或高維數據進行快速可視化對大規模圖形或知識圖譜進行學習提高原型設計與模型調整的效率目前，GraphVite 已為 3 種任務提供了完整的訓練和評估流程，包括：
  • 現代 Vue 工程之「國際化 i18n 開發」
    所以筆者總結了一些在 Vue 工程中實現國際化 i18n 的開發方法，主要是針對 Vue 項目而言的，所謂現代Vue工程 即是藉助一些好用的工具，可能是你以往沒有接觸過的，也可能是你正在使用的，它們是一些提升開發效率的方法、工具等。
  • java如何快速入門?
    下面是一些可能幫助您成長為Java開發人員並獲得更多關於該語言的知識的技巧。java如何快速入門正確掌握Java的基本知識由於Java為開發人員提供了如此多的特性和選項java如何快速入門真正弄懂你敲出的代碼是做什麼的只要你理解了代碼背後的思想
  • Python快速入門的方法
    現在如果有人問：要把哪門語言作為入門的首選語言？不少人都會回答：Python！因為Python簡單，所以學起來快，有編程經驗的程式設計師一周就能上手Python。但是！Python對有基本的程序概念的人來說很簡單，但對於新手來說真不一定算簡單。
  • 大一學習軟體開發需要多久能入門
    首先，對於大一的同學來說，學習軟體開發技術是不錯的選擇，未來更多專業的學生都需要具備一定的軟體開發知識，這一點在工業網際網路時代會有更加明顯的體現，掌握一定的軟體開發技術，也會在一定程度上拓展自身的就業渠道。
  • Vue3+Vite+TS+Eslint(Airbnb規則)搭建生產項目,踩坑詳記(一):初始化,引入Airbnb
    錯誤截圖解決這個問題，我們需要在根目錄下的 vite.config.ts 文件中修改開發伺服器的配置，手動指定埠號。修改開發伺服器修改完成後重新啟動項目，就可以訪問了。首頁添加ESLint支持eslint只有開發階段需要，因此添加到開發階段的依賴中即可npm install eslint --save-dev在VS Code中安裝
  • 如何快速入門一門計算機語言
    今天以 golang 為例說明如何快速入門一門計算機語言1.
  • 湯臣倍健買下兒童營養補充劑品牌Penta-vite 董事長談併購:吃起來...
    5月31日，湯臣倍健宣布，以約1億元人民幣價格收購了拜耳旗下兒童營養補充劑品牌Penta-vite業務資產。對於公司的併購邏輯，湯臣倍健董事長梁允超在接受《每日經濟新聞》記者採訪時表示，2018年是湯臣倍健的國際化元年，收購標的都希望做到每個細分品類的世界前列，所以會更加保守和謹慎。