1. Vue3概述
1.1 Vue3简介
2020年9月18日,Vue.js发布3.0版本,代号:One Piece。
1.2 vite简介
vite是新一代前端构建工具,官网地址:Vite中文网。
1.3 Vue2和Vue3区别
Vue2的API设计是Options(配置)风格的。
Vue3的API设计是Composition(组合)风格的。
2. 环境搭建
2.1 Node.js环境
# 检查node.js版本:
node -v
# 检查npm版本:
npm -v
2.2 基于vue-cli创建Vue3工程
(1)配置vue-cli环境
- 安装或者升级@vue/cli
npm install -g @vue/cli
- 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
(2)创建命令
npm install -g @vue/cli
(3)配置
(4)启动
cd vue_test
npm run serve
2.3 基于vite创建Vue3工程
(1)创建命令
npm create vue@latest
(2)具体配置
(3)安装配置
npm install
(4)运行
npm run dev
2.4 浏览器插件安装
vue_dev_tools.crx
vue3_dev_tools.crx