1. pnpm create vue@latest
可选择对应的内置功能,这里全要a
1.1 JSX 简介
JSX 是一种 JavaScript 的语法扩展,它看起来很像 XML 或 HTML,允许在 JavaScript 代码中直接编写类似 XML 的结构。它并不是标准的 JavaScript 语法,需要通过特定的编译器(如 Babel)将其转换为纯 JavaScript 代码。例如:
const element = <h1>Hello, world!</h1>;
1.2 端到端测试
End-to-End Testing,简称 E2E 测试。端到端测试是一种模拟真实用户操作,从应用程序的起始端(如用户打开浏览器)到结束端(如完成一次购物、提交表单等操作)对整个应用流程进行全面测试的方法。在 Vue 3 项目中,就是模拟用户在浏览器中与 Vue 应用进行交互,验证应用的各个功能模块是否能协同工作,确保整个应用在真实场景下的正确性和稳定性。
这里默认使用可以选择Playwright、Cypress、Nightwatch,这里选择Cypress,简单易用,基本需求达标。
2. 初始化项目
-- 1. 下载依赖性 安装对应组件
pnpm install
-- 项目依赖
dependencies:
+ pinia 3.0.1 --状态管理
+ vue 3.5.13 --稳定版依赖vue
+ vue-router 4.5.0 --单页面应用开发
-- 开发依赖
devDependencies:
+ @tsconfig/node22 22.0.0
+ @types/jsdom 21.1.7
+ @types/node 22.13.10
+ @vitejs/plugin-vue 5.2.1
+ @vitejs/plugin-vue-jsx 4.1.1
+ @vitest/eslint-plugin 1.1.36
+ vite-plugin-vue-devtools 7.7.2
+ vitest 3.0.8
+ vue-tsc 2.2.8
-- 2. 美化代码(默认已经处理过)
pnpm format
-- 3. 初始化git
git init && git add -A && git commit -m "initial commit"
-- 4. 本地代码绑定到码云
git remote add origin https://gitee.com/your_username/your_repository.git
-- https协议更改为ssh协议
git remote set-url origin git@github.com:user/repo.git
-- 或者先删除
git remote remove origin
-- 查看远程地址
git remote -v
-- 5. 指定默认拉取推送分支
git branch --set-upstream-to=origin/master master
git push --set-upstream origin master
-- 6. 拉取&推送
-- 第一次允许合并两个仓库的历史记录
git pull --allow-unrelated-histories
-- 正常拉取
git pull
git push
-- 7. 运行本地开发环境
pnpm dev
VITE v6.2.1 ready in 7034 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜ press h + enter to show help
h
Shortcuts
press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit