├── .husky ├── .gitignore ├── pre-commit ├── commit-msg └── pre-push ├── public ├── CNAME └── favicon.ico ├── commitlint.config.js ├── src ├── assets │ └── logo.png ├── common │ └── types │ │ └── index.ts ├── store │ ├── modules │ │ └── NumFactory │ │ │ ├── types.ts │ │ │ └── index.ts │ ├── types.ts │ └── index.ts ├── shims-vue.d.ts ├── main.ts ├── utils │ ├── style-import.ts │ └── axios.ts ├── views │ ├── Home.vue │ ├── Test.vue │ ├── Vuex.vue │ └── Axios.vue ├── App.vue ├── style │ └── basic.styl ├── router │ └── index.ts └── components │ ├── Header.vue │ ├── Main.vue │ └── Nav.vue ├── .prettierrc ├── tests ├── Header.spec.ts └── Test.spec.ts ├── index.html ├── jest.config.js ├── .editorconfig ├── tsconfig.json ├── .gitignore ├── .github └── workflows │ └── deploy.yml ├── .eslintrc.js ├── vite.config.ts ├── LICENSE ├── package.json ├── .cz-config.js └── README.md /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /public/CNAME: -------------------------------------------------------------------------------- 1 | vite-vue3-starter.xpoet.cn 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] } 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/vite-vue3-boilerplate/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shinevue/vite-vue3-boilerplate/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit 5 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm run test 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/common/types/index.ts: -------------------------------------------------------------------------------- 1 | export interface NavItem { 2 | path: string 3 | name: string 4 | isActive: boolean 5 | } 6 | -------------------------------------------------------------------------------- /src/store/modules/NumFactory/types.ts: -------------------------------------------------------------------------------- 1 | export default interface NumFactoryStateTypes { 2 | name: string 3 | count: number 4 | } 5 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue' 3 | const component: DefineComponent<{}, {}, any> 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 2, 4 | "printWidth": 88, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "bracketSpacing": true, 8 | "semi": false 9 | } 10 | -------------------------------------------------------------------------------- /src/store/types.ts: -------------------------------------------------------------------------------- 1 | import NumFactoryStateTypes from './modules/NumFactory/types' 2 | 3 | export default interface RootStateTypes { 4 | text: string 5 | } 6 | 7 | export interface AllStateTypes extends RootStateTypes { 8 | numFactoryModule: NumFactoryStateTypes 9 | } 10 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import router from '@/router/index' 3 | import { key, store } from '@/store' 4 | import App from './App.vue' 5 | import styleImport from '@/utils/style-import' 6 | import '@/style/basic.styl' 7 | 8 | const app = createApp(App) 9 | styleImport(app).use(router).use(store, key).mount('#app') 10 | -------------------------------------------------------------------------------- /tests/Header.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | // @ts-ignore 3 | import Header from '../src/components/Header.vue' 4 | 5 | describe('Header.vue', () => { 6 | it('renders', () => { 7 | const wrapper = mount(Header) 8 | expect(wrapper.html()).toContain('Vite2.x + Vue3.x + TypeScript Starter') 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /tests/Test.spec.ts: -------------------------------------------------------------------------------- 1 | import { mount } from '@vue/test-utils' 2 | import Test from '../src/views/Test.vue' 3 | 4 | test('Test.vue', async () => { 5 | const wrapper = mount(Test) 6 | expect(wrapper.html()).toContain('Unit Test Page') 7 | expect(wrapper.html()).toContain('count is: 0') 8 | await wrapper.find('button').trigger('click') 9 | expect(wrapper.html()).toContain('count is: 1') 10 | }) 11 | -------------------------------------------------------------------------------- /src/utils/style-import.ts: -------------------------------------------------------------------------------- 1 | import { App } from 'vue' 2 | import { ElIcon, ElLoading, ElCard, ElButton } from 'element-plus' 3 | 4 | /** 5 | * 按需导入 Element Plus 组件 6 | * Vite 插件 https://github.com/element-plus/vite-plugin-element-plus 7 | * @param app {App} 8 | */ 9 | export default function styleImport(app: App) { 10 | ;[ElButton, ElCard, ElLoading, ElIcon].forEach((v) => { 11 | app.use(v) 12 | }) 13 | return app 14 | } 15 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['vue', 'js', 'ts'], 3 | preset: 'ts-jest', 4 | testEnvironment: 'jsdom', 5 | transform: { 6 | '^.+\\.vue$': 'vue-jest', 7 | '^.+\\.ts$': 'ts-jest' 8 | }, 9 | // 匹配 __tests__ 目录下的 .js/.ts 文件 或 xx.test.js/ts xx.spec.js/ts 10 | testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$', 11 | moduleNameMapper: { 12 | '^@/(.*)$': '/src/$1' // 配置 jest 下 @ -> src 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | 3 | # 表示最顶层的 EditorConfig 配置文件 4 | root = true 5 | 6 | [*] # 表示所有文件适用 7 | charset = utf-8 # 设置文件字符集为 utf-8 8 | indent_style = space # 缩进风格（tab | space） 9 | indent_size = 2 # 缩进大小 10 | end_of_line = lf # 控制换行类型(lf | cr | crlf) 11 | trim_trailing_whitespace = true # 去除行首的任意空白字符 12 | insert_final_newline = true # 始终在文件末尾插入一个新行 13 | 14 | [*.md] # 表示仅 md 文件适用以下规则 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "strict": true, 7 | "jsx": "preserve", 8 | "sourceMap": true, 9 | "resolveJsonModule": true, 10 | "esModuleInterop": true, 11 | "lib": ["esnext", "dom"], 12 | "types": ["vite/client", "jest"], 13 | "baseUrl": "src", 14 | "paths": { 15 | "@/*": ["./*"] 16 | } 17 | }, 18 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 19 | } 20 | -------------------------------------------------------------------------------- /src/store/modules/NumFactory/index.ts: -------------------------------------------------------------------------------- 1 | import { Module } from 'vuex' 2 | import NumFactoryStateTypes from './types' 3 | import RootStateTypes from '../../types' 4 | 5 | // Create a new store Modules. 6 | const numFactoryModule: Module = { 7 | namespaced: true, 8 | state: { 9 | name: 'numFactory-module', 10 | count: 1 11 | }, 12 | mutations: { 13 | DOUBLE_COUNT(state: NumFactoryStateTypes) { 14 | state.count *= 2 15 | } 16 | }, 17 | actions: {} 18 | } 19 | 20 | export default numFactoryModule 21 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | 16 | 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 16 | 17 | 28 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { InjectionKey } from 'vue' 2 | import { createStore, Store, useStore as baseUseStore } from 'vuex' 3 | import RootStateTypes, { AllStateTypes } from './types' 4 | 5 | import numFactoryModule from './modules/NumFactory' 6 | 7 | export const store = createStore({ 8 | state: { 9 | text: 'This is Vuex Root.state.text' 10 | }, 11 | getters: {}, 12 | mutations: {}, 13 | actions: {}, 14 | modules: { 15 | numFactoryModule 16 | } 17 | }) 18 | 19 | export const key: InjectionKey> = Symbol('vue-store') 20 | 21 | export function useStore() { 22 | return baseUseStore(key) 23 | } 24 | -------------------------------------------------------------------------------- /src/style/basic.styl: -------------------------------------------------------------------------------- 1 | $font-color = #2c3e50 2 | $background-color = #fff 3 | $second-background-color = #f1f1f1 4 | 5 | html, body { 6 | position relative 7 | padding 0 8 | margin 0 9 | width 100% 10 | height 100% 11 | color $font-color 12 | } 13 | 14 | ul, 15 | li, 16 | ol { 17 | padding 0 18 | margin 0 19 | list-style none 20 | } 21 | 22 | .flex-center { 23 | display flex 24 | justify-content center 25 | align-items center 26 | } 27 | 28 | .page-container { 29 | width 100% 30 | height 100% 31 | box-sizing border-box 32 | text-align center 33 | } 34 | 35 | .page-title { 36 | font-size 28px 37 | font-weight bold 38 | padding 20px 39 | } 40 | -------------------------------------------------------------------------------- /src/views/Test.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 23 | 24 | 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /dist-ssr 6 | /tmp 7 | /out-tsc 8 | 9 | # dependencies 10 | /node_modules 11 | *.local 12 | yarn.lock 13 | package-lock.json 14 | 15 | # IDEs and editors 16 | /.idea 17 | .project 18 | .classpath 19 | .c9/ 20 | *.launch 21 | .settings/ 22 | *.sublime-workspace 23 | 24 | # IDE - VSCode 25 | .vscode/* 26 | # !.vscode/settings.json 27 | # !.vscode/tasks.json 28 | # !.vscode/launch.json 29 | # !.vscode/extensions.json 30 | 31 | # misc 32 | /.sass-cache 33 | /connect.lock 34 | /coverage 35 | /libpeerconnection.log 36 | npm-debug.log 37 | testem.log 38 | /typings 39 | 40 | # e2e 41 | /e2e/src/*.js 42 | /e2e/src/*.map 43 | /cypress/screenshots 44 | 45 | # System Files 46 | .DS_Store 47 | Thumbs.db 48 | -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHashHistory, Router, RouteRecordRaw } from 'vue-router' 2 | import Home from '@/views/Home.vue' 3 | import Vuex from '@/views/Vuex.vue' 4 | import Test from '@/views/Test.vue' 5 | 6 | const routes: Array = [ 7 | { 8 | path: '/', 9 | name: 'Home', 10 | component: Home 11 | }, 12 | { 13 | path: '/vuex', 14 | name: 'Vuex', 15 | component: Vuex 16 | }, 17 | { 18 | path: '/axios', 19 | name: 'Axios', 20 | component: () => import('@/views/Axios.vue') // 懒加载 Axios 组件 21 | }, 22 | { 23 | path: '/test', 24 | name: 'Test', 25 | component: Test 26 | } 27 | ] 28 | 29 | const router: Router = createRouter({ 30 | history: createWebHashHistory(), 31 | routes 32 | }) 33 | 34 | export default router 35 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: deploy 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | jobs: 8 | deploy: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | 13 | - name: Setup Node.js v14.x 14 | uses: actions/setup-node@v1 15 | with: 16 | node-version: "14.x" 17 | 18 | - name: Install 19 | run: npm install 20 | 21 | - name: Build 22 | run: npm run build 23 | 24 | - name: Deploy 25 | uses: peaceiris/actions-gh-pages@v3 26 | with: 27 | publish_dir: ./dist 28 | github_token: ${{ secrets.GH_PAGES_DEPLOY }} 29 | user_name: ${{ secrets.MY_USER_NAME }} 30 | user_email: ${{ secrets.MY_USER_EMAIL }} 31 | commit_message: Update Vite2.x + Vue3.x + TypeScript Starter 32 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true 6 | }, 7 | extends: [ 8 | 'plugin:vue/essential', 9 | 'airbnb-base', 10 | 'plugin:prettier/recommended', 11 | 'plugin:jest/recommended' 12 | ], 13 | parserOptions: { 14 | ecmaVersion: 12, 15 | parser: '@typescript-eslint/parser', 16 | sourceType: 'module' 17 | }, 18 | plugins: ['vue', '@typescript-eslint'], 19 | rules: { 20 | 'import/no-unresolved': 'off', 21 | 'import/extensions': 'off', 22 | 'import/no-absolute-path': 'off', 23 | 'import/no-extraneous-dependencies': 'off', 24 | 'vue/no-multiple-template-root': 'off', 25 | 'no-param-reassign': [ 26 | 'error', 27 | { 28 | props: true, 29 | ignorePropertyModificationsFor: ['state', 'config'] 30 | } 31 | ] 32 | }, 33 | settings: {} 34 | } 35 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import importElementPlus from 'vite-plugin-element-plus' 4 | 5 | // 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D 6 | import { resolve } from 'path' 7 | 8 | // https://vitejs.dev/config/ 9 | export default defineConfig({ 10 | plugins: [vue(), importElementPlus({})], 11 | resolve: { 12 | alias: { 13 | '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录 14 | } 15 | }, 16 | base: './', // 设置打包路径 17 | server: { 18 | port: 4500, // 设置服务启动端口号 19 | open: true, // 设置服务启动时是否自动打开浏览器 20 | cors: true // 允许跨域 21 | 22 | // 设置代理，根据我们项目实际情况配置 23 | // proxy: { 24 | // '/api': { 25 | // target: 'http://xxx.xxx.xxx.xxx:x000', 26 | // changeOrigin: true, 27 | // secure: false, 28 | // rewrite: (path) => path.replace('/api/', '/') 29 | // } 30 | // }, 31 | } 32 | }) 33 | -------------------------------------------------------------------------------- /src/views/Vuex.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 XPoet 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 52 | -------------------------------------------------------------------------------- /src/utils/axios.ts: -------------------------------------------------------------------------------- 1 | import Axios, { AxiosInstance } from 'axios' 2 | import { ElMessage } from 'element-plus' 3 | 4 | const baseURL = 'https://api.github.com' 5 | 6 | const axios: AxiosInstance = Axios.create({ 7 | baseURL, 8 | timeout: 20000 // 请求超时 20s 9 | }) 10 | 11 | // 前置拦截器（发起请求之前的拦截） 12 | axios.interceptors.request.use( 13 | (config) => { 14 | /** 15 | * 根据你的项目实际情况来对 config 做处理 16 | * 这里对 config 不做任何处理，直接返回 17 | */ 18 | return config 19 | }, 20 | (error) => { 21 | return Promise.reject(error) 22 | } 23 | ) 24 | 25 | // 后置拦截器（获取到响应时的拦截） 26 | axios.interceptors.response.use( 27 | (response) => { 28 | /** 29 | * 根据你的项目实际情况来对 response 和 error 做处理 30 | * 这里对 response 和 error 不做任何处理，直接返回 31 | */ 32 | return response 33 | }, 34 | (error) => { 35 | if (error.response && error.response.data) { 36 | const code = error.response.status 37 | const msg = error.response.data.message 38 | ElMessage.error(`Code: ${code}, Message: ${msg}`) 39 | console.error(`[Axios Error]`, error.response) 40 | } else { 41 | ElMessage.error(`${error}`) 42 | } 43 | return Promise.reject(error) 44 | } 45 | ) 46 | 47 | export default axios 48 | -------------------------------------------------------------------------------- /src/components/Main.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 34 | 35 | 106 | -------------------------------------------------------------------------------- /src/views/Axios.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 57 | 58 | 94 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-vue3-starter", 3 | "version": "0.0.1", 4 | "private": false, 5 | "description": "A Vite2.x + Vue3 + TypeScript template starter", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "build-tsc": "vue-tsc --noEmit && vite build", 10 | "serve": "vite preview", 11 | "format": "prettier --write ./src", 12 | "lint": "eslint ./src --ext .vue,.js,.ts", 13 | "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts", 14 | "prepare": "husky install", 15 | "test": "jest" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+ssh://git@github.com/XPoet/vite-vue3-starter.git" 20 | }, 21 | "keywords": [ 22 | "Vite", 23 | "Vue3", 24 | "TypeScript", 25 | "Starter" 26 | ], 27 | "author": "XPoet", 28 | "license": "MIT", 29 | "bugs": { 30 | "url": "https://github.com/XPoet/vite-vue3-starter/issues" 31 | }, 32 | "homepage": "https://github.com/XPoet/vite-vue3-starter#readme", 33 | "lint-staged": { 34 | "*.{vue,js,ts}": "eslint --fix" 35 | }, 36 | "config": { 37 | "commitizen": { 38 | "path": "./node_modules/cz-customizable" 39 | } 40 | }, 41 | "dependencies": { 42 | "axios": "^0.21.1", 43 | "element-plus": "^1.1.0-beta.7", 44 | "vue": "^3.2.6", 45 | "vue-router": "^4.0.11", 46 | "vuex": "^4.0.2" 47 | }, 48 | "devDependencies": { 49 | "@commitlint/cli": "^12.1.1", 50 | "@commitlint/config-conventional": "^12.1.1", 51 | "@types/jest": "^26.0.22", 52 | "@typescript-eslint/eslint-plugin": "^4.21.0", 53 | "@typescript-eslint/parser": "^4.21.0", 54 | "@vitejs/plugin-vue": "^1.6.0", 55 | "@vue/compiler-sfc": "^3.2.6", 56 | "@vue/test-utils": "^2.0.0-rc.4", 57 | "commitizen": "^4.2.3", 58 | "cz-conventional-changelog": "^3.3.0", 59 | "cz-customizable": "^6.3.0", 60 | "eslint": "^7.24.0", 61 | "eslint-config-airbnb-base": "^14.2.1", 62 | "eslint-config-prettier": "^8.1.0", 63 | "eslint-plugin-import": "^2.22.1", 64 | "eslint-plugin-jest": "^24.3.5", 65 | "eslint-plugin-prettier": "^3.3.1", 66 | "eslint-plugin-vue": "^7.8.0", 67 | "husky": "^6.0.0", 68 | "jest": "^26.6.3", 69 | "lint-staged": "^10.5.4", 70 | "prettier": "^2.2.1", 71 | "stylus": "^0.54.8", 72 | "ts-jest": "^26.5.4", 73 | "typescript": "^4.1.3", 74 | "vite": "^2.5.1", 75 | "vite-plugin-element-plus": "0.0.12", 76 | "vue-jest": "^5.0.0-alpha.7", 77 | "vue-tsc": "^0.3.0" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 84 | 85 | 115 | -------------------------------------------------------------------------------- /.cz-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // type 类型（定义之后，可通过上下键选择） 3 | types: [ 4 | { 5 | value: 'feat', 6 | name: 'feat: 新增功能' 7 | }, 8 | { 9 | value: 'fix', 10 | name: 'fix: 修复 bug' 11 | }, 12 | { 13 | value: 'docs', 14 | name: 'docs: 文档变更' 15 | }, 16 | { 17 | value: 'style', 18 | name: 'style: 代码格式（不影响功能，例如空格、分号等格式修正）' 19 | }, 20 | { 21 | value: 'refactor', 22 | name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' 23 | }, 24 | { 25 | value: 'perf', 26 | name: 'perf: 性能优化' 27 | }, 28 | { 29 | value: 'test', 30 | name: 'test: 添加、修改测试用例' 31 | }, 32 | { 33 | value: 'build', 34 | name: 'build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' 35 | }, 36 | { 37 | value: 'ci', 38 | name: 'ci: 修改 CI 配置、脚本' 39 | }, 40 | { 41 | value: 'chore', 42 | name: 'chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' 43 | }, 44 | { 45 | value: 'revert', 46 | name: 'revert: 回滚 commit' 47 | } 48 | ], 49 | 50 | // scope 类型（定义之后，可通过上下键选择） 51 | scopes: [ 52 | ['components', '组件相关'], 53 | ['hooks', 'hook 相关'], 54 | ['utils', 'utils 相关'], 55 | ['element-plus', '对 element-plus 的调整'], 56 | ['styles', '样式相关'], 57 | ['deps', '项目依赖'], 58 | ['auth', '对 auth 修改'], 59 | ['other', '其他修改'], 60 | // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true 61 | ['custom', '以上都不是？我要自定义'] 62 | ].map(([value, description]) => { 63 | return { 64 | value, 65 | name: `${value.padEnd(30)} (${description})` 66 | } 67 | }), 68 | 69 | // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。 70 | // allowCustomScopes: true, 71 | 72 | // allowTicketNumber: false, 73 | // isTicketNumberRequired: false, 74 | // ticketNumberPrefix: 'TICKET-', 75 | // ticketNumberRegExp: '\\d{1,5}', 76 | 77 | // 针对每一个 type 去定义对应的 scopes，例如 fix 78 | /* 79 | scopeOverrides: { 80 | fix: [ 81 | { name: 'merge' }, 82 | { name: 'style' }, 83 | { name: 'e2eTest' }, 84 | { name: 'unitTest' } 85 | ] 86 | }, 87 | */ 88 | 89 | // 交互提示信息 90 | messages: { 91 | type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：', 92 | scope: '\n选择一个 scope（可选）：', 93 | // 选择 scope: custom 时会出下面的提示 94 | customScope: '请输入自定义的 scope：', 95 | subject: '填写简短精炼的变更描述：\n', 96 | body: '填写更加详细的变更描述（可选）。使用 "|" 换行：\n', 97 | breaking: '列举非兼容性重大的变更（可选）：\n', 98 | footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n', 99 | confirmCommit: '确认提交？' 100 | }, 101 | 102 | // 设置只有 type 选择了 feat 或 fix，才询问 breaking message 103 | allowBreakingChanges: ['feat', 'fix'], 104 | 105 | // 跳过要询问的步骤 106 | // skipQuestions: ['body', 'footer'], 107 | 108 | subjectLimit: 100, // subject 限制长度 109 | breaklineChar: '|' // 换行符，支持 body 和 footer 110 | // footerPrefix : 'ISSUES CLOSED:' 111 | // askForBreakingChangeFirst : true, 112 | } 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vite 2.x + Vue 3.x + TypeScript Starter 2 | 3 | [![Author](https://img.shields.io/badge/author-XPoet-orange.svg)](https://github.com/XPoet) 4 | [![License](https://img.shields.io/github/license/XPoet/vite-vue3-starter.svg)](https://github.com/XPoet/vite-vue3-starter/blob/master/LICENSE) 5 | [![Stars](https://img.shields.io/github/stars/XPoet/vite-vue3-starter)](https://github.com/XPoet/vite-vue3-starter) 6 | [![Deploy](https://github.com/XPoet/vite-vue3-starter/workflows/deploy/badge.svg)](https://github.com/XPoet/vite-vue3-starter/actions/workflows/deploy.yml) 7 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-Airbnb-hotpink.svg)](https://github.com/lin-123/javascript) 8 | 9 | 10 | > A set of robust front-end rapid development templates that perfectly integrate Vite 2.x + Vue 3.x + TypeScript + Vue Router + Vuex + Axios + ESLint 11 | 12 | ## online preview 13 | 14 | https://vite-vue3-starter.xpoet.cn/ 15 | 16 | ## Build tutorial from 0 to 1 17 | 18 | 1️⃣ [Nuggets](https://juejin.cn/post/6951649464637636622) 2️⃣ [XPoet's Blog](https://xpoet.cn/2021/04/%E4%BB%8E-0-% E5%BC%80%E5%A7%8B%E6%89%8B%E6%8A%8A%E6%89%8B%E5%B8%A6%E4%BD%A0%E6%90%AD%E5% BB%BA%E4%B8%80%E5%A5%97%E8%A7%84%E8%8C%83%E7%9A%84-Vue3.x-%E5%B7%A5%E7%A8%8B %E5%8C%96%E9%A1%B9%E7%9B%AE/) 19 | 20 | 21 | ## technology stack 22 | 23 | - Programming language: [TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/) 24 | - Build tool: [Vite 2.x](https://cn.vitejs.dev/) 25 | - Front-end framework: [Vue 3.x](https://v3.cn.vuejs.org/) 26 | - Routing tool: [Vue Router 4.x](https://next.router.vuejs.org/zh/index.html) 27 | - State management: [Vuex 4.x](https://next.vuex.vuejs.org/) 28 | - UI framework: [Element Plus](https://element-plus.org/#/zh-CN) 29 | - CSS precompilation: [Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/ ) 30 | - HTTP Tools: [Axios](https://axios-http.com/) 31 | - Git Hook tool: [husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged) 32 | - Code specification: [EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide ](https://github.com/airbnb/javascript#translation) 33 | - Commit specification: [Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/) 34 | - Unit testing: [vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest]( https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/) 35 | - Automatic deployment: [GitHub Actions](https://docs.github.com/en/actions/learn-github-actions) 36 | 37 | ## Quick start 38 | 39 | ### Get Items 40 | 41 | #### Using Git 42 | 43 | ```sh 44 | git clone https://github.com/XPoet/vite-vue3-starter.git 45 | ``` 46 | 47 | #### Using NPM 48 | 49 | ```sh 50 | npm install vite-vue-ts-cli -g 51 | 52 | vite-vue-ts-create myapp 53 | ``` 54 | 55 | ### Install dependencies 56 | 57 | ```sh 58 | npm install 59 | # or 60 | yarn add 61 | ``` 62 | 63 | ### Startup project 64 | 65 | ```sh 66 | npm run dev 67 | ``` 68 | 69 | ### Project packaging 70 | 71 | ```sh 72 | npm run build 73 | ``` 74 | 75 | ##Q&A 76 | 77 | 1. Q: `git cz` does not take effect 78 | 79 | A: Please install commitizen globally, command: `npm install commitizen -g` 80 | 81 | 2. Q: husky reports an error 82 | 83 | A: Please check if there is a Git repository under your project, if not, initialize one with `git init` first 84 | 85 | ## License 86 | 87 | MIT Copyright © 2021 XPoet --------------------------------------------------------------------------------