一.vite的基本使用

vite是什么：官方文档

• 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
• 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。
• 所以：  在单纯学习vue3语法会使用它，后面做项目的时候我们还是使用vue-cli

vite基本使用

• 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
• 安装依赖 npm i 或者 yarn
• 启动项目 npm run dev 或者 yarn dev

二.创建vue应用

基本步骤：

• 在main.js中导入createApp函数
• 定义App.vue组件，导入main.js
• 使用createApp函数基于App.vue组件创建应用实例
• 挂载至index.html的#app容器 App.vue

<template>
  <div class="container">
    我是根组件
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

main.js

// 创建一个vue应用
// 1. 导入createApp函数
// 2. 编写一个根组件App.vue，导入进来
// 3. 基于根组件创建应用实例
// 4. 挂载到index.html的#app容器

import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')