一、Vite

1、初始化项目

npm init @vitejs/app vite_app -- --template
cd vite_app
npm install
npm run dev

2、vue-router

npm i vue-router@next -S

创建router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

创建router/routes.js

const routes = [
    {
        path: '/',
        component: () => import('../layout/index.vue')
    }
]
export default routes

在main.js中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const myApp = createApp(App)
myApp.use(router)
myApp.mount('#app')

3、vuex

安装

npm i vuex@next -S

新建src/store/index.js

import { createStore } from 'vuex'
import state from './default/state'
import mutations from "./default/mutations"
import actions from './default/actions'
import getters from './default/getters'
export default createStore({
   state () { 
     return { count: 0 } 
   }, 
   mutations: { 
     increment (state) { 
       state.count++ 
     } 
   }, 
   actions:{ 
     increment ({ commit }) { 
       commit('increment') 
     } 
   }
})

在main.js中引入

import store from './store'
myApp.use(store)

在页面组件中使用

<template>
  <div>
    <h1>layout</h1>
    <p>count:{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
<script setup>
import { computed } from '@vue/reactivity'
import { useStore } from 'vuex'
const store = useStore() // 获取 store 实例
const count = computed(() => store.state.counter)
const increment = () => {
  store.commit('increment')
}
</script>
<style scoped>
</style>

4、element-plus

安装

npm i element-plus -S

在main.js中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
myApp.use(ElementPlus)

二、css预处理器

1、安装scss

npm i sass -D

2、配置全局样式

vite.config.js

css: {
  preprocessorOptions: {
    scss: {
      charset: false,
      additionalData: `@import "./src/assets/style/common.scss";`,
    }
  }
},

三、eslint

1、安装依赖

npm i @vue/eslint-config-prettier babel-eslint eslint eslint-plugin-prettier eslint-plugin-vue prettier -D

2、配置lint规则

新建.eslintrc.js

module.exports = {
   env: {
      browser: true,
      commonjs: true,
      es6: true,
      node: true
   },
   extends: ['eslint:recommended', 'plugin:vue/essential', 'prettier'],
   parserOptions: {
      ecmaVersion: 13,
      sourceType: 'module'
   },
   plugins: ['vue'],
   rules: {
      'vue/multi-word-component-names': 'off',
      'vue/singleline-html-element-content-newline': 'off',
      'vue/multiline-html-element-content-newline': 'off',
      'vue/name-property-casing': ['error', 'PascalCase'],
      'vue/no-v-html': 'off',
      'accessor-pairs': 2,
      'arrow-spacing': [
         2,
         {
            before: true,
            after: true
         }
      ],
      'block-spacing': [2, 'always'],
      'brace-style': [
         2,
         '1tbs',
         {
            allowSingleLine: true
         }
      ],
      'camelcase': 'off',
      'comma-dangle': [2, 'never'],
      'comma-spacing': [
         2,
         {
            before: false,
            after: true
         }
      ],
      'comma-style': [2, 'last'],
      'constructor-super': 2,
      curly: [2, 'multi-line'],
      'dot-location': [2, 'property'],
      'eol-last': 2,
      eqeqeq: 'off',
      'generator-star-spacing': [
         2,
         {
            before: true,
            after: true
         }
      ],
      'handle-callback-err': [2, '^(err|error)$'],
      'indent': ['error', 'tab'],
      'jsx-quotes': [2, 'prefer-single'],
      'key-spacing': [
         2,
         {
            beforeColon: false,
            afterColon: true
         }
      ],
      'keyword-spacing': [
         2,
         {
            before: true,
            after: true
         }
      ],
      'new-cap': [
         2,
         {
            newIsCap: true,
            capIsNew: false
         }
      ],
      'new-parens': 2,
      'no-array-constructor': 2,
      'no-caller': 2,
      'no-console': 'off',
      'no-class-assign': 2,
      'no-cond-assign': 2,
      'no-const-assign': 2,
      'no-control-regex': 0,
      'no-delete-var': 2,
      'no-dupe-args': 2,
      'no-dupe-class-members': 2,
      'no-dupe-keys': 2,
      'no-duplicate-case': 2,
      'no-empty-character-class': 2,
      'no-empty-pattern': 2,
      'no-eval': 2,
      'no-ex-assign': 2,
      'no-extend-native': 2,
      'no-extra-bind': 2,
      'no-extra-boolean-cast': 2,
      'no-extra-parens': [2, 'functions'],
      'no-fallthrough': 2,
      'no-floating-decimal': 2,
      'no-func-assign': 2,
      'no-implied-eval': 2,
      'no-inner-declarations': [2, 'functions'],
      'no-invalid-regexp': 2,
      'no-irregular-whitespace': 2,
      'no-iterator': 2,
      'no-label-var': 2,
      'no-labels': [
         2,
         {
            allowLoop: false,
            allowSwitch: false
         }
      ],
      'no-lone-blocks': 2,
      'no-mixed-spaces-and-tabs': 2,
      'no-multi-spaces': 2,
      'no-multi-str': 2,
      'no-multiple-empty-lines': [
         2,
         {
            max: 1
         }
      ],
      'no-native-reassign': 2,
      'no-negated-in-lhs': 2,
      'no-new-require': 2,
      'no-new-symbol': 2,
      'no-new-wrappers': 2,
      'no-obj-calls': 2,
      'no-octal': 2,
      'no-octal-escape': 2,
      'no-path-concat': 2,
      'no-proto': 2,
      'no-redeclare': 2,
      'no-regex-spaces': 2,
      'no-return-assign': [2, 'except-parens'],
      'no-self-assign': 2,
      'no-self-compare': 2,
      'no-sequences': 2,
      'no-shadow-restricted-names': 2,
      'no-spaced-func': 2,
      'no-sparse-arrays': 2,
      'no-this-before-super': 2,
      'no-throw-literal': 2,
      'no-trailing-spaces': 2,
      'no-undef': 2,
      'no-undef-init': 2,
      'no-unexpected-multiline': 2,
      'no-unmodified-loop-condition': 2,
      'no-unneeded-ternary': [
         2,
         {
            defaultAssignment: false
         }
      ],
      'no-unreachable': 2,
      'no-unsafe-finally': 2,
      'no-unused-vars': [
         1,
         {
            vars: 'all',
            args: 'none'
         }
      ],
      'no-useless-call': 2,
      'no-useless-computed-key': 2,
      'no-useless-constructor': 2,
      'no-useless-escape': 0,
      'no-whitespace-before-property': 2,
      'no-with': 2,
      'one-var': [
         2,
         {
            initialized: 'never'
         }
      ],
      'operator-linebreak': [
         2,
         'after',
         {
            overrides: {
               '?': 'before',
               ':': 'before'
            }
         }
      ],
      'padded-blocks': [2, 'never'],
      quotes: [
         2,
         'single',
         {
            avoidEscape: true,
            allowTemplateLiterals: true
         }
      ],
      semi: [2, 'never'],
      'semi-spacing': [
         2,
         {
            before: false,
            after: true
         }
      ],
      'space-before-blocks': [2, 'always'],
      'space-before-function-paren': [2, 'never'],
      'space-in-parens': [2, 'never'],
      'space-infix-ops': 2,
      'space-unary-ops': [
         2,
         {
            words: true,
            nonwords: false
         }
      ],
      'spaced-comment': [
         2,
         'always',
         {
            markers: [
               'global',
               'globals',
               'eslint',
               'eslint-disable',
               '*package',
               '!',
               ','
            ]
         }
      ],
      'template-curly-spacing': [2, 'never'],
      'use-isnan': 2,
      'valid-typeof': 2,
      'wrap-iife': [2, 'any'],
      'yield-star-spacing': [2, 'both'],
      yoda: [2, 'never'],
      'prefer-const': 2,
      'no-debugger': 0,
      'object-curly-spacing': [
         2,
         'always',
         {
            objectsInObjects: false
         }
      ],
      'array-bracket-spacing': [2, 'never']
   }
}

3、配置alias目录别名

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

四、husky

1、安装

npm i husky -D
git init

修改package.json

scripts:{
  ...
  "lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
  "prepare": "husky install"
}

生成.husky

npx husky add .husky/pre-commit "npm run lint"

2、lint-staged

在我们提交代码时，只会对修改的文件进行检查、修复处理，以保证提交的代码没有语法错误，不会影响其他伙伴在更新代码无法运行的问题

npm i lint-staged -D

新建.lintstagedrc配置文件

{
  "*.{js,ts,vue}": ["npm run lint"],
  "*.{html,vue,css,scss,sass,less}": ["stylelint --fix"]
}