【个人手记】vue3+vite+ts+eslint 创建项目

二分无赖扬州月
411 阅读2分钟

前言

每次配置项目都是现找配置，这次完整梳理一下，并添加了自己习惯的一些配置

初始化项目（init）

看一波文档

vite image.png 命令和支持的模板，我用的是 yarn 命令（都一样） 一键生成项目 最后提示 cd xxx yarn：安装依赖 yarn dev：运行程序（可以在 根目录 package.json 中查看） 三条命令

安装依赖效果：（这次装的真的慢）

image.png

yarn dev 运行一下

eslint 安装&配置

首当其冲就是 eslint 规范（作为一个菜狗）

安装

yarn add eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-vue @vue/eslint-config-standard --dev 当时要装这些，好像后来改了，先研究下

先装这么多，做一个 eslint 基本配置，和 vue 的基本配置（.eslintrc.cjs）如下：

module.exports = {
  root: true, // 根目录（不向根目录以上的文件校验）
  env: { // 提供预定义的全局变量【官网如是说】
    browser: true, // 浏览器全局变量
    node: true, // Node.js 全局变量
    es2022: true // 添加 ESMAScript 2022 全局变量并设置 ecmaVersion 解析器为 13
  },
  parser: 'vue-eslint-parser', // 配置 eslint 主解析器（默认 espree）用以解析 .vue 文件【该解析器若不是官网的则必须被 npm 安装】
  parserOptions: { // 解析器配置项【即使存在也需要配置 parser（具体官网...）】
    sourceType: 'module', // js 代码来源 esm 方式引入
    ecmaVersion: 2022, // 支持 ES 语法版本【默认5】
    ecmaFeatures: {
      // jsx: true, // jsx 语法支持
      impliedStrict: true // 严格校验模式
    }
  },
  extends: [ // 规则继承 eslint:recommended 已内置好像不用写
    'plugin:vue/vue3-recommended', // eslint-vue 官网配置中继承上两种并具有主观社区的一些规范（最严格规范，和大佬们看齐）
    '@vue/standard'
  ],
  globals: {
    defineProps: 'readonly', // 'readonly | writable'
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  plugins: ['vue'], // 扩展的一些解析器（省略 eslint-plugin-）【eslint-plugin-vue 插件帮助解析 .vue 文件中的 <template> 和 <script> 中的 js 部分】
  rules: {} // 规则 0 | 1 | 2
}

安装 or【与上 安装 选其一即可】

或简单配置一下，User Guide | eslint-plugin-vue (vuejs.org)

yarn add eslint eslint-plugin-vue --dev

root: true,
parser: 'vue-eslint-parser',
parserOptions: {
    parser: '@typescript-eslint/parser'
},
extends: [
    'plugin:vue/vue3-recommended'
],
rules: {}

vite eslint 配置提示插件

安装：

yarn add vite-plugin-eslint --dev

vite.config.ts 配置如下：

import eslintPlugin from 'vite-plugin-eslint'

export default defineConfig({
  plugins: [
      eslintPlugin({
          cache: false,
          include: ['src/**/*.ts', 'src/**/*.vue']
      })
  ]
})

当然有自动化命令，我没配置，倾向于手动修改加强记忆（菜狗）

.eslintignore

记得 ignore 一下，根目录创建 .eslintignore 文件，复制如下

.vscode
.idea
node_modules
dist
/public

eslint 的规范

个人习惯的 rules（就是与 standard 默认不习惯的需要在此修改）

rules: { // 规则 0 | 1 | 2
  'no-unused-vars': 'warn', // 声明但没用到的属性警告（报错太麻烦，有个提示就好，以后修改）
  'no-debugger': 'warn', // 同上
  'no-console': 'warn', // 同上
  'no-tabs': 'off', // eslint 默认不认可 tab 键退格（推荐用空格代替）我嫌打空格太慢【关闭】
  'template-curly-spacing': ['error', 'always'], // {} 内部前后必须加空格，看着方便
  'vue/html-indent': [ // 标签退格
    'warn',
    2,
    {
      'attribute': 2 // 属性退格倍数：2 * 标签退格【参考了：Google HTML/CSS Style Guide】
    }
  ],
  'vue/singleline-html-element-content-newline': 'off', // 标签强制换行关闭，个人习惯标签不换行（写个内容就换行看起来行数多太麻烦）
  'vue/max-attributes-per-line': 'off', // 标签属性强制换行关闭，同上（属性太多才习惯换行）
  'vue/html-self-closing': ['error', { // 标签自闭合
    html: {
      void: 'always',
      normal: 'always',
      component: 'always'
    },
    svg: 'always',
    math: 'always'
  }]
}

支持 typescript 校验

安装

yarn add @typescript-eslint/parser --dev

配置如下：

.eslintrc.cjs

.cjs 文件，因为 package.json 文件中，"type": "module" 属性的设置，使用了 CommonJs 模块化规范 module.exports方式，而不是使用 ES6 的 export default 导出方式

parserOptions: {
  parser: '@typescript-eslint/parser',
 // 上 parser 设置为 vue-eslint-parser 需要这一项，即定义 @typescript-eslint/parser 作为 <script> 标记
}

文件后缀在根目录读取优先顺序：js, cjs, yaml, yml, json, package.json

@typescript-eslint/parser 需要依赖 @typescript-eslint/eslint-plugin，否则报错

移步官网：入门 |Typescript-eslint

image.png yarn add @typescript-eslint/eslint-plugin --dev

.eslintrc.cjs 完整配置 + typscript

root: true,
parser: 'vue-eslint-parser',
parserOptions: {
    parser: '@typescript-eslint/parser'
},
extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended' // 多加这一句
],
rules: {}

eslint 配置完成-总结

需要配置 vue、typescript 相关 eslint

同时编辑器需要打开 eslint 校验（webstorm Setting-Languages&Frameworks-JavaScript-Code Quality Tools-ESLint，非 Disable ESLint 就可以） （VSCode 有插件直接安装 Volar） 具体说明看官网：cn.vuejs.org/guide/types…

stylelint 安装&配置

后续补充

推荐插件

vue-router

yarn add vue-router@4

当前用的 4 版本

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

import { createRouter, createWebHashHistory } from 'vue-router'
import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'

export const constantRouterMap: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/TheLogin'
  },
  {
    path: '/TheLogin',
    name: 'TheLogin',
    component: () => import('../views/TheLogin.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  strict: true,
  routes: constantRouterMap,
  scrollBehavior: () => ({ left: 0, top: 0 })
})

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}

export default router

同时需要修改一下 src/main.ts 文件 方便导入路由

import { setupRouter } from './router'

const app = createApp(App)
setupRouter(app)
app.mount('#app')

src/App.vue 文件 template 适当的位置加上这个标签（路由页面展示位置）

<RouterView />

vuex

当前没用到，等待补充...

normalize.css 跨浏览器样式一致

yarn add normalize.css

src/main.ts 中引入

import 'normalize.css/normalize.css'

normalize.css 官网

sass

yarn add sass --dev

之后直接在 style 标签添加 lang="scss" 可以使用 sass

当然 less 等语言都可以

vue-types 定义 vue props 的工具

安装

yarn add vue-types

新建 /src/utils/propTypes.ts 文件&配置如下：

import { createTypes } from 'vue-types'

const propTypes = createTypes({
  func: undefined,
  bool: undefined,
  string: undefined,
  number: undefined,
  object: undefined,
  integer: undefined
})

export { propTypes }

vite-plugin-svg-icons 集成 svg 图标

官网

安装

yarn add vite-plugin-svg-icons --dev

main.ts 配置引入

import 'virtual:svg-icons-register'

vite.config.ts 中配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

const root = process.cwd()

function pathResolve(dir: string) {
  return resolve(root, '.', dir)
}

export default defineConfig({
  plugins: [
    ...
    createSvgIconsPlugin({
      iconDirs: [pathResolve('src/assets/svgs')],
      symbolId: 'icon-[dir]-[name]'
    })
  ]
})

src/components 下新建如下：

image.png

SvgIcon.vue

<script setup lang="ts">
import { computed } from 'vue'
import { propTypes } from '../../../utils/propTypes'

const props = defineProps({
  icon: propTypes.string
})

const symbolId = computed(() => {
  return `#icon-${ props.icon.split('svg-icon:')[1] }`
})
</script>

<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15;
  fill: currentColor;
  overflow: hidden;
}
</style>

index.ts

import SvgIcon from './src/SvgIcon.vue'

export { SvgIcon }

其他插件

pinia & mock

yarn add pinia 和 yarn add mockjs --dev

附官网：Pinia | The intuitive store for Vue.js (vuejs.org)

ECharts

ECharts 官网

在项目中配置

新建 src/plugins (如果原来没有)以存放插件【animate.css、echarts、elementPlus、svgIcon】等按需引入文件

src/plugins/echarts/echarts.ts 文件复制官网按需引入代码或如下代码：

import * as echarts from 'echarts/core'

import {
  BarChart,
  PieChart
} from 'echarts/charts'

import {
  TitleComponent
} from 'echarts/components'

/**
 * 渲染器
 * svg 缩放不模糊，内催占用小（更推荐移动端）
 * canvas 数据量较大 > 1k，交互较多
 */
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers'

echarts.use([
  BarChart,
  PieChart,
  TitleComponent,
  SVGRenderer,
  CanvasRenderer
])

export default echarts

之后以公用组件形式 echarts.vue 或 公用 hooks 形式 useECharts.ts 加载插件都可以

avatar
文章
阅读
粉丝