Vite创建Vue2项目

注意：在 Vite创建项目 中讲到，Vite 官方对 Vue 的支持只针对于Vue3.x 版本，而对于 Vue2.x 是不支持的。使 Vite 支持 Vue2.x，是需要安装插件来实现 官方vue2插件

---

1.使用vite创建基础项目 创建方式

这里我使用的是npm（个人常用npm，无关其他）：

$ npm create vite@latest

2.输入项目名

按个人需求取即可，我这里随便叫一个vue2吧

? Project name:  vue2

3.选择框架

? Select a framework: » - Use arrow-keys. Return to submit.
>   vanilla // 原生js
    vue     // vue3
    react   // react
    preact  // 轻量化react框架
    lit     // 轻量级web组件
    svelte  // svelte框架

这里需要选择的是vanilla，因为选择vue直接创建的就是vue3项目

? Select a variant: >>Use arrow-keys. Return to submint.
>     vanilla
      vanilla-ts

如果你要用typescript的话就选着vanilla-ts

4.进入项目安装vue2插件

官方处理方式

$ cd vue2

$ npm install

$ npm install vite-plugin-vue2 -D

新建vite.config.js文件

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

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

5.安装vue

由于直接npm install vue安装的是最新的vue，即vue3，所以在安装vue的时候需要带上你所需的版本号，这里我用的是v2.6.14

$ npm install vue@2.6.14 -S

6.修改项目结构

1. 创建src文件夹
2. 将 main.js 移入src 文件夹中，并修改：

// main.js
import Vue from "vue";
import App from "./App.vue"

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

• 修改 index.html 中对 main.js 的引用路径：<script type="module" src="/src/main.js"></script>
• 在src文件中创建App.vue，并修改：

<template>
	<div>Vue 2</div>
</template>

7.启动项目

• 进入项目：cd vue2
• 安装依赖：npm install
• 运行项目：npm run dev 或 npx vite
• 打包项目：npm run build 或 npx vite build

---

结果

---

2022/5/18更新