Vite 搭建 Vue2 項目（Vue2 + vue-router + vuex）

先讓我說幾句廢話。

在寫本文時 Vite 沒有提供 Vue2 的創建方式。

相信有些開發者還沒開始學 Vue3，但又想嚐嚐 Vite。那可以參考本文的進食方式。

如果心急的話，“0、簡介” 可以跳過。

0、簡介

在寫本文時，Vite 默認不提供 Vue2 項目的創建方式。

使用 Vite 創建出來的 Vue 項目，暫時都是 Vue3 的。

Vite 是構建工具的高階封裝。它的內部其實是 Rollup 。

Vite 是尤雨溪隨着 Vue3 正式版 一起發佈的一個工具。

最開始 Vite 是爲 Vue3 服務的一個工具，但隨着 Vite 2.0 發佈之後，Vite 就是一個獨立的構建工具了。

Vite 除了能搭建 Vue3 項目之外，還能搭建 react 等項目。

Vite 能搭建的項目包括：

• vanilla

• vanilla-ts

• vue

• vue-ts

• react

• react-ts

• preact

• preact-ts

• lit-element

• lit-element-ts

• svelte

• svelte-ts

更詳細的介紹請看

Vite官網（中文版）

Vite GitHub地址

1、初始化 Vue2 項目

在寫本文時，Vite 默認沒提供 Vue2 項目創建的選項。

我們可以使用 Vite 創建一個原生項目，然後再安裝 Vue2 的生態進行開發。

1.1、初始化項目

首先進入項目存放的地方，然後運行以下命令創建項目。

npm init vite@latest

如果是首次使用 Vite 的話，會詢問你是否繼續，這裏回覆 y 即可。

Ok to proceed?(y)

之後只需輸入項目名稱即可，我這裏新建的項目名爲：vite-vue2。

Project name: vite-vue2

完成以上步驟後，再選擇以下要新建的是什麼項目即可。

這裏選擇 vanilla 即可，隨後會追問選擇 原生 的還是 ts 的，根據自己需求選擇即可。

我這裏會選擇 原生 進行開發。

項目創建成功後，會出現 3 條提示命令。

# 【1】進入項目
cd vite-vue2

# 【2】初始化項目
npm install

# 【3】運行項目
npm run dev

注意： 第二步使用 npm install 初始化可能會出現一些小問題，這裏建議使用 yarn 初始化項目。

項目目錄如下所示

1.2、安裝 vite 對 vue2 支持的插件

要在 vite 裏運行 vue2 項目，需要安裝一個 vite 的插件：vite-plugin-vue2

npm install vite-plugin-vue2 --dev

如果 npm 安裝不了，可以用 cnpm 或者 yarn 。

要使用 vite 插件，需要在項目的根目錄創建 vite.config.js 文件。

在 vite.config.js 裏輸入以下代碼。

import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [createVuePlugin()]
}

引入 vite-plugin-vue2 插件，並用 Vite 提供的插件註冊方法來註冊。

需要注意，createVuePlugin() 是跟着括號的，是要執行的！

1.3、安裝 vue 依賴

使用以下命令安裝 vue2。

npm install vue -S
npm install vue-template-compiler

在寫本文時，通過 npm install vue 安裝 vue ，還是會裝回 2.x 版本的。

如果後面 vue3 全面更新了，需要安裝 vue2 的話，需要在以上命令加上版本號。

1.4、修改項目文件依賴關係

1.4.1、創建 src 目錄

在項目根目錄下創建 src 目錄。

然後把 main.js 移到 src 目錄裏。

1.4.2、修改 index.html

項目啓動後，入口文件是 index.html ，而 index.html 原本引入了 main.js ，所以也要修改一下 index.html 文件的指向。

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

1.4.3、創建 App.vue 文件

創建 App.vue 文件，並輸入以下代碼

<template>
  <div>Hello Vite Vue2</div>
</template>

1.4.4、修改 src/main.js

這一步的代碼就有點像使用 vue-cli 創建的項目裏的 main.js 的操作了。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

1.5、運行項目

經過之前幾步的配置，運行以下命令就可以把項目跑起來了。

npm run dev

1.6、打包

運行一下命令可以打包項目。

npm run build

打包出來的項目目錄名是：dist

2、安裝 vue-router

2.1、安裝

npm install vue-router

在寫本文時，使用以上命令安裝的 vue-router 是支持 Vue2 項目的。

如果以後該命令安裝的 vue-router 是支持 Vue3 的話，需要自行加一個版本號來約束。

2.2 新建路由目錄

2.2.1、創建路由表

在 src 目錄下創建 router 目錄，並在 router 目錄下創建 index.js 文件。

在 src/router/index.js 輸入以下代碼

2.2 新建路由目錄

2.2.1、創建路由表

在 src 目錄下創建 router 目錄，並在 router 目錄下創建 index.js 文件。

在 src/router/index.js 輸入以下代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' // 引入 Home頁面組件

// 註冊路由插件
Vue.use(VueRouter)

// 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

2.2.2、創建路由指向的頁面組件

在 src 目錄下創建 views 目錄，用來存放頁面組件。

在 src/views 目錄下創建2個頁面：Home.vue 和 About.vue

Home.vue 內容

<template>
  <div>
    Home
  </div>
</template>

About.vue 內容

<template>
  <div>
    About
  </div>
</template>

2.3 全局註冊

2.3.1、在 main.js 裏註冊

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

引入 router ，並且在 new Vue 時註冊一下。

2.3.2 創建路由跳轉標籤 並 展示

修改 App.vue 文件

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

使用 <router-link> 標籤定義跳轉地址。

使用 <router-view> 標籤展示內容。

3、安裝 vuex

3.1 安裝

npm install vuex --save

在寫本文時，使用以上命令安裝的 vuex 是支持 Vue2 項目的。

如果以後該命令安裝的 vuex 是支持 Vue3 的話，需要自行加一個版本號來約束。

3.2 新建vuex目錄

在 src 目錄下創建 store 目錄，並在 store 目錄下創建 index.js。

在 index.js 文件輸入以下代碼

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count(state) {
      return state.count
    }
  },
  mutations: {
    addCount(state, num) {
      state.count += num
    }
  },
  actions: {}
})

以上代碼，在 state 裏創建一個變量 count 用作計數器。

在 getters 裏提供一個方法獲取 count。

在 mutations 裏提供一個方法修改 count。

3.3 全局註冊

3.3.1 在 main.js 裏註冊

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

引入 store 並在 new Vue 時註冊。

3.3.2 在 Home.vue 裏使用

<template>
  <div>
    <h1>Home</h1>
    <div>count: {{ count }}</div>
    <button @click="addCount">+1</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    },
  },
  methods: {
    addCount() {
      this.$store.commit("addCount", 1);
    },
  },
};
</script>

4、參考

Vite 官方文檔

Vite 支持 Vue2 的插件：vite-plugin-vue2 文檔