【Vue】Vue3基础

松垮的屁兜

已于 2024-06-28 10:05:55 修改

阅读量396

点赞数 8

文章标签： vue.js 前端

于 2024-06-28 10:04:56 首次发布

本文链接：https://blog.csdn.net/weixin_38517665/article/details/140015039

版权

VUE3基础

1、简介

2、创建工程

2.1 基于vue-cli创建（脚手架webpack）

! 目前 vue-c1i 已处于维护模式，官方推荐基于 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)
....

2.2 基于vite创建（推荐）

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

## 2、具体配置
## 项目名称
V Project name: 名称（小写、数字、下划线）
## 是否添加TypeScript支持
V Add TypeScript? Yes
## 是否添加JSX支持
V Add jsx support? No
## 是否添加路由环境
V Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
V Add Pinia for state management? No
## 是否添加单元测试
V Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
V Add an End-to-End Testing Solution? ” No
## 是否添加ESLint语法检查
V Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
V Add Prettier for code formatting? No
....

2.3 目录结构

public 脚手架
src 源代码文件
main.js
App.vue
components 组件
assets
env.d.ts 飘红时执行npm -i （安装依赖，node_modules）
index.html 入口文件
package-lock.json 包管理文件
package.json 包管理文件
vite.config.ts 工程的配置文件