vue3硅谷甄选01 | 使用vite创建vue3项目及项目的配置 环境准备 ESLint配置 prettier配置 husky配置 项目集成

2023-09-18 21:48:28

文章目录

使用vite创建vue3项目及项目的配置

1.环境准备

使用vite搭建项目，vite需要nodejs版本14.18+、16+

  • node v18.16.1
  • pnpm 8.7.4

pnpm:performant npm(高性能的npm)由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景。

pnpm安装指令

npm i -g pnpm

创建项目

pnpm create vite
cd # 进入项目
pnpm install # 安装依赖 + @vitejs/plugin-vue 4.3.4 + typescript 5.2.2 + vite 4.4.9 + vue-tsc 1.8.10
pnpm run dev # 运行项目

打开项目，需要手动在浏览器输入地址。
修改package.json文件的字段 "dev": "vite --open"，这样使用pnpm run dev命令会自动打开浏览器。

2.项目配置

VSCode 有对应插件Prettier - Code formatter、ESlint、Stylelint可以实现相同的功能

以下配置适用于协同开发的大项目配置。

ESLint校验代码工具配置 - js代码检测工具

eslint:提供一个插件化的javaScript代码检测工具

1.安装ESLint到开发环境 devDependencies
//完整写法
pnpm  install --save-dev eslint 
//简写
pnpm i eslint -D
2.生成配置文件:.eslint.cjs**
npx eslint --init

在这里插入图片描述

.eslint.cjs文件

// 对外暴露的配置对象
module.exports = {
    "env": { // eslint的工作环境
        "browser": true,
        "es2021": true // 校验js语法
    },
    "extends": [ //规则的继承
    	//全部规则默认是关闭的，这个配置项会开启推荐规则(推荐需要遵守的规则)
        "eslint:recommended",
        //vue3语法规则
        "plugin:@typescript-eslint/recommended",
        //ts语法规则
        "plugin:vue/vue3-essential"
    ],
    "overrides": [ //为特定类型的文件指定处理器
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest", //校验ECMA最新版本
        "parser": "@typescript-eslint/parser",//指定解析器，当前表示ts解析器，还可以选择Babel=ESLint babel解析器、默认Esprima解析器
        "sourceType": "module"// 设置为
    },
    // ESLint支持使用第三方插件，在使用插件之前，必须使用npm安装
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    //ESLint校验规则
    "rules": {
    }
}
3.安装vue3环境代码校验插件**
# 让所有与prettier规则存在冲突的Eslint rules失效，并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint，使prettier规则优先级更高，Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件（查找vue语法错误，发现错误指令，查找违规风格指南)
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",

# 指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
4. 修改.eslintrc.cjs配置文件
module.exports = {
  //....
  /* 规则的状态
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
   */
  "rules": {
   // eslint（https://eslint.bootcss.com/docs/rules/）
   // key为规则，右侧为规则的状态
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
    'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
    'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
  },
}
5.生成ESLint忽略文件

文件名：.eslintignore
作用：设置不需要进行校验的文件夹

dist  // 打包文件
node_modules // 依赖文件
6.在package.json新增运行脚本
// 新增运行脚本
"scripts": {
	// ....
    "lint": "eslint src",  // 运行lint指令时，eslint校验src文件夹里面的文件
    "fix": "eslint src --fix", // 对于不符合规则的语法进行纠正
}

prettier配置 - 格式化检测工具

1.安装prettier依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
2.prettierrc.json添加规则

创建prettierrc.json配置文件

{
  "singleQuote": true, // 使用单引号
  "semi": true,   //语句最后方的分号
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2 //缩进占2个位置
}
3. 新建.prettierignore忽略文件

设置不需要格式化的文件夹

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
4. 在package.json新增运行脚本
"scripts": {
	// ....
    "lint": "eslint src",  // 运行lint指令时，eslint校验src文件夹里面的文件
    "fix": "eslint src --fix", // 对于不符合规则的语法进行纠正
    "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
}

husky配置 提交代码前进行的操作

利用husky在代码提交之前触发git hook(git在客户端的钩子)，然后执行pnpm run format来自动的格式化我们的代码。

安装husky

pnpm install -D husky

执行npx husky-init 会在根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit时执行。

前提是文件夹先git init 创建git追踪

在.husky/pre-commit文件添加如下命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm run format

配置commitlint 统一提交规范

利用commitlint统一commit信息的规范

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

添加配置文件，新建commitlint.config.cjs(注意是cjs)，然后添加下面的代码：

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 校验规则
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'feat',//新特性、新功能
        'fix',//修改bug
        'docs',//文档修改
        'style',//代码格式修改, 注意不是 css 修改
        'refactor',//代码重构
        'perf',//优化相关，比如提升性能、体验
        'test',//测试用例修改
        'chore',//其他修改, 比如改变构建流程、或者增加依赖库、工具等
        'revert',//回滚到上一个版本
        'build',//编译相关的修改，例如发布版本、对项目构建或者依赖的改动
      ],
    ],
    'type-case': [0],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
}

在package.json中配置scripts命令

# 在scrips中添加下面的代码
{
"scripts": {
    "commitlint": "commitlint --config commitlint.config.cjs -e -V"
  },
}

配置husky

npx husky add .husky/commit-msg

在生成的commit-msg文件中添加下面的命令

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint

当 commit 提交信息时，必须是git commit -m 'type: xxx' 符合类型的才可以，需要注意的是类型的后面需要用英文的 :，并且冒号后面是需要空一格的，这个是不能省略的

3.项目集成

3.1 集成element-plus ui组件库

安装命令

#  @element-plus/icons-vue 为element-plus提供的图标组件库
pnpm install element-plus @element-plus/icons-vue

在main.ts入口文件引入element-plus ui组件库插件

import { createApp } from 'vue';
import App from './App.vue';

//引入element-plus插件与样式
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';


//获取应用实例对象
const app = createApp(App)

//安装ElementPlus插件
app.use(ElementPlus);

app.mount('#app');

全局配置国际化，在main.ts入口添加

// 以下的import会有波浪线，在build打包的时候会报错，所以添加@ts-ignore忽略当前文件ts类型的检测
//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
    locale: zhCn
})

3.2 src文件夹别名配置

在正常项目下，文件的结构非常复杂。为了寻找文件简单，可以给src文件夹设置别名。利用src文件夹的别名，每次从src开始。

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

TypeScript 编译配置

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": { //路径映射
      "@/*": ["src/*"] 
    }
  }
}

在使用别名引入文件时，可能会有红色波浪线。这是因为vs code的Vetur插件对vue3兼容性不是太好，可以使用vue language feature替换

3.3 环境变量的配置

  • 开发环境（development）：开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。
  • 测试环境（testing）：测试同事干活的环境，一般会由测试同事自己来部署，然后在此环境进行测试。
  • 生产环境（production）：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)

注意:一般情况下，一个环境对应一台服务器。

项目根目录分别添加 开发、生产和测试环境的文件。

.env.development
.env.production
.env.test

配置环境变量

// .env.development
// 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '后台管理系统'
VITE_APP_BASE_API = '/dev-api'

// .env.production
NODE_ENV = 'production'
VITE_APP_TITLE = '后台管理系统'
VITE_APP_BASE_API = '/prod-api'

通过import.meta.env获取环境变量

我这里可以打印，但是波浪线报错 没有env属性？

配置运行命令：package.json

 "scripts": {
    "dev": "vite --open",
    "build:pro": "vue-tsc && vite build --mode production",
  },
更多推荐

Linux高性能服务器编程 学习笔记 第六章 高级IO函数

pipe函数用于创建一个管道，以实现进程间通信：fd参数是一个包含两个int的数组。该函数成功时返回0，并将一对打开的文件描述符填入其参数指向的数组，如果失败，则返回-1并设置errno。pipe函数创建的这两个文件描述符fd[0]和fd[1]分别构成管道的两端，往fd[1]写入的数组可以从fd[0]读出，并且fd[0

夸克扫描王识别精度领跑行业 愿携手各方伙伴探索AIGC应用新范式

日前，在“AIGC与场景化应用创新”主题研讨会上，阿里智能信息事业群夸克视觉技术负责人黄锐华分享了AI技术应用于扫描场景的最新成果。他表示，AIGC给手机扫描产品打开了创新空间，搭载大模型技术的夸克扫描王对识别手写字体、复杂公式和版式理解上的准确率达到了新高度。（夸克视觉技术负责人：黄锐华）经过几十年的发展，扫描技术已

【从入门到起飞】JavaSE—方法引用

🎊专栏【JavaSE】🍔喜欢的诗句：更喜岷山千里雪三军过后尽开颜。🎆音乐分享【Thetruththatyouleave】🥰欢迎并且感谢大家指出我的问题文章目录🍔概述🍔注意🎈如何确定是否是函数式接口🍔示例🎄方法引用的分类🏳️‍🌈引用静态方法🏳️‍🌈引用成员方法🛸注意🏳️‍🌈引用构造方法🛸

python脚本（渗透测试）

python爬取edusrc通过此脚本，可以爬取edusrc的目标信息，生成目标字典，为下一步开发自动化测试工具做准备importqueueimportthreadingimporttimeimportrequestsfrombs4importBeautifulSoupimportredefget_edu_name()

NLP任务评价指标(BLEU，METOR，ROUGH，CIDEr)

BLEU,METEOR,ROUGE一般在机器翻译里用，CIDEr一般在图像字幕生成里用BLEU所谓BLEU，最开始是用于机器翻译中。他的思想其实很native，对于一个给定的句子，有标准译文S1，还有一个神经网络翻译的句子S2。BLEU的思想就是对于出现机器翻译S2的所有短语，看有多少个短语出现在S1中，然后算一下这个

Flink

flink应用场景maven依赖<properties><flink.version>1.17.0</flink.version></properties><dependencies><dependency><groupId>org.apache.flink</groupId><artifactId>flink-str

react 通过ref 获取对应 dom 的位置信息

需求：在点击某个dom元素的时候滚动条要同步滚动进程：获取ref打印，打印出来是一个dom元素，看不到有什么方法查找dom属性信息找到了两个参数，offsetLeft：返回元素的水平偏移位置。offsetTop：返回元素的垂直偏移位置。这两个参数都是基于父节点的，可以直接使用this.cellMainBox.curre

OceanMind海睿思入选弯弓研究院《2023中国营销技术生态图谱8.0》

近日，由国内MarTech领域知名机构弯弓研究院主办的第五届营销数字化大会暨营销科技MarTech交易展在广州成功召开。本次大会发布了《2023中国营销技术生态图谱8.0版》(以下简称“弯弓图谱8.0”)，中新赛克海睿思凭借成熟的技术实力成功入选弯弓图谱8.0的中台板块，成为数据与分析领域本土优秀代表服务商之一。随着企

Linux 共享内存

#include<sys/ipc.h>#include<sys/shm.h>intshmget(key_tkey,size_tsize,intshmflg);功能：创建一个新的内存段或者获得一个既有的共享内存段的标识。新创建的内存段中的数据都会被初始化为0参数：-key：key_t类型是一个整型，通过这个创建或者找到一

Linux查看程序和动态库依赖的动态库

一.前言在一些时候，我们需要知道一个程序或者动态库所依赖的动态库有哪些。比如，当我们运行一个程序的时候，发现可能会报错，提示找不到某个符号，这时我们就需要知道程序依赖了什么库，从而添加对应需要的动态库。等等，接下来介绍两种方法查看程序和动态库所依赖的动态库。二.方法介绍1.使用objdump命令objdump-pFIL

Toaster - Android 吐司框架，专治 Toast 各种疑难杂症

官网https://github.com/getActivity/Toaster这可能是性能优、使用简单，支持自定义，不需要通知栏权限的吐司想了解实现原理的可以点击此链接查看：Toaster源码集成步骤如果你的项目Gradle配置是在7.0以下，需要在build.gradle文件中加入allprojects{repos

热文推荐
  1. 接口自动化测试框架搭建全部过程

    思想：1、基本目录的搭建report:静态输出目录(报告或者日志)data：静态输入目录(可以存放Excel数据，被读取的一些数据)utils:实用方法层(这里存放的是项目的公共方法，一般拿到别的项目可以直接使用，列如：读取Excel中的数据，连接数据库，)apis:接口请求层(这里封装的方法一般都是和项目有关系，列如

  2. MySQL 权限分配

    有时候，您需要查看某个用户被授予的权限以便复核。MySQL允许您使用SHOWGRANTS语句来显示分配给用户帐户或角色的权限。MySQLSHOWGRANTS语句介绍以下是SHOWGRANTS语句的基本语法：SHOWGRANTS[FOR{user|role}[USINGrole[,role]...]]在这个语法中：首先，

  3. 记录一次DLL分析实战

    记录一次DLL分析实战1.VT查看分析报告2.判断文件是否加壳3.查看导入函数4.查看是否有任何其他文件或基于主机的迹象5.使用工具IDAPro进行字符串分析1.VT查看分析报告virustotal全绿，没有报毒：可以看到这个dll是32位的：下面可以看它调用的其他dll：以及它对外提供的函数接口：其中RunCmd很可

  4. Redis简介

    1.Nosql作用：应对基于海量用户和海量数据前提下的数据处理问题。​常见Nosql数据库：​RedismemcacheHBaseMongoDB​特征：可扩容，可伸缩，大数据量下高性能，灵活的数据模型，高可用2.Redis特征：1.数据间没有必然的关联关系2.内部采用单线程机制进行工作3.高性能。官方提供测试数据，50

  5. OceanBase杨传辉传递亚运火炬：国产数据库为“智能亚运”提供稳稳支持

    9月14日，亚运火炬传递到了浙江台州，OceanBase的CTO杨传辉作为火炬手交接了第89棒火炬。2010年，杨传辉作为创始成员之一参与自研原生分布式数据库OceanBase。十年磨一剑，国产数据库OceanBase交出了一张优秀的成绩单：连续10年稳定支撑双11，承受住了世界级的流量洪峰和稳定性考验；刷新过TPC-

  6. go学习-GMP模型

    GMP好理解还是GPM好理解？按照上述图，从上往下，GPM更适合理解GMP模型：Go语言运行时系统中的Goroutine、用于管理Goroutine调度的GoScheduler（P）、机器可用的逻辑处理器数量（M）。理解GPMG每个Goroutine是一个轻量级“线程”，称之为“协程”，可由Go运行时系统并发执行G与P

  7. 2023 Google 开发者大会：将大型语言模型部署到你的手机

    在2022年末，不到半年时间，各家大语言模型的发展如雨后春笋，截至2023年9月，全球总共有接近100个大语言模型，可谓是百花齐放显而易见，大语言模型凭借出色的AI对话能力，已经逐渐深入各个行业2023Google开发者大会带来了AI专题，Google技术推广工程师魏巍提出“将大语言模型部署到个人终端”，关于这点，在外

  8. [NLP] LLM---＜训练中文LLama2(三)＞对LLama2进行中文预料预训练

    预训练预训练部分可以为两个阶段：第一阶段：冻结transformer参数，仅训练embedding，在尽量不干扰原模型的情况下适配新增的中文词向量。第二阶段：使用LoRA技术，为模型添加LoRA权重（adapter），训练embedding的同时也更新LoRA参数。第一阶段预训练由于第一阶段预训练会冻结transfor

  9. Java基于SpringBoot的校园交友网站的设计与实现

    博主介绍：✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W+,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌文章目录一、效果演示二、前言介绍三、主要技术四、系统设计（部分）4.1、主要功能模块设计4.2、系统登录流程设计五、运行截图5.1、系统功能模块5.1.