pracytice

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

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 Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

├─node_modules           -- 项目依赖文件夹
├─public                 -- 放置静态资源文件
├─src                    -- 根目录文件夹放置项目文件
|  ├─assests             -- 静态资源文件夹
|  ├─components          -- 公共组件文件夹
|  ├─pages               -- 页面文件夹
|  |  ├─header                  -- 头部文件夹
|  |  ├─content                 -- 内容文件夹 
|  |  ├─footer                  -- 页脚文件夹
|  ├─plugins             -- 插件文件夹
|  ├─router              -- 路由文件夹
|  ├─stores              -- pinia文件夹
|  ├─style               -- 公共样式文件夹
|  ├─App.vue             -- 根组件
|  ├─main.ts             -- 入口文件
├─.gitignore             -- git忽略文件
├─env.d.ts               -- TypeScript 编译器可以识别 TypeScript 类型声明文件
├─index.html             -- 项目入口文件
├─package-lock.json      -- 依赖包的锁定文件
├─package.json           -- 项目依赖包
├─README.md              -- 项目说明
├─tsconfig.app.json      -- 对 TypeScript 配置文件进行扩展，并覆盖
├─tsconfig.json          -- Typescript配置文件
├─tsconfig.node.json     -- 对 TypeScript 配置文件进行扩展，并覆盖
├─vite.config.ts         -- Vite配置文件