Vue进阶之Vue项目实战（一）

VillanelleS

已于 2024-05-23 23:56:17 修改

阅读量1.4k

点赞数 13

分类专栏：前端 Vue基础 Vue3基础文章标签： vue.js 前端 javascript

于 2024-05-03 14:30:30 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/138370656

版权

本文介绍了Vue项目的配置过程，包括初始化项目、设置eslint和版本约束、配置stylelint、使用cspell进行拼写检查、集成cz-git方便commit管理和使用husky实现git钩子。详细步骤包括安装依赖、配置文件的修改以及各工具的使用方法。

摘要由CSDN通过智能技术生成

Vue项目实战

项目搭建
- 初始化
- eslint+版本约束
- - 版本约束
  - eslint配置
- stylelint
- cspell
- cz-git
- husky
- - 给拦截举个例子
- zx

项目搭建

node版本：20.11.1
pnpm版本：9.0.4

初始化

vue3最新的脚手架

pnpm create vite byelide-demo --template vue-ts

请添加图片描述

pnpm i

请添加图片描述

pnpm dev

请添加图片描述
改端口号：
vite.config.ts:

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

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

eslint+版本约束

版本约束

package.json

{
   
  "name": "byelide-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   
    "dev": "vite",
    "lint":"eslint --fix .",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   
    "vue": "3.4.26"
  },
  "devDependencies": {
   
    "@vitejs/plugin-vue": "5.0.4",
    "typescript": "5.4.5",
    "vite": "5.2.10",
    "vue-tsc": "2.0.15",
    "eslint": "9.1.1"
  }
}

pnpm lint

eslint配置

package.json加：

 "eslint-plugin-vue":"9.25.0",
 "vue-eslint-parser":"9.4.2"

请添加图片描述
eslint.config.js：

import pluginVue from 'eslint-plugin-vue';
import vueEslintParser from 'vue-eslint-parser'

export default [
  {
   
    files:["**/*,.{ts,tsx,vue}"],
    rules: {
   
        semi: "error",
        "prefer-const": "error",
        "no-console":'error'
    }
  }
];

再执行：

pnpm i

最终版本：
eslint.config.js:

import js from "@eslint/js";
import pluginVue from 'eslint-plugin-vue';
// importSort插件功能是：项目中引入插件的顺序必须先是官方，后是自己的插件
import importSort from 'eslint-plugin-simple-import-sort';
import vueEslintParser from 'vue-eslint-parser'
import globals from 'globals';
import tsParser from '@typescript-eslint/parser';

export default [
  {
   
    languageOptions:{
   
      globals:{
   
        ...globals.browser,
        computed:"readonly",
        defineEmits:"readonly",
        defineExpose:"readonly",
        defineProps:"readonly",
        onMounted:"readonly",
        onUnmounted:"readonly",
        reactive:"readonly",
        ref:"readonly",
        shallowReactive:"readonly",
        shallowRef:"readonly",
        toRef:"readonly",
        toRefs:"readonly",
        watch:"readonly",
        watchEffect:"readonly"
      }
    }
  },
  {
   
    files:["**/*,.{ts,tsx,vue}"],
    ignores:[],
    rules: {
   
      ...js.configs.recommended.rules,
      ...pluginVue.configs['flat/recommended'].rules,
      "no-console":'error',
      'no-debugger':"error",
      "vue/valid-define-emits":"error",
      "simple-import-sort/imports":"error"

最低0.47元/天解锁文章