背景
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
浏览器打开发现有错误
需要安装提示的插件提供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端口上启动了。
我们观察到它的速度非常之快,尤其是热修改的生效,这得益于它区别于vue-cli的开发环境加载机制。