vue3迁移笔记(1)使用vite创建新项目

185 阅读1分钟

背景

vue2年底就要停止维护了,准备将自建博客从vue2迁移到vue3。目前初步的思路是新建一个vue3项目再逐步将组件迁移上去,顺便学习一下。

环境

npm版本需要16.0或更高。我使用的是目前最新的LTS版本20.10.x

创建步骤

使用npm init在当前路径下生成一个HelloWorld项目。

npm init vite-app new_demo
// 初次使用控制台提示需要安装创建工具
Need to install the following packages:
create-vite-app@1.21.0
Ok to proceed? (y) y

当前路径下会出现一个新的new_demo文件夹,里面包含项目文件。

// 安装依赖
npm install
// 顺手修复一下vulnerabilities
npm audit fix --force

// 启动项目
npm run dev

浏览器打开发现有错误

屏幕截图 2023-12-01 174903.png

需要安装提示的插件提供vue支持

# 安装并添加到开发依赖
npm install @vitejs/plugin-vue -D

尝试启动项目,报错依然存在,还需要在项目中加入Vite的配置文件。Vite默认解析在项目根目录下的vite.config.js文件。我们在项目的根目录新建一个这样的文件,然后将以下内容写入该文件。

// vite.config.js
import {defineConfig} from "vite";
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    // 配置选项
    plugins: [vue()],
})

再次尝试可以发现项目在5173端口上启动了。

屏幕截图 2023-12-01 184555.png

我们观察到它的速度非常之快,尤其是热修改的生效,这得益于它区别于vue-cli的开发环境加载机制。

Quote

vite.config.js常用配置 - 掘金 (juejin.cn)

配置 Vite | Vite 官方中文文档 (vitejs.dev)