Vite基本使用
内容
是下一代前端开发与构建工具，热更新、打包构建速度更快，但目前周边生态还不如Webpack成熟，所以实际开发中还是建议使用Webpack。
但目前就学习Vue3 语法来说，我们可以使用更轻量级的Vite。
如何构建
# 注意 Node 版本要 12 以上
# yarn create vite-app + 项目名称
npm init vite-app + 项目名称
cd 项目名称
npm install
npm run dev-
Webpack：会将所有模块提前编译、打包，不管这个模块是否被用到，随着项目越来越大，打包启动速度自然越来越慢。
-
Vite：瞬间开启一个服务，并不会先编译所有文件，当浏览器用到某个文件时，Vite 服务会收到请求然后编译后响应到客户端。
步骤
// 1. 导入 createApp 函数，不再是曾经的 Vue 了
// 2. 编写一个根组件 App.vue，导入进来
// 3. 基于根组件创建应用实例，类似 Vue2 的 vm，但比 vm 更轻量
// 4. 挂载到 index.html 的 #app 容器
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
// Vue2: new Vue()、new VueRouter()、new Vuex.Store()
// Vue3: createApp()、createRouter()、createStore()<template>
<div class="container">我是根组件</div>
</template>
<script>
export default {
name: 'App'
}
</script>