├── README.md ├── src ├── vite-env.d.ts ├── styles │ ├── color.sass │ └── element-theme.sass ├── assets │ └── logo.png ├── shims-vue.d.ts ├── main.ts ├── store │ ├── module.ts │ ├── module2.ts │ └── index.ts ├── App.vue └── components │ └── HelloWorld.vue ├── .gitignore ├── .prettierrc.js ├── public └── favicon.ico ├── .husky └── pre-commit ├── index.html ├── tsconfig.json ├── vite.config.ts ├── package.json └── .eslintrc.js /README.md: -------------------------------------------------------------------------------- 1 | # vue3-vite-typescript-eslint -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local 6 | -------------------------------------------------------------------------------- /src/styles/color.sass: -------------------------------------------------------------------------------- 1 | $--color-primary: #ff0000 2 | 3 | $primary: #ff0000 4 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, // 使用单引号 3 | endOfLine: 'auto', 4 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YuanDaoDao001/vue3-vite-typescript-eslint/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/YuanDaoDao001/vue3-vite-typescript-eslint/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | # eslint . --ext .js,.ts,.vue --fix 5 | # git add . 6 | # exit 1 7 | npm run lint-staged -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import { DefineComponent } from 'vue'; 3 | 4 | const component: DefineComponent<{}, {}, any>; 5 | export default component; 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/element-theme.sass: -------------------------------------------------------------------------------- 1 | // @import "./color.sass" 2 | 3 | $--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts' 4 | @import "node_modules/element-plus/packages/theme-chalk/src/index" -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import ElementPlus from 'element-plus'; 3 | import './styles/element-theme.sass'; 4 | import locale from 'element-plus/lib/locale/lang/zh-cn'; // 中文 5 | import App from './App.vue'; 6 | import store, { key } from './store/index'; 7 | 8 | createApp(App).use(ElementPlus, { locale }).use(store, key).mount('#app'); 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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 | }, 13 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 14 | } 15 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import vue from '@vitejs/plugin-vue'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | // 开发服务器配置 8 | server: { 9 | port: 11000, 10 | }, 11 | css: { 12 | preprocessorOptions: { 13 | sass: { 14 | // \n 处理文件中多个引入报换行错误的问题 15 | additionalData: "@import './src/styles/color.sass'\n", 16 | }, 17 | }, 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /src/store/module.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-cycle */ 2 | import { Module } from 'vuex'; 3 | import { InjectionState } from './index'; 4 | 5 | export interface ModuleState { 6 | count: number; 7 | } 8 | export default { 9 | state() { 10 | return { 11 | count: 0, 12 | }; 13 | }, 14 | mutations: { 15 | increment(state) { 16 | state.count += 1; 17 | }, 18 | }, 19 | getters: { 20 | getCount(state, getters, rootState) { 21 | return `${state.count}---${rootState.module2.count}`; 22 | }, 23 | }, 24 | } as Module; 25 | -------------------------------------------------------------------------------- /src/store/module2.ts: -------------------------------------------------------------------------------- 1 | import { Module } from 'vuex'; 2 | import { InjectionState } from './index'; 3 | 4 | export interface Module2State { 5 | count: number; 6 | } 7 | export default { 8 | state() { 9 | return { 10 | count: 222, 11 | }; 12 | }, 13 | mutations: { 14 | increment2(state) { 15 | state.count += 1; 16 | }, 17 | }, 18 | getters: { 19 | getCount2(state, getters, rootState) { 20 | console.log(rootState); 21 | return `${state.count}---=${rootState.module.count}`; 22 | }, 23 | }, 24 | } as Module; 25 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 17 | 18 | 28 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-cycle */ 2 | import { InjectionKey } from 'vue'; 3 | import { createStore, Store, useStore as baseUseStore } from 'vuex'; 4 | import module, { ModuleState } from './module'; 5 | import module2, { Module2State } from './module2'; 6 | 7 | export interface State { 8 | rootCount: number; 9 | } 10 | 11 | export interface InjectionState extends State { 12 | module: ModuleState; 13 | module2: Module2State; 14 | } 15 | 16 | // eslint-disable-next-line symbol-description 17 | export const key: InjectionKey> = Symbol(); 18 | 19 | const store = createStore({ 20 | // state() { 21 | // return { 22 | // rootCount: 111, 23 | // } 24 | // }, 25 | modules: { 26 | module, 27 | module2, 28 | }, 29 | }); 30 | 31 | export default store; 32 | 33 | // 定义自己的 `useStore` 组合式函数 34 | export function useStore() { 35 | return baseUseStore(key); 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.0", 3 | "scripts": { 4 | "dev": "vite", 5 | "build": "vue-tsc --noEmit && vite build", 6 | "serve": "vite preview", 7 | "prepare": "husky install", 8 | "lint-staged": "lint-staged" 9 | }, 10 | "dependencies": { 11 | "element-plus": "^1.0.2-beta.55", 12 | "vue": "^3.0.5", 13 | "vuex": "^4.0.2" 14 | }, 15 | "devDependencies": { 16 | "@typescript-eslint/eslint-plugin": "^4.28.3", 17 | "@typescript-eslint/parser": "^4.28.3", 18 | "@vitejs/plugin-vue": "^1.2.4", 19 | "@vue/compiler-sfc": "^3.0.5", 20 | "eslint": "^7.30.0", 21 | "eslint-config-airbnb-base": "^14.2.1", 22 | "eslint-config-prettier": "^8.3.0", 23 | "eslint-plugin-import": "^2.22.1", 24 | "eslint-plugin-prettier": "^3.4.0", 25 | "eslint-plugin-vue": "^7.13.0", 26 | "husky": "^7.0.0", 27 | "lint-staged": "^11.0.0", 28 | "prettier": "2.3.2", 29 | "sass": "^1.35.2", 30 | "typescript": "^4.3.5", 31 | "vite": "^2.4.0", 32 | "vue-tsc": "^0.0.24" 33 | }, 34 | "lint-staged": { 35 | "*.{ts,js,vue}": [ 36 | "eslint --fix", 37 | "git add ." 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 71 | 72 | 86 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, // browser global variables 5 | // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12. 6 | es2021: true, 7 | }, 8 | extends: [ 9 | 'plugin:vue/vue3-recommended', 10 | 'airbnb-base', 11 | 'plugin:prettier/recommended', 12 | ], 13 | plugins: ['@typescript-eslint', 'prettier'], 14 | parserOptions: { 15 | ecmaVersion: 12, 16 | parser: '@typescript-eslint/parser', 17 | }, 18 | settings: { 19 | 'import/resolver': { 20 | node: { 21 | extensions: ['.js', '.jsx', '.ts', '.tsx'], 22 | }, 23 | }, 24 | }, 25 | rules: { 26 | 'prettier/prettier': 'error', 27 | 'linebreak-style': 0, 28 | 'import/no-extraneous-dependencies': [ 29 | 'error', 30 | { 31 | devDependencies: [ 32 | 'test/**', // tape, common npm pattern 33 | 'tests/**', // also common npm pattern 34 | 'spec/**', // mocha, rspec-like pattern 35 | '**/__tests__/**', // jest pattern 36 | '**/__mocks__/**', // jest pattern 37 | 'test.{js,jsx}', // repos with a single test file 38 | 'test-*.{js,jsx}', // repos with multiple top-level test files 39 | '**/*{.,_}{test,spec}.{js,jsx}', // tests where the extension or filename suffix denotes that it is a test 40 | '**/jest.config.js', // jest config 41 | '**/webpack.config.js', // webpack config 42 | '**/webpack.config.*.js', // webpack config 43 | '**/rollup.config.js', // rollup config 44 | '**/rollup.config.*.js', // rollup config 45 | '**/gulpfile.js', // gulp config 46 | '**/gulpfile.*.js', // gulp config 47 | '**/Gruntfile{,.js}', // grunt config 48 | '**/protractor.conf.js', // protractor config 49 | '**/protractor.conf.*.js', // protractor config 50 | '**vite**', 51 | '**@vitejs**', 52 | ], 53 | optionalDependencies: false, 54 | }, 55 | ], 56 | 'no-param-reassign': [ 57 | 'error', 58 | { 59 | props: true, 60 | ignorePropertyModificationsFor: [ 61 | 'acc', // for reduce accumulators 62 | 'accumulator', // for reduce accumulators 63 | 'e', // for e.returnvalue 64 | 'ctx', // for Koa routing 65 | 'context', // for Koa routing 66 | 'req', // for Express requests 67 | 'request', // for Express requests 68 | 'res', // for Express responses 69 | 'response', // for Express responses 70 | '$scope', // for Angular 1 scopes 71 | 'staticContext', // for ReactRouter context 72 | 'state', // for vuex state 73 | ], 74 | }, 75 | ], 76 | 'import/extensions': [ 77 | 'error', 78 | 'ignorePackages', 79 | { 80 | js: 'never', 81 | mjs: 'never', 82 | jsx: 'never', 83 | ts: 'never', 84 | }, 85 | ], 86 | }, 87 | }; 88 | --------------------------------------------------------------------------------