携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 21 天，点击查看活动详情
vue3 学习1 - 项目初始化
start
- 一直说学习vue3，却一直没有动手，今天开始学习一下 vue3。
- 今天先来看看 vue3 项目的初始化。
- 编写时间 2022/08/18
项目初始化
1. 使用 vue-cli 创建
按照我们初始化 vue2项目的习惯，可以全局安装 vue-cli脚手架，通过vue create [项目名] 来初始化我们的项目。确保@vue/cli版本在4.5.0以上，初始化项目时，我们选择 vue3.0版本初始化。
官方文档：cli.vuejs.org/zh/guide/cr…
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create app
## 启动
cd app
npm run serve
2.使用 npm init vue@latest 命令创建
除了使用脚手架来安装项目，我翻阅了 vue3官方文档-快速上手： cn.vuejs.org/guide/quick…
在nodejs版本支持的情况下，可以直接使用 npm init vue@latest 的命令来创建项目。（需要注意的是，通过这种方式创建的vue3项目，构建工具为 vite）
# 注意 NodeJS版本 >=15.0
## 创建
npm init vue@latest
## 启动
cd app
npm run serve
初次体验的感受
webpack和vite
查看了一下 vue-cli 和 npm init vue@latest 创建的项目依赖。vue-cli 构建的项目打包工具依旧是 webpack，npm init 创建的则是 vite.
- 就给人初体验来说，vite的冷启动很快，开发服务几乎秒开。
对比 vue2 和 vue3 项目的差异
于此同时，我对比了vue3项目和vue2项目初始模板的基本结构和代码。
就初始模板而言，main.js，差距是最大的。使用 Vue.js的方式由 vue2 的 new 的形式替换成了 createApp()的形式;
vue2 main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: (h) => h(App),
}).$mount('#app')
vue3 main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
其他
其他vue3新增的语法暂未发现，后期开始学习。
简单了解一下vite
vite 官网：vitejs.cn
- 什么是 vite？—— 新一代前端构建工具。
- 优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
- 传统构建 与 vite 构建对比图
疑问
问题1：
npm init vue@latest 原来 npm init 还可以这样使用？
查看vue-cli的官方文档的时候，有这么一句话：
⚠️ Vue CLI 现已处于维护模式!
现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。
问题2：
研究一下 vue3 中的 createApp
问题3：
vite 深入了解一下？
解决疑问
问题1：
待补充...
问题2：
待补充...
问题3：
待补充...
end
- 加油
