使用vite搭建vue3.0项目

相关文档

最近比较忙，月未抽个空…

vue3中文文档

Vite

vite.js中文网

搭建vue3项目方式

搭建vue3 有两种主要方式：

1. 使用@vue/cli搭建

• 创建项目 vue create project-name
• 根据提示操作， 但要注意vue版本

2. 使用vite搭建

• 下面将介绍

使用vite搭建vue项目

搭建第一个vite项目

注意： nodejs版本需要>=12.0.0

搭建方式

• 通过在vscode中，可以使用 Vite 快速构建 Vue 项目
• 使用NPM

npm init @vitejs/app

• 使用Yarn

yarn create @vitejs/app

• 还可以使用附加命令选择指定的模板

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

安装步骤

• 这里使用npm方式安装
• 按提示操作， 选择项目名称 及 模板

• 选择使用的编程语言

• 按照以下提示进入项目、安装依赖及运行

• 第一个vite项目就搭建好了。

浏览器检查不到vue?

• 需要更新devtools 戳我
• chrome 更新扩展程序

打包后运行项目空白？

• 因路径原因，需要配置vite.config.js文件中base路径

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    base: './',
});