Vite 2.0 + Tailwind CSS 留言板项目改装为 Vue 3.0
Vue 和 React 的出现,让前端开发的效率有了质的飞跃,我们不用再手动用 JavaScript 去操作 DOM 了,而是借助这些框架帮助我们管理状态和管理 DOM 结构。这期视频我们就把上期使用纯 HTML 编写的页面,改装为 Vue 3.0 的项目,借此也演示一下如何把一个 Vite 2.0 的 html 项目,扩展为 Vue 3.0 的项目。
安装 Vue3.0 依赖
Vite 2.0 创建的 HTML 项目默认是不支持 Vue 的,我们需要安装 Vue 3.0 依赖和插件,使用 yarn add -D @vitejs/plugin-vue @vue/compiler-sfc vue@next
命令:
yarn add -D @vitejs/plugin-vue @vue/compiler-sfc vue@next
这里使用 -D,把这些依赖安装为开发依赖,分别安装了 Vite 的 vue 插件、它依赖的 compiler-sfc,还有 vue 3.0 库。
配置 vite.config.js
在安装完依赖后,我们需要配置 vite,让它使用 vue 插件。首先创建一个 vite.config.js 文件,它是 vite 可以识别的配置文件:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
});
在里面:
- 从 vite 库里导入 defineConfig 函数,用于添加插件。
- 之后从 "@vitejs/plugin-vue" 中导入 vue 插件。
- 默认导出 defineConfig() 的返回值。
- 在函数参数中,给它传递一个配置对象,设置 plugins 属性为一个数组,把调用 vue() 函数的结果放到数组中。
- 这样就配置好了 vue 3.0 的环境。
安装 ESLint
我们还可以安装 ESLint 来帮我们规范化代码,这一步是可选的,如果你对代码的风格要求比较高,可以参考这个步骤进行安装。 使用 yarn 安装 eslint 和 eslint-plugin-vue 这两个插件,同样是使用 -D,添加到开发依赖中:
yarn add -D eslint eslint-plugin-vue