小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Vite 从入门到精通 | 创建 Vue 项目

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

使用 Vite 创建 Vue3 项目

npm 方式

$ npm init @vitejs/app

✔ Project name: … vite-vue3
? Select a framework: › - Use arrow-keys. Return to submit.
   vanilla  # 不集成任何框架
❯  vue      # vue 框架
   react
   preact
   lit
   svelte
? Select a variant: › - Use arrow-keys. Return to submit.
❯   vue
    vue-ts
    
Done. Now run:

cd vite-vue3
npm install
npm run dev

或者

$ npm init vite <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev

推荐使用yarn 方式

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

安装 vue-jsx 支持

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

1.配置 vue-jsx 插件

vim vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入 jsx 依赖
import vueJsx from '@vitejs/plugin-vue-jsx'

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

2.测试

- 在 src 目录下创建 App.jsx

import { defineComponent } from "@vue/runtime-core";

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

- 修改 main.js

-- import App from './App.vue'
++ import App from './App'

- 启动项目

yarn dev

vue3 jsx依赖 配置成功

使用 Vite 创建 Vue2 项目

刚刚看到, 执行 npm init @vitejs/app 命令时并没有 vue2 的选项, 官方并没有支持

如何使用 vite 创建 vue2 项目呢?

使用第三方插件 underfin/vite-plugin-vue2

1.创建项目

npm init @vitejs/app
✔ Project name: … vite-vue2
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla
cd vite-vue2
touch vite.config.js

2.Usage

yarn add vite-plugin-vue2 -D

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
    plugins: [createVuePlugin(/*options*/)], 
}

3. 安装 vue

yarn add vue -S
yarn add vue-template-compiler -D

// package.json
"dependencies": {
    "vue": "^2.6.14"
 }

mkdir src
mv main.js ./src/main.js
cd src
vim App.vue
vim main.js
vim index.html

<!--App.vue-->
<template>
	<div> Hello Vite Vue2 </div>
</template>

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

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

<!--index.hmtl-->
-- <script type="module" src="/main.js"></script>
++ -- <script type="module" src="/src/main.js"></script>

4.项目启动

yarn dev

创建成功

Git 方式创建 vite-vue2 项目

# https://github.com/matt-auckland/vite-vue2-starter
git clone https://github.com/matt-auckland/vite-vue2-starter.git