Vite-Vue3.x-TS-Eslint项目初始化(2022-

2022-05-02 本文已影响0人东方三篇

Vite-Vue3.x-TS-Eslint项目初始化

Lzq811/Vue3.x-vite-ts-eslint-prettier: vue3大屏基础框架 (github.com)

1. init

yarn create vite demo-product --template vue-ts
cd ./demo-product
yarn
yarn dev
# 能正常方法 localhost:3000 页面，说明 init 成功

2. 使用 element-plus UI 库

安装 element-plus 官方地址

yarn add element-plus

推荐使用 按需引入 文档地址

# 需要安装下面两个依赖
yarn add unplugin-vue-component unplugin-auto-import

然后再 vite.config.ts 文件中修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Component from 'unplugin-vue-components/vite'
import {ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

然后在使用的组件中直接调用

<el-button type="primary">hello element btn</el-button>

自定义主题文档地址

使用 Less

# 安装依赖
yarn add less less-loader -D
# 然后vite.config.js， 要require('path')， 如果require 和 __dirname报ts错， 使用 @ts-ignore 或者安装 @types/node 依赖
css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve(__dirname, 'src/assets/base.less')}"` // 全局定义的less文件
        },
        javascriptEnabled: true
      }
    }
  }
  
 # 在组件内使用
 <style lang="less" scoped></style>

3. 使用 Eslint 、 Prettier 做代码校验和自动格式化

安装 eslint 以及相关依赖

yarn add eslint eslint-plugin-vue vue-eslint-parser @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-base eslint-plugin-import -D

vscode 编辑器也要安装 Eslint 和 Prettier 拓展

根目录添加 .eslintrc.js文件，并添加下面代码

module.exports = {
  root: true,
  globals: {
      defineEmits: 'readonly',
      defineProps: 'readonly'
  },
  extends: [
      'plugin:@typescript-eslint/recommended',
      'plugin:vue/vue3-recommended',
      'airbnb-base'
  ],
  parserOptions: {
      parser: '@typescript-eslint/parser',
      ecmaVersion: 2020
  },
  rules: {
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 debugger
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
      'no-bitwise': 'off', // 禁用按位运算符
      'no-tabs': 'off', // 禁用 tab
      'array-element-newline': ['error', 'consistent'], // 强制数组元素间出现换行
      indent: [
          'error',
          2,
          { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] }
      ], // 强制使用一致的缩进
      quotes: ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
      'comma-dangle': ['error', 'always-multiline'], // 要求或禁止末尾逗号
      'object-curly-spacing': ['error', 'always'], // 强制在大括号中使用一致的空格
      'max-len': ['error', 120], // 强制一行的最大长度
      'no-new': 'off', // 禁止使用 new 以避免产生副作用
      'linebreak-style': 'off', // 强制使用一致的换行风格
      'import/extensions': 'off', // 确保在导入路径中统一使用文件扩展名
      'eol-last': 'off', // 要求或禁止文件末尾存在空行
      'no-shadow': 'off', // 禁止变量声明与外层作用域的变量同名
      'no-unused-vars': 'warn', // 禁止出现未使用过的变量
      'import/no-cycle': 'off', // 禁止一个模块导入一个有依赖路径的模块回到自己身上
      'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
      semi: ['error', 'never'], // 要求或禁止使用分号代替 ASI
      eqeqeq: 'on', // 要求使用 === 和 !==
      'no-param-reassign': 'off', // 禁止对 function 的参数进行重新赋值
      'import/prefer-default-export': 'off', // 如果模块只输入一个名字，则倾向于默认输出
      'no-use-before-define': 'on', // 禁止在变量定义之前使用它们，则倾向于默认输出
      'no-continue': 'off', // 禁用 continue 语句
      'prefer-destructuring': 'off', // 优先使用数组和对象解构
      'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
      'prefer-const': 'warn', // 要求使用 const 声明那些声明后不再被修改的变量
      'global-require': 'on', // 要求 require() 出现在顶层模块作用域中
      'no-prototype-builtins': 'off', // 禁止直接调用 Object.prototypes 的内置属性
      'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
      'one-var-declaration-per-line': 'off', // 要求或禁止在变量声明周围换行
      'one-var': 'off', // 强制函数中的变量要么一起声明要么分开声明
      'import/named': 'off', // 确保命名导入与远程文件中的命名导出相对应
      'object-curly-newline': 'off', // 强制大括号内换行符的一致性
      'default-case': 'off', // 要求 switch 语句中有 default 分支
      'no-trailing-spaces': 'on', // 禁用行尾空格
      'func-names': 'off', // 要求或禁止使用命名的 function 表达式
      radix: 'off', // 强制在 parseInt() 使用基数参数
      'no-unused-expressions': 'off', // 禁止出现未使用过的表达式
      'no-underscore-dangle': 'off', // 禁止标识符中有悬空下划线
      'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
      'no-restricted-syntax': 'off', // 禁用特定的语法
      'no-await-in-loop': 'off', // 禁止在循环中出现 await
      'import/no-extraneous-dependencies': 'off', // 禁止使用外部包
      'import/no-unresolved': 'off', // 确保导入指向一个可以解析的文件/模块
      'template-curly-spacing': ['error', 'always'], // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
      '@typescript-eslint/no-var-requires': 'off', // 除import语句外，禁止使用require语句
      '@typescript-eslint/no-empty-function': 'off', // 不允许空函数
      '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
      'guard-for-in': 'off', // 要求 for-in 循环中有一个 if 语句
      'class-methods-use-this': 'off', // 强制类方法使用 this
      'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
      'vue/html-self-closing': 'off', // 执行自闭合的风格
      'vue/max-attributes-per-line': [
          // 强制每行属性的最大数量
          'warn',
          {
              singleline: {
                  max: 3,
                  allowFirstLine: true
              },
              multiline: {
                  max: 1,
                  allowFirstLine: false
              }
          }
      ],
      'vue/singleline-html-element-content-newline': 'off' // 要求单行元素的内容前后有一个换行符
  }
}

根目录添加 prettier.config.js文件，并添加下面代码

// prettier.config.js or .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'lf'
}

根目录添加 .eslintignore 并写入下面代码
```
/build/
/config/
/dist/
/*.js
/*.zip
/*.rar
```

4. 配置环境变量

在根目录新建文件夹 env-config,然后在文件夹下新增文件并录入内容

所有的环境变量必须以 VITE_ 开头

# 新增 .env 文件 写入下面内容
  VITE_ENV = DEV
  VITE_APP_BASE_URL = 'http://DEV.com'
  
# 新增 .env.test 文件并写入内容
  VITE_ENV = TEST
  VITE_APP_BASE_URL = 'http://TEST.com'
  
# 新增 .env.prod 文件并写入内容
  VITE_ENV = PROD
  VITE_APP_BASE_URL = 'http://PROD.com'

在 vite.config.js文件夹中配置 envDir

// @ts-ignore 如果提示错误 使用 @ts-ignore 或者 yarn add @types/node 只有node里面才有 require 和 __dirname
const path = require('path')
function _resolve(dir) {
  // @ts-ignore
  return path.resolve(__dirname, dir)
}

// https://vitejs.dev/config/
export default defineConfig({
  envDir: _resolve('env-config'),
  ...
})

修改 package.json 的命令（我比较喜欢用 start 代替 dev）

  "scripts": {
    "dev": "vite",
    "start": "vite --mode env",
    "start-test": "vite --mode test",
    "start-prod": "vite --mode prod",
    "build": "vue-tsc --noEmit && vite build",
    "build-test": "vue-tsc --noEmit && vite build --mode test",
    "build-prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },

使用 import.meta.env 来获取环境变量信息

# 组件里面调用测试
onMounted(() => {console.log(import.meta.env)})

执行start命令

yarn start # 执行 dev 环境
# OR
yarn start-test # 执行 test 环境
# OR
yarn start-prod # 执行 orod 环境

#demo
yarn start-test
# 调取 import.meta.env 的结果
  BASE_URL: "/"
  DEV: true
  MODE: "test"
  PROD: false
  VITE_APP_BASE_URL: "http://TEST.com"
  VITE_ENV: "TEST"

执行build命令

#demo
yarn build-test
# 调取 import.meta.env 的结果
  BASE_URL: "/"
  DEV: true
  MODE: "test"
  PROD: false
  VITE_APP_BASE_URL: "http://TEST.com"
  VITE_ENV: "TEST"

5. 使用 axios 封装 ajax 请求

安装 axios
```
yarn add axios
```

配置封装

新建文件src/api/index.tsx

// index.tsx 文件
import ajax from './ajax'
/*
 * ajax 从 ajax.js 引入 需要
 * 第一个 参数 是 url 必填
 * 第二个 参数 是 params对象 默认 {} 非必填
 * 第三个 参数 是 GET、POST 请求方式， 默认 POST， 非必填
 */
// 后台地址
const BASE_URL: string = import.meta.env.VITE_APP_BASE_URL || '' // 环境变量后台地址
// const BASE_URL: string = `http:xxxx/api`
// const BASE_URL_OTHER:string = `http:xxx2.api` // 多个后台地址

interface IParams {}

// 登陆接口
export const ReqLogin = (params: IParams) => ajax(`${BASE_URL}login`, params, 'POST') // POST 是默认值，可以不写

// export const ReqOther = (params:IParams) => ajax(`${BASE_URL_OTHER}login`, params)

新建文件 src/api/ajax.tsx

// ajax.tsx 文件
import axios from 'axios'

// 可以在这里做一下请求拦截，设置公共请求头等

export default function ajax(url: string, data: any = {}, type: string = 'POST') {
  // 判断 url 地址， 在多个后台地址时候使用， 可以在这里拦截使用不同的请求头，传入不同token等操作

  return new Promise((resolve, reject) => {
    let promise: any // 返回一个 promise 对象
    if (type === 'GET') {
      promise = axios.get(url, { params: data })

      // 多个后台地址时候，传入不同的token值
      promise = axios.get(url, {
        params: data,
        headers: { access_totken: sessionStorage.getItem('token_other') || '' }
      })
    } else if (type === 'POST') {
      promise = axios.post(url, data)

      // 多个后台地址时候，传入不同的token值
      promise = axios.get(url, data)
    }
    // 统一处理 response
    promise
      .then((response: any) => {
        response && response.data ? resolve(response.data) : reject(response)
      })
      .catch((error: any) => {
        console.log(error)
      })
  })
}

组件内调用

 ```tsx
 import {ReqLogin} from './src/api'
 
 const ajaxDemo = async () => {
    const res:any = await ReqLogin({}) // res就是ajax返回的结果
 }
 ```

6. 页面弹性布局

新建 src/utils/comfort_page.tsx

/*
 * 做页面自适应
 * 0. 项目跟元素 id = root
 * 1. width 为适应基准
 * 2. 无论 width height 如何变化，都要输出 16 / 9 比例的页面
 * 3. 客户的设备分辨率 1920 * 1080
 */

// @ts-nocheck

const W = 1920
const H = 1080

export default () => {
  const root = document.getElementById('root')?.style
  window.onresize = () => {
    root.transform = `scale(${document.body.offsetWidth / W})`
    root.transformOrigin = `left top 0px`
    root.width = `${W}px`
    root.height = `${H}px`
  }
  root.transform = `scale(${document.body.offsetWidth / W})`
  root.transformOrigin = `left top 0px`
  root.width = `${W}px`
  root.height = `${H}px`
}

App.vue 组件引入

import ComfortPage from './utils/comfort_page'
onMounted(() => {
  ComfortPage()
})

7. 路由

路由要用 4 版本的，才对应 vue3版本
```
yarn add vue-router@4
```

新增 src/routes/index.tsx

import { createRouter, createWebHistory } from 'vue-router'

const routes: any = [
  {
    path: '/',
    redirect: 'home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../Home.vue') // 要提前注册号该组件
  },
  {
    path: '/first',
    name: 'first',
    component: () => import('../First.vue') // 要提前注册号该组件
  }
]

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

router.beforeEach((to, from) => {
  const { path: toPath } = to
  const { path: fromPath } = from
  if (toPath === fromPath) {
    return false
  }
})

export default router

修改 main.ts 文件

import router from './routes'

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

修改 App.vue 文件

<template>
    <router-view></router-view>
</template>

跳转

import {useRouter} from 'vue-router'

const router = useRouter()

router.push('./first')

8. 路径别名

修改 vite.config.js 内容

export default defineConfig({
  envDir: path.resolve(__dirname, 'env-config'),
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Component({
      resolvers: [ElementPlusResolver()]
    })
  ],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve(__dirname, 'src/assets/base.less')}"` // 全局定义的less文件
        },
        javascriptEnabled: true
      }
    }
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@api': _resolve('src/api'),
      '@components': _resolve('src/components'),
      '@': _resolve('src')
    }
  }
})

新增 src/ts.extends.json 文件

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "*"
      ],
      "@api/*": [
        "src/api/*"
      ]
    }
  }
}

修改 tsconfig.json 文件

{
  ...
  "extends": "./ts.extends.json" # 添加该属性
}

使用
```
import { ReqLogin } from '@api/index'
```