vite 与 vue-cli

相比于 vue-cli ,vite 只支持 Vue3.x 的项目的创建，不是基于 webpack 的打包工具 运行速度比较快，比较小巧，实际开发中还是 vue-cli 使用比较多

vite的基本使用

下面使用vite来创建vue3的项目

  1. 初始化项目

    1
    npm init vite-app 项目名称

  2. 运行vue3的项目

    1
    2
    3
    cd 项目名称
    npm install
    npm run dev

vite 构建的项目结构

整体结构图

src目录结构

vite项目的运行流程

在工程化的项目中，vue要做的就是通过main.js 把 App.vue 渲染到 index.html 的指定取域中

其中：

  1. App.vue 用来编写待渲染的模板结构
  2. index.html 中需要预留一个el区域
  3. main.js 把 App.vue 渲染到 index.html 所预留的区域中

看一下main.js 中进行渲染的步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. 从vue中按需导入 createApp函数
// createApp函数的作用，是创建 Vue 的单页面应用程序实例
import { createApp } from 'vue'

// 2. 导入待渲染的 App 组件
import App from './App.vue'

// 3. 调用 createApp() 函数，返回值是“单页面应用程序的实例”，用常量 spa_app 进行接收，同时把App组件座位参数传给 createApp 函数，表示把App渲染 index.html 页面上
const spa_app = createApp(App)

// 4. 调用spa_app 实例的mount 方法，用来指定 vue实际要控制的区域
spa_app.mount('#app')