vue项目创建安装

vite和vue-cli 区别

上课案例

老师项目是用vite创建项目：安装vite—创建vite项目

1、文档介绍

、搭建 Vue 项目
1、Vite 介绍
Vite 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
官网：https://cn.vitejs.dev/
2、Vite 安装
# 1、安装vite脚手架，全局安装
// yarn
yarn global add vite
// npm
npm install -g vite
# 安装完成后，需要配置环境变量，根据自己的nodejs目录进行配置路径
我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
D:\Program Files\nodejs\node_global\
3、Vite 升级
# yarn
yarn global upgrade --latest vite
# npm
npm update -g vite
4、Vite 卸载
# yarn
yarn global remove vite
# npm
npm uninstall vite -g
5、Vite 创建 Vue 项目
# 1、创建一个项目
npm init vue@latest
# 2、需要安装create-vue@3.3.4吗？
Need to install the following packages:
  create-vue@3.3.4
Ok to proceed? (y)
# 3、项目名称
Project name：
# 4、是否添加TypeScript
Add TypeScript?
# 5、是否添加JSC支持
# 5.1、JSX即JavaScript XML，是React发明的一种JavaScript的语法扩展，允许 HTML 与 JavaScript 的混写；JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。
Add JSX Support?
# 6、是否为单页应用程序开发添加Vue Router路由管理组件
Add Vue Router for Single Page Application development?
# 7、是否添加Pinia组件来进行状态管理
Add Pinia for state management?
# 8、是否添加Vitest来进行单元测试
Add Vitest for Unit Testing?
# 9、是否添加Cypress来进行单元测试和端到端测试
Add Cypress for both Unit and End-to-End testing?
# 10、是否添加ESLint来进行代码质量检查
Add ESLint for code quality?
6、运行项目
参见图一
# 1、进入目录
cd vite
# 2、安装模块
没有图二才执行这个语句
yarn install   或者 npm install  
# 3、启动项目
# 3.1、yarn
yarn dev       或者 npm dev 
# 3.2、npm
npm run dev