通過Vite2.0建立前端項目（Vue3、Vue2、React）

傳送門

一、 Vite 建立 Vue3 項目

• 打開 cmd 運作 npm init @vitejs/app

  

  

• 項目目錄檔案及其分類

  

• package.json 檔案内容

  

在 Vite 中是不支援 eslink 文法校驗的，需要自己配置。

• npm run dev 啟動項目 此時就已經通過Vite2.0來曾經項目成功。

補充：項目中三個檔案（index.html、main.js、App.vue）的關系

是以在 Vite2 搭建的項目中，index.html 是必須存在的，不能删除。

接下來，在 vue3 中是支援 Jsx 開發模式的，而在上面的配置中是不支援 Jsx 的開發模式

是以我們是需要自己手動去下載下傳Vite 的插件及配置！！！！

這裡補充一點：在下載下傳 Vite 的插件時官方建議是使用 yarn 來下載下傳不會造成不必要的麻煩。

如何安裝 yarn 呢 ？？？

很簡單，打開 cmd 輸入指令全局安裝 yarn：npm i -g yarn

一切準備完成後，進入到項目根目錄，

• 下載下傳插件 @vitejs/plugin-vue-jsx

yarn add @vitejs/plugin-vue-jsx -D

此時可能會報一個錯誤

解決方法 親測有效

• 配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from "@vitejs/plugin-vue-jsx"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()]
})
           

• 修改項目目錄及相關檔案

  删除 App.vue 檔案，并且在App.vue 的目錄下建立 App.jsx 檔案，修改main.js 中的 App的引入路徑，将 App.jsx 引入即可。

• 此時項目就已經配置完成

可以将下面的内容添加到 App.jsx 中，并且啟動項目（npm run dev）

import { defineComponent } from "vue";

export default defineComponent({
    setup() {
        return () => {
            return <div>Hello Vue3 Jsx</div>
        };
    },
});
           

二、 Vite 建立 Vue2 項目

補充：Vite2 沒有官方插件來直接支援 Vue2，而 Vue3 是有官方提供的插件來進行安裝的如第一點。 我們需要自己手動配置

我們可以下載下傳插件：vite-plugin-vue2 來使 Vue2 可以使用 Vite

官方連結

• 建立項目 npm init @vitejs/app

之前，我們建立Vue 項目時是使用 Vue-cli 腳手架來建立項目的，此時我們不能使用這種方式。

選擇建立的項目類型時不能選擇 Vue， 此時的 Vue 是版本3，并不是版本2

應該選擇 vanilla （沒有任何第三方架構）

• 下載下傳 vue 插件

yarn add vue -S

• 下載下傳 vite-plugin-vue2

yarn add vite-plugin-vue2 -D

• 配置 vite.vonfig.js

import { creatVuePlugin } from "vite-plugin-vue2"
export default {
    plugins: [creatVuePlugin()],
}
           

接下就修改項目目錄，使其跟 Vue-cli 建立的項目目錄一緻

修改 index.html

添加 App.vue

<template>
    <div>
        hello vue2
    </div>
</template>
           

修改 main.html

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

new Vue({
  el: "#app",
  render: (h) => h(App),
}).$mount();
           

三、 Vite 建立 React 項目

這個就簡單多了，一句指令解決！！

npm init @vitejs/app

npm run dev 啟動項目，完成！！！！

歡迎通路我的個人部落格