web端vue3项目搭建，不试试？

有些话要先说

各位好兄弟，广州有没有前端hc？

目前工作三年，vue/小程序/uniapp/h5 技术栈都行，来个内推，一起干奶茶...

一、  说明

技术栈：

vue3 + ts + pina + vue-router + axios + vue-next

目标：

1、引入vue-router配置路由，引入pina用作状态管理，引入vue-next UI组件库

2、代码eslint，prettier，styelint，git提交等规范检测

3、组件自动导入，vue钩子API自动导入

3、基于axios的http请求方法封装，全局的响应提示交互

二、  统一规范

1、初始化项目

npm create vite@latest my-vue-app --template vue

初始化后的包结果

"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-tsc": "^1.0.24"

初始化后的vite.config.js

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

2、eslint

eslint可以检查代码，统一代码风格，避免不必要的错误，下面我们选用eslint的标准库来配置

安装基本的eslint库

npm install --save-dev eslint eslint-plugin-promise eslint-plugin-import eslint-plugin-node

针对vue项目，还需要安装能够支持vue的库，@vue/eslint-config-standard为标准库

npm install --save-dev @vue/eslint-config-standard

在package.json文件scripts对象添加以下命令

"lint:create": "eslint --init", // 初始化eslint配置
"lint": "eslint "src/**/*.{js,jsx,vue,ts,tsx}" --fix --cache"

执行

npm run lint:create

配置选择参考

最后一步安装完库文件之后，可以看到根目录自动生产了.eslintrc.cjs文件，内容如下

// 默认配置
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  overrides: [
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
}

注意

1、  该默认配置是不完整的且无法使eslint正常工作的

2、  extends参数接收的是一个数组，为递进关系，vue的代码最终会被解析成ts，因此关于vue的插件应该在ts的插件之前，因为选用的是针对vue项目的eslint标准库，还需要补充一个@vue/standard

3、  parser为解析器，不能直接使用@typescript-eslint/parser，根据文档的解释是这个插件需要 vue-eslint-parser 来解析 .vue 文件，parser值为@typescript-eslint/parser是无法起作用的，因此需要作为自定义选项传入

为了解决以上问题，需要修改.eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    '@vue/standard',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'

  ],
  overrides: [
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    // 自定义规则，优先级最高，会重写配置的规则
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 关闭组件命名规则
    'vue/multi-word-component-names': 'off'
  }
}

最后根目录新建.eslintignore文件

# eslint 忽略检查 (根据项目需要自行添加)
node_modules
dist

vscode中，安装eslint插件

vscode的settings.json文件中添加以下代码

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }

到此，eslint已经可以正常工作了，并且在出现语法报错的文件，保存后，vscode可以自动进行简单的修复

3、husky

提交之前对暂存区的文件进行eslint检查，存在校验报错则不允许提交

新项目执行git初始化

git init

安装git hooks插件husky ，lint-staged插件

husky：可以对git的各种操作注入钩子

lint-staged: 针对暂存区的文件进行eslint检测

npm install lint-staged husky -D

package.json添加命令

"prepare": "husky install"

执行命令，安装husky和lint-staged

npm run prepare

添加git hooks钩子

添加./husky/pre-commit文件，追加（add）内容为npx lint-staged

npx husky add .husky/pre-commit "npx lint-staged"

package.json添加配置项

"lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "eslint",
      "git add"
    ]
}

以上操作可以实现，每次进行git commit 操作，将执行pre-commit钩子里面的代码，从而执行lint-staged配置项的eslint， git add 命令

4、commitlint

添加一个插件对每次提交的注释进行校验

npm install @commitlint/config-conventional @commitlint/cli -D

添加到commit-msg 钩子里

npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"

根目录新建一个commitlint.config.cjs文件

进行git commit -m "提交说明"操作时，对提交说明会按照commitlint.config.cjs配置的规则进行校验，不通过则不能提交（不通过一般提示：husky - commit-msg hook exited with code 1 (error)）

// 采用的提交规范 https://github.com/conventional-changelog/commitlint/tree/master/@comtimitlint/config-conventional
// 简单说明
// type: subject
// type取值：['build','chore','ci','docs','feat','fix','perf','refactor','revert','style','test'], 必填/小写
// subject取值：必填/小写/不能以'.'结束
module.exports = {
  extends: ['@commitlint/config-conventional']
}

5、style-lint

看项目需要，可以不配置这一部分

vscode安装插件styleLint，修改vscode本地配置文件settings.json，添加以下代码

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    },
    "stylelint.validate": ["css","scss","less","vue"]
}

安装常见的规则包

npm install --save-dev stylelint stylelint-config-standard

根目录建立.stylelintrc.cjs

module.exports = {
    extends: ["stylelint-config-standard"]
}

手动检查现有的样式问题，保存会执行vscode本地配置文件settings.json中配置的自动修复语句

npx stylelint "**/*.css"

如果使用了样式预处理器，需要额外的插件支持（针对不同的预处理器，安装的插件也不一样）

// less
npm install stylelint-less stylelint-config-recommended-less -D
// sass
// 由于stylelint@14以上版本不兼容vue3,因此要补充以下插件
npm install  stylelint-config-html stylelint-config-recommended-vue stylelint-config-standard-scss stylelint-config-recommended-scss stylelint-order postcss postcss-html -D

修改.stylelintrc.cjs

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-html/vue",
    "stylelint-config-standard-scss",
    'stylelint-config-recommended-vue/scss'
  ]
}

package.json中添加自动修复命令

"lint:css": "stylelint **/*.{vue,css,sass,scss,less} --fix"

给vite添加插件

npm install vite-plugin-stylelint -D

vite.package.js中使用插件

import StylelintPlugin from 'vite-plugin-stylelint'
plugin: [...StylelintPlugin({fix:true})]

添加到lint-staged里面，对暂存区文件进行格式化

"lint-staged": {
    ...
    "*{vue,less,css,sass}": {
        "npm run lint:css"
    }
}

最后添加一个忽略文件.stylelintignore

/dist/*
/public/*

6、环境变量

根目录下 .env.[mode] 用作不同环境的配置文件

比如不同环境的域名可以声明在对应的配置文件中，根目录下以下文件

#.env 文件
# 默认，可以用作开发环境 run dev build 对应
# VUE_APP_ 属性名
ENV='development'
# base api
VITE_APP_BASE_URL='www.baidu.com'
VITE_APP_BASE_NAME='VUE项目'

# .env.production 文件
# 生产环境 run dev buil:pro 对应
# VUE_APP_ 属性名
ENV='production'
# base api
VITE_APP_BASE_URL='www.google.com'
VITE_APP_BASE_NAME='VUE项目'

package.json中新增打包命令

"build": "vite build",
"build:pro": "vue-tsc --noEmit && vite build --mode production"

在vite中读取环境变量

import.meta.env.VITE_APP_BASE_URL

判断开发环境还是生产环境

 import.meta.env.DEV // 开发
 import.meta.env.PROD // 生产

三、  ts基本配置

tsconfig.json的默认配置

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

修改tsconfig.json文件，compilerOptions配置项添加paths，用于解决"xx模块找不到"报错

"compilerOptions": {
    ...,
    "baseUrl": ".",
    "types": ["node", "vite/client"],
    "paths": {
      "@/*": ["src/*"],
      "types/*": ["types/*"]
    }
}

四、  vite基本配置

vite.config.ts的默认配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

现加入路径别名，服务端配置，以及打包过程去除debugger，console

...;
import path from "path"
const pathSrc = path.resolve(__dirname, "src")
const publicSrc = path.resolve(__dirname, "public")
export default defineConfig({
  ...,
  resolve: {
    alias: {
      "@/": `${pathSrc}/`,
      "public/": `${publicSrc}/`,
    },
  },
  base: "./", // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: false, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    https: false,

    // 设置代理，根据我们项目实际情况配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  },
  build: {
    terserOptions: {
      compress: {
        // 生产环境去除console debugger
        drop_console: true,
        drop_debugger: true,
      },
    },
  }
})

五、  引入vue-router

1、安装

npm i vue-router@4

2、在src下创建router目录，在该目录下新建index.ts

 └── src/
     ├── router/
         ├── index.ts  // 路由配置文件

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'
import Home from '@/views/home.vue'
import Guide from '@/views/guide.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/guide',
    name: 'guide',
    component: () => import('@/views/guide.vue') // 懒加载组件
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

3、在 main.ts 中引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'

createApp(App)
  .use(router)
  .mount('#app')

六、  引入pina

1、  pina官方团队推荐代替vuex的一款轻量级状态管理库

npm i pinia --save

2、  新建 src/store 目录并在其下面创建 index.ts，导出 store

 import { createPinia } from 'pinia'

 const store = createPinia()

 export default store

3、  在main.ts中引入并使用

import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'
createApp(App)
  .use(store)
  .mount('#app')

4、  定义state

import { defineStore } from 'pinia'
export const globalStore = defineStore('global', {
  state: () => {
    return {
      token: 'token',
      isLogin: false
    }
  },
  getters: {
    isToken: (state) => !!state.token
  },
  actions: {
    updatedLogin (flag: boolean) {
      this.isLogin = flag
    }
  }
})

5、  读取

import { globalStore } from '@/store/modules/global'
const useGlobalStore = globalStore()
console.log(useGlobalStore.token, 'useGlobalStore.token')
console.log(useGlobalStore.isToken, 'useGlobalStore.isToken')
console.log(useGlobalStore.updatedLogin(true))

七、  按需自动导入配置

1、  安装插件

参考文档：www.npmjs.com/package/unp…

npm i -D unplugin-auto-import

2、  自动导入 Vue 相关函数，如：ref, reactive, toRef 等，vue-router，pina，自定义钩子等

修改vite.config.js，添加以下配置

plugins: [
    ...,
     AutoImport({
      // 自动导入的钩子
      imports: [
        'vue',
        'vue-router',
        'pinia',
        // 自定义钩子，格式：xx模块：xx钩子
        // { 
        //   '@/hooks/modules/hook-global/index':['useGlobalApi']
        // }
      ],
      // 生成自动导入的TS声明文件, 默认路径 ./auto-imports.d.ts
      dts: './auto-imports.d.ts',
      // 1、改为true用于生成eslint配置
      // 2、生成后改回false，避免重复生成消耗
      // 3、重新npm run dev 会自动生成 .eslintc-auto-import.json
      // 4、手动在.eslintrc中引入
      eslintrc: {
        enabled: true
      },
    })
]

修改tsconfig.json，将上一步生成的TS声明文件添加到ts编译中

{
     "include": [
         ...,
        "./auto-imports.d.ts"
      ]
}

手动在.eslintrc中引入 .eslintc-auto-import.json

 extends: [
     ...,
    "./.eslintrc-auto-import.json"
  ]

3、  组件的自动引入

npm i unplugin-vue-components/vite -D

在页面组件中，不用手动导入组件，直接使用组件的方式：

vite.config.js中添加以下配置

plugins: [
    ...,
    Components({
      // 指定自动导入的组件位置，默认是 src/components
      // 由于src/components 下的组件会自动引入，所以一般用作全局公共组件
       dirs: ['src/components'],
    })
]

unplugin-vue-components对应会在根目录生成components.d.ts文件，分别描述自动导入的 API、component。修改tsconfig.json，将上一步生成的TS声明文件添加到ts编译中

{
     "include": [
         ...,
        "components.d.ts"
      ]
}

八、  引入vue-next UI组件库

参考文档：tdesign.tencent.com/vue-next/ge…

1、  安装

npm i tdesign-vue-next

1、  通过插件按需引入（第七节已经安装）

npm install -D unplugin-vue-components unplugin-auto-import

然后在 Vite 对应的配置文件添加上述插件。

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [TDesignResolver({
        library: 'vue-next'
      })],
    }),
    Components({
      resolvers: [TDesignResolver({
        library: 'vue-next'
      })],
    }),
  ],
};

未完待续...