體驗Vite快速構建項目

image

前端大佬尤雨溪在知乎上回答這樣一個問題, 隨著vite2.0的發布,直接引爆前端圈。

那么vite到底好在哪里,如何使用呢?

接下來由大師兄帶你一起走進vite世界。

image

一. Vite簡介

Vite是一種新型前端構建工具,能夠顯著提升前端開發體驗。

在日常開發中,一般使用Webpack對項目進行構建編譯,最后打包成Bundle文件。

當冷啟動開發服務器時,基于打包器的方式啟動必須有限抓取并構建整個應用之后才能提供服務,隨著項目的規模越大,Webpack啟動服務器變得緩慢。

而Vite 通過在一開始將應用中的模塊區分為依賴和源碼兩類，改進了開發服務器啟動時間。

Vite以原生ESM方式提供源碼。這實際上是讓瀏覽器接管了打包程序的部分工作:Vite 只需要在瀏覽器請求源碼時進行轉換并按需提供源碼。根據情景動態導入代碼,即只在當前屏幕上實際使用時才會被處理。

image

image
瀏覽器支持

開發環境中:Vite需要在支持原生 ES 模塊動態導入的瀏覽器中使用。

生產環境中:默認支持的瀏覽器需要支持 通過腳本標簽來引入原生 ES 模塊 。可以通過官方插件 @vitejs/plugin-legacy 支持舊瀏覽器。

二. 項目搭建

1.環境準備

Vite需要Node.js版本 >=12.0.0
查看Node版本,如低于12.0.0 請升級

? node -v
? v16.1.0
2.創建項目
# 使用npm
? npm init @vitejs/a

# 安裝依賴
? npm install

# 啟動項目
? npm run dev
image

瀏覽器輸入地址后我們可以看到服務已啟動

image
3.Vite配置文件修改

圖中對比通過vue-cli創建的項目,我們可以發現index.html在項目最外層而不是在public文件夾內。這是有意而為之的:在開發期間Vite 是一個服務器，而index.html是該 Vite 項目的入口文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Vite將index.html視為源碼和模塊圖的一部分。Vite解析<script type="module" src="...">,這個標簽指向你的JavaScript源碼。

// 更多相關vite配置參考官網文檔:https://cn.vitejs.dev/config/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //項目根目錄（index.html 文件所在的位置）
  root : './src',
  //開發或生產環境服務的公共基礎路徑
  base : './',
  //開發模式 默認：'development'（開發模式），'production'（生產模式）
  mode : 'development',
  server : {
  
  }
})
4.集成路由 Vue Router

Vue Router是 Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。

# 安裝Vue Router4
? npm install vue-router@4

新建文件:src/arouter/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

在main.ts下引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')
5.集成狀態管理 Vuex

Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化。

# 安裝vuex
npm install vuex@next --save

新建文件src/strore/index.ts

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在main.ts下引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')
6.集成網絡請求工具 Axios
# 注:具體使用方式參考官網文檔
# 安裝Axios
npm install axios
7.集成代碼規范工具 Eslint

ESLint是一個開源的JavaScript代碼檢查工具,由 Nicholas C. Zakas 于2013年6月創建。代碼檢查是一種靜態的分析,常用于尋找有問題的模式或者代碼,并且不依賴于具體的編碼風格。

# 安裝 ESLint：
npm install eslint --save-dev
# 創建配置文件
# 這里推薦使用終端提示w完成配置操作
npx eslint --init
image

上圖大概意思為:

  1. How would you like to use ESLint? （你想如何使用 ESLint?）
    選擇To check syntax, find problems, and enforce code style（檢查語法、發現問題并強制執行代碼風格）
  2. What type of modules does your project use?（你的項目使用哪種類型的模塊?）
    選擇 JavaScript modules (import/export)
  3. Which framework does your project use? （你的項目使用哪種框架?）
    選擇 Vue.js
  4. Does your project use TypeScript?（你的項目是否使用 TypeScript？）

yes

  1. Where does your code run?（你的代碼在哪里運行?）
    選擇 Browser 和 Node
  2. How would you like to define a style for your project?（你想怎樣為你的項目定義風格？）
    選擇 Use a popular style guide（使用一種流行的風格指南）
  3. Which style guide do you want to follow?（你想遵循哪一種風格指南?）
    我們這里選擇 Airbnb.ESLint 為我們列出了三種社區流行的 JavaScript 風格指南，
    分別是 Airbnb、Standard、Google(這里根據個人喜好選擇吧...)
  4. What format do you want your config file to be in? (你的配置文件是使用什么格式的?)
    選擇JavaScript
  5. Would you like to install them now with npm?（你想現在就用 NPM 安裝它們嗎?）
    yes

完成上述操作后,會在根目錄下生成.eslintrc.js文件!

根據項目需求,我們也可以追加自定義ESLint規則

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};

至此,一個簡單的項目已經搭建完成,趕緊關注回復「Vite」獲取相關示例源碼哦~~
上述的工具也不是必須的,但是接入成熟的工具可以更有效的提高我們的開發效率和代碼質量,共勉。

原創不易,如文章對你有幫助,你的點贊、留言、分享就是大師兄寫下去的動力!

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容