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

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

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

2. 简单修改为：

10. 启动项目

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

启动速度极快：