This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
See Vite Configuration Reference.
确保你已经全局安装了 Node.js 和 npm / yarn,并且版本满足 Vue3 项目需求。node 版本 16+即可。
npm install --g yarn
- 安装 Node.js
- 访问 Node.js 官方网站(https://nodejs.org/en/download/) 来进行下载。
- 确认安装成功后,通过命令行
node -v
来检查 Node.js 和 npm 的版本信息。
- 克隆项目到本地
在项目根目录下使用 cmd 终端 or vscode 编辑器终端进行初始化依赖安装、启动、打包。
npm install / yarn install //在此建议使用yarn进行安装
npm run dev / yarn run dev //在此建议使用yarn进行启动
npm run build
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
npm run test:e2e:dev
This runs the end-to-end tests against the Vite development server. It is much faster than the production build.
But it's still recommended to test the production build with test:e2e
before deploying (e.g. in CI environments):
npm run build
npm run test:e2e
Lint with ESLint
npm run lint
commit your code use pnpm commit