Vite项目创建

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>