当前位置：首页 > article >正文

尚硅谷Vue3入门到实战 —— 01 创建 VUe3工程

article 2024/12/29 10:17:08

创建 Vue3 工程

基于 vue-cli 创建

备注：目前 vue-cli 已处于维护模式，官方推荐基于 Vite 创建项目。

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli 
npm install -g @vue/cli

## 执行创建命令
vue create vue_test

##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x

## 启动
cd vue_test
npm run serve

基于 vite 构建（推荐）

vite 是新一代前端构建工具（和 webPack 功能相同），vite 的优势如下：

轻量快速的热重载（HMR），能够实现极速的服务启动；
对 TypeScript、JSX、CSS 等支持开箱即用；
真正的按需编译，不再等待整个应用编译完成；
webPack 构建与 vite 构建对比如下：

第一个图是 webPack 的构建流程，从 entry 入口开始，先分析路由，路由分析之后分析每一个模块，分析完毕之后使用 Bundle 进行处理，最后提醒我们 Server ready，即工程启动；可以看到 webpack 主要耗时在 route 分析和 module 分析，如果我们项目的路由和模块特别多，使用 webPack 构建会非常慢；

第二个图是 vite 的构建流程，一开始就提示用户服务准备完毕，然后根据用户当前想跳转的 route 和 module 进行动态构建，用户当前没有观看的 route 和 module 不会马上构建（webPack 中是全部 route 和 module 构建完毕之后才提示 server ready），所以说 vite 可以实现极速的服务启动；

具体操作如下（点击查看官方文档）

## 1. 创建命令
npm create vue@latest

## 2. 具体配置
## 配置项目名称
✔ Project name: vue3_test
## 是否添加 TypeScript 支持
✔ Add TypeScript? Yes
## 是否添加 JSX 支持
✔ Add JSX Support? No
## 是否添加路由环境
✔ Add Vue Router for Single Page Application development? No
## 是否添加 pinia 环境
✔ Add Pinia for state management? No
## 是否添加单元测试
✔ Add Vitest for Unit testing? No
## 是否添加端到端测试方案
✔ Add an End-to-End Testing Solution? No
## 是否添加 ESLint 语法检查
✔ Add ESLint for code quality? Yes
## 是否添加 Prettier 代码格式化
✔ Add Prettier for code formatting? No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

创建完毕后，使用 vscode 打开这个文件：

在这里插入图片描述

首先打开 .vscode 文件夹，里面是一个 .json 文件，这里面存放的是配置的插件信息：

在这里插入图片描述

public 文件夹是脚手架的根目录，该文件夹中只有一个页签图标：
src 文件夹是我们开发中常用的，主要编写 js/ts、css、vue 代码；
.gitignore: 忽略git提交的文件
env.d.ts：如果没有使用 npm i 安装依赖，直接打开该文件会有红线报错，所以我们使用 npm i 安装依赖之后，关闭该文件夹然后重新打开即可处理红线报错；
- /// <reference types="vite/client" /> 用于在 TypeScript 文件中引用其他文件的类型声明。具体来说，这行代码的作用是告诉 TypeScript 编译器引用 Vite 提供的类型声明文件，以便在当前文件中使用这些类型；
- 如果我们把 /// <reference types="vite/client" /> 删除，当创建一个 .txt 文件的时候，我们使用 import 引入 .txt 中的信息的时候会有报错：
index.html：项目入口文件，会使用 src/main.ts 文件；