Vite创建Vue2项目

文章目录

• 1. 输入项目名称
• 2. 选择框架
• 3. 选择不同
• 4. 项目创建完成
• 5. 项目结构
• 6. 安装插件
• 7. 使用插件
• 8. 安装vue
• 9. 修改项目结构
• 10. 启动项目

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

---

Vite 需要 Node.js 版本 >= 12.0.0。（node -v 查看自己当前的node版本）

• 使用 yarn：yarn create @vitejs/app
• 使用 npm：npm init @vitejs/app

1. 输入项目名称

这里输入我们的项目名称：vite-vue2

2. 选择框架

这里我们不需要任何框架集成，选择：vanilla

• vanilla：原生js，没有任何框架集成
• vue：vue3框架，只支持vue3
• react：react框架
• preact：轻量化react框架
• lit-element：轻量级web组件
• svelte：svelte框架

3. 选择不同

这里我们选择：vanilla

4. 项目创建完成

cd vite-vue2
npm install

5. 项目结构

项目结构非常简单：

6. 安装插件

使 Vite 支持 Vue2.x，是需要安装插件来实现，官方文档

• 使用 yarn：yarn add vite-plugin-vue2 -D
• 使用 npm：npm install vite-plugin-vue2 -D

7. 使用插件

创建配置文件vite.config.js

const { createVuePlugin } = require('vite-plugin-vue2')

module.exports = {
    plugins: [createVuePlugin( /*options*/ )],
}

8. 安装vue

• 使用 yarn：yarn add vue -S
• 使用 npm：npm install vue -S

当前我安装的版本为："vue": "^2.6.14"

9. 修改项目结构

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();
   

3. 修改 index.html 中对 main.js 的引用路径：<script type="module" src="/src/main.js"></script>

4. 在src文件中创建 App.vue，并修改：

   <template>
   	<div>Hello Vue 2 + Vite</div>
   </template>
   

5. 简单修改为：
   

10. 启动项目

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

启动速度极快：