使用Yarn + Vite + Vue3搭建前端项目_yarn vite

目录

一、Vite简介

二、准备工作

三、搭建方法

创建目录

创建Vue项目

构建Vue项目

代码结构

一、Vite简介

Vite是一个新型前端构建工具，启动快构建快速度惊人，开发体验比Webpack好得多，主要由两部分组成：

1. 一个开发服务器，它利用了现代浏览器的原生ES模块解析能力，可以实现非常快速的热更新(HMR)，从而大大加快了构建速度。

2. 一套构建指令，使用 Rollup 打包代码，在生产环境使用预配置可以将所有的模块预打包，生成高性能的静态资源，可以大大加快冷启动的速度。

官网：开始 | Vite 官方中文文档

二、准备工作

1.安装Nodejs Vite因为模块兼容性需要node.js版本16+，安装方法请移步：MacOS安装Node.js

2.安装Yarn，安装方法请移步：Yarn的安装和使用

三、搭建方法

创建目录

本地创建一个vite目录，用于存放Vite项目

mkdir vite

创建Vue项目

打开终端执行命令

yarn create vite

开始安装create-vite@4.4.1模块，Project name缺省是vite-project，按回车继续

选择framework，使用上下键选择Vue，按回车继续

可选TypeScript和JavaScript，会创建一个简单项目，为了定制化Vue项目，这里我们选择使用Customize with create-vue

 除了End-to-End Testing Solution(端到端测试方案)选了No，其他都选了Yes

构建Vue项目

依次执行如下命令：

cd vite-project //切换目录
yarn //安装依赖
yarn format //格式化代码
yarn dev //启动项目

浏览器输入http://localhost:5173，出现下图表示Vite+Vue3创建项目成功。

代码结构

使用VsCode+Volar扩展打开项目，代码结构如下： 

 主要文件说明

├── node_modules/                  // 所有第三方模块，包括Vue.js本身、Vue插件、第三方JS库、CSS框架，根据package.json下载依赖
├── publish/                       // 静态资源目录(如图片)
└── src/
    ├── assets/                    // 静态资源目录(css，font，img)
    ├── components/                // 公共组件目录
    ├── router/                    // 路由配置目录
    ├── stores/                    // 状态管理目录，vue3使用pinia代替vuex
    ├── views/                     // 页面组件目录
    ├── App.vue                    // 根组件，vue页面资源的首加载项
    ├── main.ts                    // 入口ts文件，初始化vue实例
├── .eslintrc.cjs                  // 检测js代码风格
├── .prettierrc.json               // 代码格式化配置
├── env.d.ts                       // 环境变量文件
├── index.html                     // 首页html
├── tsconfig.app.json              // 用于dom的TypeScript编译器配置文件
├── tsconfig.json                  // 总的TypeScript编译器配置文件
├── tsconfig.node.json             // 用于node环境的TypeScript编译器配置文件
├── tsconfig.vitest.json           // 用于vite测试的TypeScript编译器配置文件
├── vite.config.ts                 // Vite配置文件，用于配置Vite的选项和插件。
├── vitest.config.ts               // Vite测试配置文件
├── package.json                   // 管理vue所有环境依赖项
└── yarn.lock                      // yarn自动生成的锁定文件，用于确保在不同环境中安装相同版本的依赖项，不要手动编辑