vue3-001-创建项目

134 阅读2分钟

1. pnpm create vue@latest

image.png

可选择对应的内置功能,这里全要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