视频地址

https://www.bilibili.com/video/BV1CN41167AC?p=3

开发环境

搭建 Vite 项目

参考官方文档：https://cn.vitejs.dev/guide/

• 先配置 npm 淘宝镜像，否则下载会非常慢
  npm install -g cnpm --registry=https://registry.npmmirror.com

• 新建文件夹 D:\Study-前端\Code\2023\

• 进入文件夹，地址栏输入 cmd，进入命令行模式
• 输入 npm create vite@latest
• 出现 Ok to proceed? (y)，输入 y
• 项目名称，? Project name: »，输入 SYT
• 包名称，? Package name: »，输入 syt
• ? Select a framework:，选择 Vue
• ? Select a variant: »，选择 TypeScript

D:\Study-前端\Code\2023>npm create vite@latest
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y) y
√ Project name: ... SYT
√ Package name: ... syt
√ Select a framework: » Vue
√ Select a variant: » TypeScript
Scaffolding project in D:\Study-前端\Code\2023\SYT...
Done. Now run:
  cd SYT
  npm install
  npm run dev

安装依赖

• 进入 D:\Study-前端\Code\2023\SYT>
• 输入 npm i

D:\Study-前端\Code\2023\SYT>npm i
added 42 packages in 2m

运行项目

• 进入 D:\Study-前端\Code\2023\SYT>
• 输入 npm run dev

  VITE v4.4.9  ready in 1454 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

• 访问 http://localhost:5173/
• 出现 Vite + Vue 界面

项目结构

• 使用 VSCode 打开 D:\Study-前端\Code\2023\SYT>

├── node_modules：存放下载的包
├── public
│   ├── vite.svg: 静态资源文件
├── src
│   ├── assets: 存放静态资源
│   │   └── vue.svg
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
│   │── style.css: 公共样式
│   │── vite-env.d.ts: 
├── .gitignore: git版本管制忽略的配置
├── index.html: 主页
├── package-lock.json：包版本控制文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── tsconfig.json:js 配置文件
├── tsconfig.node.json:js 配置文件
├── vite.config.js：脚手架配置文件

项目便捷配置

浏览器自动打开

找到 package.json 配置文件!

 "scripts": {
  "dev": "vite --open",
  "build": "vue-tsc && vite build",
  "preview": "vite preview"
 },

• 输入 npm run dev 后，浏览器自动打开 http://localhost:5173/

D:\Study-前端\Code\2023\SYT>npm run dev
> syt@0.0.0 dev
> vite --open
  VITE v4.4.9  ready in 1371 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

src 别名的配置

这个配置是解决项目中找资源频繁使用 ./，../，../../../ 之类的问题。

vite.config.ts

• 找到 vite.config.ts 配置文件

如果红色语法提示请安装@types/node
安装@types/node npm i @types/node
@types/node 是 TypeScript 的一个声明文件包，用于描述 Node.js 核心模块和常用的第三方库的类型信息

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入 node 提供内置模块 path,可以获取绝对路径
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
     "@": path.resolve(__dirname, 'src')
    }
   }
})

tsconfig.json

• 找到 tsconfig.json 配置文件,
• 找到配置项 compilerOptions 添加配置,
• 这一步的作用是让 IDE 可以对路径进行智能提示

 "baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  }

main.ts

如果使用 import App from '@/App.vue'，运行后能正常访问，说明配置成功！

//vue3 框架提供的 createApp 方法，可以用来创建应用实例方法
import { createApp } from 'vue'
import './style.css'
//引入根组件 App
// import App from './App.vue'
import App from '@/App.vue'
//利用 createApp 方法创建应用实例，且将应用实例挂在到挂载点上
createApp(App).mount('#app')