Uso básico de Vite
contenido
Es una herramienta de construcción y desarrollo front-end de próxima generación, la actualización en caliente, el empaquetado y la construcción son más rápidos, pero la ecología circundante actual no es tan madura como Webpack, por lo que se recomienda usar Webpack en el desarrollo real.
Pero en lo que respecta al aprendizaje de la sintaxis de Vue3, podemos usar el Vite más ligero.
cómo construir
# 注意 Node 版本要 12 以上
# yarn create vite-app + 项目名称
npm init vite-app + 项目名称
cd 项目名称
npm install
npm run dev-
Paquete web: todos los módulos se compilarán y empaquetarán por adelantado, independientemente de si el módulo se usa o no. A medida que el proyecto crece, la velocidad de inicio del empaque será naturalmente cada vez más lenta.
-
Vite: abrir un servicio al instante no compila todos los archivos primero. Cuando el navegador usa un archivo, el servicio Vite recibirá la solicitud y la compilará para responder al cliente.
paso
// 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>