| | |
|---|
| | | # basic-vue3-template |
|---|
| | | # vue3-project-template |
|---|
| | | |
|---|
| | | This template should help get you started developing with Vue 3 in Vite. |
|---|
| | | Vue3 + TypeScript + SCSS + Element Plus 项目模板 |
|---|
| | | |
|---|
| | | ## Recommended IDE Setup |
|---|
| | | ## 推荐 IDE 设置 |
|---|
| | | |
|---|
| | | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
|---|
| | | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and |
|---|
| | | disable |
|---|
| | | Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
|---|
| | | |
|---|
| | | ## 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 [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) 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](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: |
|---|
| | | |
|---|
| | | 1. Disable the built-in TypeScript Extension |
|---|
| | | 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette |
|---|
| | | 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` |
|---|
| | | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. |
|---|
| | | |
|---|
| | | ## Customize configuration |
|---|
| | | |
|---|
| | | See [Vite Configuration Reference](https://vitejs.dev/config/). |
|---|
| | | |
|---|
| | | ## Project Setup |
|---|
| | | ## 项目初始化 |
|---|
| | | |
|---|
| | | ```sh |
|---|
| | | npm install |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Compile and Hot-Reload for Development |
|---|
| | | ### 启动开发模式 |
|---|
| | | |
|---|
| | | ```sh |
|---|
| | | npm run dev |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Type-Check, Compile and Minify for Production |
|---|
| | | ## 其他能力 |
|---|
| | | |
|---|
| | | ```sh |
|---|
| | | npm run build |
|---|
| | | ### Element Plus 组件自动引入 |
|---|
| | | |
|---|
| | | 配置了组件自动引入, 无需手动引入组件, vite 会在项目根目录下自动调整 `auto-imports.d.ts`、`components.d.ts` 内容。 Iconify |
|---|
| | | 图标自动引入同上。 |
|---|
| | | |
|---|
| | | ### 集成 Iconify 图标 |
|---|
| | | |
|---|
| | | iconify 有许多图标集合, 所以配置了自动下载和自动引入, 但是下载所有的图标集合需要约120兆, 所以建议事先选定好用哪个图标集, |
|---|
| | | 别乱加图标不然要下载好多 |
|---|
| | | |
|---|
| | | 示例: |
|---|
| | | |
|---|
| | | ```vue |
|---|
| | | <template> |
|---|
| | | <el-icon size="40" color="red"> |
|---|
| | | <IconAlert /> |
|---|
| | | </el-icon> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script setup lang="ts"> |
|---|
| | | import IconAlert from '~icons/mdi/alert' |
|---|
| | | </script> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Lint with [ESLint](https://eslint.org/) |
|---|
| | | 图标库地址: [iconify](https://icon-sets.iconify.design/) |
|---|
| | | |
|---|
| | | ```sh |
|---|
| | | npm run lint |
|---|
| | | ``` |
|---|
| | | 图标使用方法: [github.com/unplugin/unplugin-icons](https://github.com/unplugin/unplugin-icons#usage) |
|---|
| | | |
|---|
| | | ### 引入 VueUse |
|---|
| | | |
|---|
| | | 文档地址: [VueUse](https://vueuse.org/guide/) |
|---|
