vue3+ts管理后台笔记1(创建项目配置基础信息）

Shining_F

已于 2024-09-11 15:49:35 修改

阅读量1k

点赞数 7

分类专栏： vue3ts项目笔记文章标签：笔记

于 2024-09-04 09:51:09 首次发布

本文链接：https://blog.youkuaiyun.com/Shining_F/article/details/140013539

版权

vue3ts项目笔记专栏收录该内容

2 篇文章

订阅专栏

coderwhy课程学习笔记

一、创建项目

二、.editorconfig文件

.editorconfig 是一个用于统一代码风格的配置文件，它可以被多个编辑器和IDE识别和应用。通过在项目中添加一个名为 .editorconfig 的文件，可以确保团队成员在不同的编辑器中编写代码时遵循相同的代码风格和规范。

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

需安装一下插件，.editorconfig文件才能在vscode编辑器中生效

三、prettier工具

1、也可以安装prettier包

npm install prettier -D

2、配置 .prettierrc文件

useTabs：使用tab缩进还是空格缩进，选择false；
tabWidth：tab是空格的情况下，是几个空格，选择2个；
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
singleQuote：使用单引号还是双引号，选择true，使用单引号；
trailingComma：在多行输入的尾逗号是否添加，设置为 none；

semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

4.VSCode需要安装prettier的插件

5、在package.json中配置一个scripts：

   "prettier": "prettier --write ."

遇到问题暂未解决（ctrl+s,触发不了.prettierrc文件的格式化触发的事插件的规则，npm run prettier却能触发.prettierrc文件的格式化）

四、使用ESLint检测

解决eslint和prettier冲突的问题：

添加prettier插件：

extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

问题记录，未写最后一行代码时代码中也没有prettier和eslint的冲突

五、git Husky和eslint

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push
执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复

1、安装husky

//window git bash
npx husky-init && npm install
//window powershell终端/cmd
npx husky-init '&&' npm install
或者
npx husky-init -and npm install

2、配置文件

.pre-commit文件中把npm test 改为 npm run lint

遇到的现象，鼠标移入控制台，代码中不规范的空格会自动修复

六、Commitizen

1、安装Commitizen

npm install commitizen -D

2、安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

方法一

npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个命令会安装cz-conventional-changelog，并且在package.json中进行配置：

"config": {

"commitizen": {

"path": "./node_modules/cz-conventional-changelog"

}

方法二

（1）npm install cz-conventional-changelog -D

（2）手动在package.json中进行配置以上代码

3、提交代码需要使用 npx cz

commitlint代码提交验证

1.安装 @commitlint/config-conventional 和 @commitlint/cli

npm i @commitlint/config-conventional @commitlint/cli -D

2.在根目录创建commitlint.config.js文件，配置commitlint

module.exports = {
  extends: ['@commitlint/config-conventional']
}

3.使用husky生成commit-msg文件，验证提交信息：

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

4、package.json中配置，"commit": "cz"

执行npm run commit 代替npx cz

七、引入element-plus

1.安装

npm install element-plus --save

全局引用 main.ts中配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

八、区分不同环境

根据不同环境设置不同环境变量

根据process.env.NODE_ENV

开发环境： development

生产环境： prodection

测试环境： test

let BASE_URL = '';
let BASE_NAME = '';
if(process.env.NODE_ENV == 'development') {
  BASE_URL='http://haha1.com';
  BASE_NAME='haha1';
} else if(process.env.NODE_ENV == 'development') {
  BASE_URL='http://haha2.com';
  BASE_NAME='haha2';
} else {
  BASE_URL='http://haha3.com';
  BASE_NAME='haha3';
}
//es6语法导出
export {BASE_URL, BASE_NAME}

vuecli支持的方式

.env文件什么环境都可以注入

.env.development

.env.production

.env.test

自定义名称用VUE_APP_...