Vue3 + TypeScript 构建CMS 系统

初始化项目

初步展示

源码地址

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

prettier 规范

yarn add prettier -D

+.prettierrc

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

+prettierignore

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

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

/public/*

添加脚本进行格式化修复

"prettier": "prettier --write ."

让eslint 和prettier结合起来两个插件

yarn add eslint-config-prettier eslint-plugin-prettier -D

eslintrc.js

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

git 和eslint

npx husky-init && yarn instal

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint

git commit 规范

yarn add commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact

在package.json里面可以看见

"config": {
"commitizen": {
  "path": "./node_modules/cz-conventional-changelog"
  }
}

然后再使用进行提交代码

git add.
npx cz

代码提交限制

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

+commitlint.config.js

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

添加 message hook拦截 执行以下命令

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

element-plus引入

按需引入

yarn add babel-plugin-import -D

环境区分

引入axios

yarn add axios

mock 数据

yarn add @types/mockjs mockjs -D

css 初始化

yarn add normalize.css

• view 下面的文件命名 采用中划线
• 页面子组件放在 cpns 下面

用到的ts 知识点

ts 获取组件实例的类型
const instance = ref<InstanceType<typeof ElForm>>()

用户登录

处理用户的token过期，一般是放在后台来控制，然后前端在拦截器里面做处理。

前端也可以在写localstorage里面，同时写入过期时间，但是不推荐。

ts 使用问题

小结。

代码还在优化中， 支不支持移动端是一个纠结的问题，个人倾向于不支持移动端，还有的就都在代码里面了，具体大家可以在代码仓库查看或者留言，有更好的建议可以一起分享。