手把手Vue3项目（一）——安装配置 Vite + Vue3 + TypeScript + Ant-design-vue 项目

项目中涉及到的配置：

Vite

Vue 3

VueRouter 4

Vuex 4

Ant- design-vue

TypeScript

less

tsx / jsx 支持

Eslint

Prettier

Stylelint

Git 代码检测 pre-commit / commit-message

后续文章会继续更新，mock、json-server模拟前端数据，实现前后端分离开发，axios安装与配置，后台管理系统登录逻辑实现，VueRouter动态路由配置和权限管理，通用组件的封装等等。

vite搭建vue项目

具体步骤请参考，前面的文章——使用vite从开始搭建vue项目

安装配置 ant- design-vue 2.2.6

安装

// 安装ant-design-vue
pnpm add ant-design-vue@next
// 安装ant-design-vue/icon
pnpm add @ant-design/icons-vue
// vite 按需导入插件
// **废弃：pnpm add vite-plugin-components // 安装不过一周左右时间，插件就重命名了，所以按照新插件重新配置**
// 参考这里：
pnpm add unplugin-vue-components -D

配置

// vite.config.js
// import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
**import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'**

export default {
  plugins: [
    /* ... */
		// 项目插件重命名之后废弃，改为使用 unplugin-vue-components，之前的也是可以使用的
    ViteComponents({
      customComponentResolvers: [AntDesignVueResolver()],
    }),

		// 新的使用方法
		// 
    // ant-design-vue 按需导入
    **Components({
      resolvers: [
        AntDesignVueResolver(),
        // ElementPlusResolver(),
        // VantResolver(),
      ],
      // globalComponentsDeclaration
      dts: true,
      // customLoaderMatcher
      include: [/\\.vue$/, /\\.vue\\?vue/, /\\.md$/],
    })**
  ],
};

验证


    
    Primary Button

安装配置 less

安装

pnpm add less

配置

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

// 
export default defineConfig({
    // 支持 less 样式
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        },
    }
})

验证


    
h1

    
h2

  


// 样式文件App.less,或者写在文件内
.box {
  width: 100%;
  hight: 100px;
  border: 1px solid #42b983;

  .h1 {
    color: red;
  }

  .h2 {
    color: blue;
  }

}

安装配置 VueRouter 4

安装

pnpm add vue-router@4

配置

// router/index.ts ----------------创建路由------------------
import {createRouter, createWebHistory} from "vue-router";
import {routes} from "@/router/config";

const router = createRouter({
    history: createWebHistory(),
    routes
})
router.beforeEach((to, from) => {
    // to.path = '/login'
    return true
})
export default router

// router/config.ts ----------------路由路径配置文件------------
export const routes = [
		// 路由重定向
    {
        path: '/',
        redirect: '/home',
    },
    {
        path: '/home',
        // component: Home
        component: () => import("@modules/home/Index.vue")
    },
    {
        path: '/about',
        component: () => import("@modules/about/Index.vue")
    }
]

// main.ts -----------------使用router--------------------------
import {createApp} from 'vue'
import router from "@/router";
import App from './App.vue'
import "ant-design-vue/dist/antd.less"
// import '@ant-design/icons-vue'

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

// App.vue  ----------------在页面中渲染路由加载的页面------------------------

验证

安装配置 alias

安装

// 导入 path 的时候提示报错，需要安装 @types/node 类型检测
pnpm add @types/node

配置

// vite.config.ts
import {defineConfig} from 'vite'
import path from 'path'

export default defineConfig({
		//src目录的配置
	  resolve: {
	    alias: {
	      // src 目录路径
	      '@': path.resolve(__dirname, 'src'),
	      // 公共组件导入路径
	      '@modules': path.resolve(__dirname, 'src/modules/components')
	    }
	  },
		
    // 下面的配置方式废弃了，刚配置好的时候还可以，一周之后发现不会热更新了，让后在终端看到alias这个配置废弃了
		// 让更换成 resolve.alias 的方式，更换之后发现确实可以了
    alias: {
        '@': path.resolve(__dirname, 'src'),
				// 还可以额外添加一些其他的
				"components": path.resolve(__dirname, "src/components"),
	      "styles": path.resolve(__dirname, "src/styles"),
	      "views": path.resolve(__dirname, "src/views"),
	      "utils": path.resolve(__dirname, "src/utils"),
    }

	
})

// ts.config.json
{
  "compilerOptions": {
    // 如果是ts项目，仅仅添加上面还不够，因为编辑器无法自动识别别名路径
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

验证

// 待会儿在导入路由导入组件的时候使用，或者在App中引入一个login的测试组件
// App.vue

安装配置 支持页面 tsx / jsx

安装

pnpm add @vitejs/plugin-vue-jsx

配置

// 在 vite.config.ts 配置
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
 plugins: [ vueJsx()]
})

// tsconfig.json 文件中
{
  "include": [
    "src/**/*.ts",
    "src/**/*.js",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.jsx",
    "src/**/*.vue"
  ],
  "compilerOptions": {
    // 在.tsx文件里支持JSX
    "jsx": "preserve",
  }
}

验证

// .tsx 文件
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => 
Hello,World

  }
})

安装配置 eslint

  • 参考链接：

    https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf

    https://vueschool.io/articles/vuejs-tutorials/eslint-and-prettier-with-vite-and-vue-js-3/

    https://www.npmjs.com/package/vue-eslint-parser

是否安装 vite-plugin-eslint 并配置，目前先使用这样的配置，如果是成功的就不安装vite-eslint的插件了

安装

pnpm add eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin

// 需要再安装一个 vue 但页面解析器，并配置

pnpm add vue-eslint-parser

/**
* pnpm add eslint
* 如果使用 pnpm eslint --init 根据提示安装
* 会提示你初始化 eslint，让你选择适合你项目所需的插件，但是是以 npm 为包安装器安装的，由于我使用的 pnpm 所以最后报错了。
* 但是也算是提示了我们所需要安装的插件依赖了，之后我们自己手动安装也可以
*/ 

heyhaiyang@HaiyangdeMacBook-Air vite-vue3-ts-antd-20210831 % pnpm eslint --init

? How would you like to use ESLint? · problems
? What type of modules does your project use? · esm
? Which framework does your project use? · vue
? Does your project use TypeScript? · No / Yes
? Where does your code run? · browser
? What format do you want your config file to be in? · JavaScript**
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest

? Would you like to install them now with npm? · No / Yes
Installing eslint-plugin-vue@latest, @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest, eslint@latest
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name ".pnpm": name cannot start with a period

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/heyhaiyang/.npm/_logs/2021-09-01T07_46_06_494Z-debug.log
Successfully created .eslintrc.js file in /Users/heyhaiyang/codebase/private/vite-vue3-ts-antd-20210831
ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.

配置

// 使用我们上面安装时选择的一系列符合我们项目的配置之后，在项目根目录就会生成一个 .eslintrc.js 配置文件
// .eslintrc.js 自动生成的eslint配置文件，接下来需要的就是我们根据需要添加对应的 rules
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
		// vue 单页面解析器
		"parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {}
};

// 我们也添加一个eslint忽略的文件
// eslintignore

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
*.zip
/public
/docs
.husky
.local
/bin
Dockerfile

// webStorm配置

eslint

验证

// 暂时还没有验证，需要在实际写代码过程中验证，并添加 rules

**?????? 遇到一些 eslint 'warning' 可以尝试先用提示的方法注释掉，之后在rules里面添加上这条规则，将状态改成off，0 等等**

**错误1: ESLint: Parsing error: '>' expected.** 
vue 单页面 
 ，就只写这些就报错

解决：安装vue但页面 eslint 解析器并配置
	pnpm add vue-eslint-parser
{
	"parser": "vue-eslint-parser",
  "parserOptions": {
      "ecmaVersion": 12,
      "parser": "@typescript-eslint/parser",
      "sourceType": "module"
}

**错误2: [eslint] 'module' is not defined. (no-undef)**
module.exports = {
  env: {
    browser: true,
    es2021: true
  },

解决：
env环境配置要支持 node
所以配置信息如下：
module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true
  },

**错误3: ESLint: The template root requires exactly one element**.(**vue/no-multiple-template-root**)
这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错

解决：vue3 中允许 不加入根标签，上面错误括号中粗体的部分，刚好是提示rules的部分，如果不想要提示，可以在rules中添加
"vue/no-multiple-template-root": 0

**错误4: TS1259: Module '"path"' can only be default-imported using the 'esModuleInterop' flag**

解决：import * as path from 'path'
****

path

console

安装配置 Prettier

prettier官网 https://prettier.io/docs/en/install.html

安装

pnpm add prettier

配置

// 创建一个 .prettierrc.js/json 文件，配置美化格式
module.exports = {
    semi: false,
    singleQuote: true,
}

// 创建一个 .prettierignore 文件，配置忽略的文件
node_modules

// webStorm编辑器配置

prettier

验证

// 在实际写代码过程中使用，option+command+L 格式化代码的时候，具体添加合适的美化规则

module.exports = {
  semi: false, // 是否在语句末尾打印分号
  singleQuote: true, // 是否使用单引号
  printWidth: 100, // 单行输出（不折行）的（最大）长度
  quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
  tabWidth: 2, // 每个缩进级别的空格数
  tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)
  bracketSpacing: true, // 是否在对象属性添加空格
  jsxBracketSameLine: true, // 将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）,默认false,这里选择>不另起一行
  htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
  trailingComma: 'none', // 去除对象最末尾元素跟随的逗号
  useTabs: false, // 不使用缩进符，而使用空格
  jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
  arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
  rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
  proseWrap: 'always', // 当超出print width（上面有这个参数）时就折行
  endOfLine: 'lf' // 换行符使用 lf
}

安装配置 stylelint

https://stylelint.io/user-guide/get-started stylelint官网

https://sailormillet.github.io/2021/02/03/stylelint-css代码格式化/

https://blog.csdn.net/weixin_49766444/article/details/108535741

安装

pnpm add 
stylelint 
stylelint-config-standard
stylelint-config-rational-order
stylelint-prettier
stylelint-config-prettier
-D

配置

// 在你的项目根目录下创建一个.stylelintrc.js配置文件
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-prettier/recommended'
  ],
  rules: {
    // 颜色值小写
    'color-hex-case': 'lower',
    // 注释前无须空行
    'comment-empty-line-before': null,
    // 使用数字或命名的 (可能的情况下) font-weight 值
    'font-weight-notation': null,
    // 在函数的逗号之后要求有一个换行符或禁止有空白
    'function-comma-newline-after': null,
    // 在函数的括号内要求有一个换行符或禁止有空白
    'function-parentheses-newline-inside': null,
    // url使用引号
    'function-url-quotes': 'always',
    // 字符串使用单引号
    'string-quotes': 'single',
    // 禁止低优先级的选择器出现在高优先级的选择器之后
    'no-descending-specificity': null,
    // 禁止空源
    'no-empty-source': null,
    // 禁止缺少文件末尾的换行符
    'no-missing-end-of-source-newline': null,
		// font-family太多，具体的问题我也不知道 ，先屏蔽错误再说
    'font-family-no-missing-generic-family-keyword': null
  }
}

验证

// 在实际写代码过程中使用时验证
错误1：stylelint规则和prettier规则冲突
// 之前的配置
extends: 'stylelint-config-standard',

解决：
1. 安装stylelint-prettier stylelint-config-prettier ，配置prettier规则覆盖stylelint规则，从而不报错
2. 安装 stylelint-config-recess-order 增加 css 属性顺序排序校验
// 现在的配置
extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order',
    'stylelint-prettier/recommended'
  ],

** 还遗留了一个问题，webStorm 中stylelint无法在保存时直接fix文件，但是使用prettier规则覆盖stylelint规则，这个问题就不存在了
** 不过在想使用stylelint规则格式化css样式代码，prettier专注其他逻辑代码，这样要怎么配置

安装配置 Vuex 4

安装

pnpm add vuex@next

配置

// store/index.ts
import { createStore } from 'vuex'

interface data {
  count: number
}

export const store = createStore({
  // 通过限定传入的参数类型
  state: (): data => {
    // 必须要有返回
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {}
})

// main.ts
import { createApp } from 'vue'
import router from '@/router'
import {store} from '@/store'
import App from './App.vue'
import "ant-design-vue/dist/antd.less"
// import '@ant-design/icons-vue'

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

验证

// vuex.vue

安装配置 git提交前校验 pre-commit

  • 参考链接：
    1. https://github.com/ZSI2017/blog/issues/14
    2. https://joyran.github.io/yi-blog/blog/code-guide.html
    4. https://juejin.cn/post/6974301879731748900

安装

pnpm add yorkie lint-staged -D

配置

// 代码提交时，针对本次提交的修改文件进行校验。在package.json文件内
{
	"gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "*.{vue,css,sass,less}": [
      "stylelint --fix",
      "git add"
    ],
    "*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  }
}

验证

// 已验证，后续过程中继续查缺补漏

安装配置 commit-message

安装

pnpm add @commitlint/config-conventional @commitlint/cli

配置

// 执行 git commit 时，对msg信息规范，用于添加人和机器可读的含义来提交消息

// 根据官网的描述，创建commitlint.config.js，并配置里面的信息，
// 也可以新建 .commitlintrc.js 文件，在 package.json 中也对应更改一下
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

// package.json
"gitHooks": {
		// 配置1: 目前使用配置1，配置2是公司目前项目用的，不知道这个 $HUSKY_GIT_PARAMS 是什么
    "commit-msg": "commitlint --config commitlint.config.js -e -V",
		// 配置2: 暂时未使用配置2,配置2内容在使用HUSKY时，参数为：$HUSKY_GIT_PARAMS
		// 如果使用yokie，默认使用的参数是：GIT_PARAMS
    "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"
  },

// 修改项目目录下的.git/hooks 内的需要启用的脚本
// 以下使用到的4个如下：

**//  commit-msg**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if commit-msg is defined, skip if not
has_hook_script commit-msg || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" commit-msg || {
  echo
  echo "commit-msg hook failed (add --no-verify to bypass)"
  exit 1
}

**// pre-commit**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if pre-push is defined, skip if not
has_hook_script pre-push || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" pre-push || {
  echo
  echo "pre-push hook failed (add --no-verify to bypass)"
  exit 1
}

**// push-to-checkout**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if push-to-checkout is defined, skip if not
has_hook_script push-to-checkout || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" push-to-checkout || {
  echo
  echo "push-to-checkout hook failed (add --no-verify to bypass)"
  exit 1
}

**// pre-push**
#!/bin/sh
#yorkie 2.0.0

command_exists () {
  command -v "$1" >/dev/null 2>&1
}

has_hook_script () {
  [ -f package.json ] && cat package.json | grep -q "\\"$1\\"[[:space:]]*:"
}

# OS X and Linux only
load_nvm () {
  # If nvm is not loaded, load it
  command_exists nvm || {
    export NVM_DIR="$1"
    [ -s "$1/nvm.sh" ] && . "$1/nvm.sh"
  }
}

# OS X and Linux only
run_nvm () {
  # If nvm has been loaded correctly, use project .nvmrc
  command_exists nvm && [ -f .nvmrc ] && nvm use
}

cd "."

# Check if pre-push is defined, skip if not
has_hook_script pre-push || exit 0

# Add common path where Node can be found
# Brew standard installation path /usr/local/bin
# Node standard installation path /usr/local
export PATH="$PATH:/usr/local/bin:/usr/local"

# Try to load nvm using path of standard installation
load_nvm /Users/heyhaiyang/.nvm
run_nvm

# Export Git hook params
export GIT_PARAMS="$*"

# Run hook
node "./node_modules/yorkie/src/runner.js" pre-push || {
  echo
  echo "pre-push hook failed (add --no-verify to bypass)"
  exit 1
}

commit-msg

pre-commit

pre-push

push-to-checkout

附加配置——选择性添加 lint 脚本

https://juejin.cn/post/6991728251034959885

// 根据我自己的项目，npm 要替换成 pnpm ，用不同的包管理器
"scripts": {
 "dev": "vite",
 "build": "tsc && vite build",
 "serve": "vite preview",
 // 主要配置 触发pre-commit 进行elint stylelint 格式校验
 "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
 "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
 "lint:prettier": "prettier --check "**/*" --end-of-line auto",
 "lint:style": "stylelint --fix "src/**/*.less" --syntax less",
 "lint-staged": "lint-staged",
 "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "
 },

验证

// 暂未验证，后续过程中验证

Find me

Gitee：https://gitee.com/heyhaiyon/vite-vue-ts-antd.git

微信公众号：heyhaiyang

掘金：heyhaiyang

博客园：heyhaiyang

头条号：heyhaiyang

vuexVueRoutervue3vueTypeScriptant-design-vueeslintprettierstyleLintGithooks

相关

创建vue项目的第一步——之安装vue 命令更新了

vue打包报错

vue登录页面后台返回验证码图片

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

vue axios 1 创建项目及简单配置axios

vue两层list循环后，内层循环页面选择类型

HMVue1.5【Source Map】

vue代理服务器proxy详情配置信息

钉钉机器人自动关联 GitHub 发送 approval prs

[转]Vue-cli3.x引入本地json报404 解决方案

[转]Vue CLI 3搭建vue+vuex 最全分析

AntDesign vue学习笔记（三）嵌套路由使用

标签