第二章、Vue3高级

目录

• 九、VueCLI和Vite
  • 1、VueCLI安装和使用
  • 2、Vite安装和使用
  • 3、Vite脚手架工具

九、VueCLI和Vite

1、VueCLI安装和使用

• 安装

# 安装脚手架
npm i @vue/cli -g
# 更新脚手架
npm update @vue/cli -g
# 创建项目
vue create 项目的名称

• 项目的目录结构

文件或目录	作用
.browserslistrc	设置适配浏览器的范围

• vue-cli-service源码阅读

* vue-cli-service：
  (node_modules/@vue/cli-service/bin/vue-cli-service.js:14)
* webpack：
  (node_modules/@vue/cli-service/lib/commands/serve.js:163)
* vue.config.js：
  (node_modules/@vue/cli-service/lib/Service.js:304)

2、Vite安装和使用

• 安装

npm i -D vite

• vite的理解

* 项目目录下执行vite命令，vite会起一个服务，供客户端请求项目目录下的资源，
      - webpack-dev-server（express）
      - vite1（koa）
      - vite2（connect）
* 对于js文件，因为现在的浏览器已经支持了ES6标准（ESModule代码），
  所以在开发阶段其实并不需要构建工具的参与，
  但在打包阶段需要将ES6转成ES5，所以需要构建工具的参与
* 对于其他文件，vite会对这些文件做一个简单的转化（ESModule代码），
  浏览器请求这些文件的时候，vite服务会对这些请求做请求转发，
  转发到转化后的ESModule代码并返回

• vite + postcss-preset-env

##################
# // 配置（postcss.config.js）
# module.exports = {
#     plugins: [
#         require("postcss-preset-env")
#     ]
# }
##################
npm i -D postcss-preset-env

• vite + sass

npm i -D sass

• vite + ts

默认支持

• vite + vue

npm i -S vue@next
##################
# // vue3单文件组件支持
# @vitejs/plugin-vue
# // vue3 jsx支持
# @vitejs/plugin-vue-jsx
# // vue2支持
# underfin/vite-plugin-vue2
##################
##################
# // 安装：npm i -D @vitejs/plugin-vue
# // 安装：npm i -D @vue/compiler-sfc（测试结果并不需要）
# // 配置（vite.config.js）
# import {defineConfig} from "vite";
# import vue from "@vitejs/plugin-vue"
# 
# export default defineConfig({
#     plugins: [vue()]
# })
##################

• vite预打包

vite会对node_modules下项目依赖的模块做预打包，预打包目录node_modules/.vite

• vite的命令

# 开发
npx vite
# 打包
npx vite build
# 打包后预览
npx vite preview

• vite基于ESBuild

* ESBuild使用Go语言编写，可以直接转换成机器代码，而无需经过字节码
* ESBuild对比babel，具有超快的构建速度，并且不需要缓存

3、Vite脚手架工具

• 安装

# 相当于：npm init @vitejs/app
npm i -g @vitejs/create-app
create-app 项目名