# vue3-admin-ts

**Repository Path**: javafdx/vue3-admin-ts

## Basic Information

- **Project Name**: vue3-admin-ts
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-28
- **Last Updated**: 2022-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

### 集成 editorconfig 配置

作用：统一代码风格
vscode 需要安装插件:
EditorConfig for VSCode

webstorm 都会读取这个文件

### 使用 prettier

作用：格式化代码工具
vscode 本身可以安装这个插件
但是其他人可能不用 vscode
就得在项目中安装这个依赖了
npm install prettier -D

新建.prettierrc
{
"useTabs": false, // 使用 tab 缩进还是空格缩进，选择 false
"tabWidth": 2, // tab 是空格的情况下，是几个空格，选择 2 个
"printWidth": 80, // 当行字符的长度，推荐 80，也有人喜欢 100 或者 120
"singleQuote": true, // 使用单引号还是双引号，选择 true,使用单引号
"trailingComma": "none", // 在多行输入的尾逗号是否添加，设置为 none
"semi": false // 语句末尾是否要加分号，默认值 true,选择 false 表示不加
}

创建.prettierignore 忽略文件
`

<!--
/dist/*
.local
.output.js
/node_modules/**

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

/public/*
-->

`
---package.JOSN
（格式化所有文件）
添加
"prettier": "prettier --write ."

#### vscode 安装 eslint 插件

prettierrc 和 eslintrc 是冲突的
不兼容
解决办法（安装依赖）不需要安装（vue cli 已经安装了）
npm install eslint-plugin-prettier eslint-config-prettier -D

需要在.eslintrc.js 中添加
'plugin:prettier/recommended'

#### git 拦截--

npx husky-init && npm install
npm install husky@7.0.0
提交代码之前，会格式化代码

#### git 提交信息--规范化

npm install commitizen -D
npm install commitizen -D
初始化
npx commitizen init cz-conventional-changelog --save-dev --save-exact
规范：npx cz

#### 防止 git commit 不规范

npm i @commitlint/config-conventional @commitlint/cli -D
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

提交代码用
git add .

npm run commit

git push

#### 新建 vue.config.js

1. 解释
   configureWebpack: {
   resolve: {
   alias: {
   components: '@/components' // 相当于引入的时候，不用写@
   }
   }
   }

### vue-router 集成

安装 vue-router 的最新版本：

```shell
npm install vue-router@next
```

### vuex 集成

安装 vuex：

```shell
npm install vuex@next
```

### element-plus 集成

npm install element-plus

全部集成
import ElementPlus from 'element-plus'
app.use(ElementPlus)
引入样式文件
import 'element-plus/lib/theme-chalk/index.css' // 官网已经修改为下方引入
import 'element-plus/dist/index.css'

2. 按需引入
   npm install babel-plugin-import -D

配置 babel.config.js

#### 模拟请求

httpbin.org

#### eslint 关闭 any 警告

'@typescript-eslint/no-explicit-any': 'off'

#### 全局样式初始化

import "normalize.css"

npm install normalize.css

#### ref 和 reactive 的区别

reactive 的用法与 ref 的用法相似，也是将数据变成响应式数据，当数据发生变化时 UI 也会自动更新。不同的是 ref 用于基本数据类型，而 reactive 是用于复杂数据类型，比如对象和数组
基本类型（数字、字符串、布尔值）在 reactive 中无法被创建成 proxy 对象，也就无法实现监听。无法实现响应式

#### json2ts 转换工具

js 对象转 ts 类型

#### template 使用图片的绝对路径

<img class="img" src="~@/assets/img/logo.svg" alt="logo" />

#### 日期处理库

npm install dayjs

#### 组件国际化

<el-config-provider :locale="locale"></el-config-provider>

#### 安装 echarts

npm install echarts

<!-- import * as echarts from 'echarts' -->

##### 升级 vue 版本

npm install vue@next
npm install @vue/compiler-sfc
要升级到 3.2.x

#### 项目部署

git bash 可以利用 ssh 链接服务器

1. ssh 用户名@公网 ip ssh root@8.134.66.235

   ssh fdx@172.104.149.251
   f5011570

   yes
   yes
   password

2. pwd 查看当前目录
   ls 查看当前目录
   cd .. 返回上一层