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>