小兔鲜儿PC前台-开发文档

# Vite 基础

img

# 概述

# 官方文档

Vite 官方文档：⚓https://cn.vitejs.dev/ (opens new window)

# 简介

  • Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet")是一种新型前端构建工具。

# 为什么选 Vite ？

# 传统方式

  • 基于打包器的方式启动，必须优先抓取并构建你的整个应用，然后才能提供服务。
  • 更新速度会随着应用体积增长而直线下降。

基于打包器的开发服务器

# Vite 方式

  • Vite 以 原生 ESM (opens new window) 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
  • Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
  • 根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

基于 ESM 的开发服务器

问题小结:

  • Vite 是否需要先打包才能提供服务？

温馨提示：

  • Vite 的入口文件是 index.html，先启动服务，通过 http 请求加载源码。
  • WebPack 的入口文件是 js 文件，根据入口 js 文件依赖打包后，再启动服务。

# Vite 优势

  • 💡 极速的服务启动，使用原生 ESM 文件，无需打包
  • ⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）
  • 🛠️丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
  • 📦等等

# 搭建第一个 Vite 项目

兼容性注意

Vite 需要 Node.js (opens new window) 版本 >= 12.0.0，建议安装 14.x 版本 NodeJS。

# Vite项目构建命令

使用 NPM:

npm create vite

使用 Yarn:

yarn create vite

然后按照提示操作即可！

image-20220207132431594

image-20220207132613985

image-20220207132710628

image-20220207132329123

# 启动项目

安装依赖

npm install

启动项目

npm run dev

image-20220207133606278

浏览器打开 http://localhost:3000/ (opens new window)，如上图所示，表示 Vue3 + TypeScript + Vite 简单的项目骨架搭建完毕。

# 模板命令(自行了解)

还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。

例如，要构建一个 Vite + Vue + Ts 项目，运行:

# npm 6.x
npm create vite my-vue-ts-app --template vue-ts

# yarn
yarn create vite my-vue-ts-app --template vue-ts

# 其他命令行

下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

# Vite 项目目录

# vue-ts 目录结构

├── .vscode                        // VsCode 配置目录
├── public/
└── src/
    ├── assets/                    // 静态资源目录
    ├── components/                // 公共组件目录
    ├── App.vue                    // 全局根组件
    ├── main.ts                    // Vue 项目入口
    ├── env.d.ts
├── index.html                     // Vite 入口文件
├── tsconfig.json                  // TS 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json

# 🚀 Vite 进阶

🧐 项目阶段再讲

# 项目配置参考

  • 项目阶段讲解
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
// JSX支持：https://cn.vitejs.dev/plugins/#vitejsplugin-vue-jsx
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  css: {
    // CSS 预处理器：https://cn.vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      scss: {
        // 配置全局scss变量
        additionalData: `@import '@/styles/variables.scss';`
      }
    }
  },
  resolve: {
    // 路径别名
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    open: true, // 设置服务启动时是否自动打开浏览器
    port: 8080, // 按需设置服务启动端口号
    cors: true  // 允许跨域
  }
})