在线运行环境
本地创建 Vue3 应用
前置条件：已安装 18.3 或更高版本的 Node.js
本文选用 pnpm 进行创建。
创建
pnpm create vue@latest
运行上面👆命令以后，安装并执行Vue 官方脚手架 。
Vue.js - The Progressive JavaScript Framework
✔ Project name: … v-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? › Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in /Users/***/Desktop/v-project...
Done. Now run:
cd v-project
pnpm install
pnpm format
pnpm dev
说明：
- Project name：项目名称
- Add TypeScript ： 是否增加 Ts
- Add JSX Support: 是否添加 JSX
- Add Vue Router for Single Page Application development: 是否添加路由
- Add Pinia for state management：是否增加 Pinia ( 全局状态管理工具 )
- Add Vitest for Unit Testing：增加 Vitest 进行单元测试
- Add an End-to-End Testing Solution： 端到端测试解决方案
- Add ESLint for code quality：是否添加 ESLint
- Add Prettier for code formatting: 是否添加代码格式化工具
运行项目
cd v-project
pnpm install
pnpm format
pnpm dev
说明：
- pnpm install：安装依赖
- pnpm format：通过 Prettier 工具对项目代码进行格式化
- pnpm dev：运行项目
更多命令请查看 pnpm 官网
运行效果如下：
当你准备将应用发布到生产环境时，请运行：
pnpm run build
项目代码结构
工具链
IDE插件
推荐使用的 IDE 是 VS Code，配合 Vue - Official 扩展 (之前是 Volar)。该插件提供了语法高亮、TypeScript 支持，以及模板内表达式与组件 props 的智能提示。
TIP：
Vue - Official 取代了我们之前为 Vue 2 提供的官方 VS Code 扩展 Vetur 。如果你之前已经安装了 Vetur，请确保在 Vue 3 的项目中禁用它。
浏览器开发者插件
Vue 的浏览器开发者插件使我们可以浏览一个 Vue 应用的组件树，查看各个组件的状态，追踪状态管理的事件，还可以进行组件性能分析。
代码规范
Vue 团队维护着 eslint-plugin-vue 项目，它是一个 ESLint 插件，会提供单文件组件相关规则的定义。
之前使用 Vue CLI 的用户可能习惯于通过 webpack loader 来配置规范检查器。然而，若基于 Vite 构建，我们一般推荐：
npm install -D eslint eslint-plugin-vue，然后遵照eslint-plugin-vue的指引进行配置。- 启用 ESLint IDE 插件，比如 ESLint for VS Code，然后你就可以在开发时获得规范检查器的反馈。这同时也避免了启动开发服务器时不必要的规范检查。
- 将 ESLint 格式检查作为一个生产构建的步骤，保证你可以在最终打包时获得完整的规范检查反馈。
- (可选) 启用类似 lint-staged 一类的工具在 git commit 提交时自动执行规范检查。
资料：
