绝配前端组件库

# 1. 环境定义

# 1.1. vscode 的安装

下载开发工具 vscode 官网 (opens new window) 下载最新版的 vscode

# 1.2. vscode 的配置

  • 1.2.1 Vetur

Vetur 支持.vue 文件的语法高亮显示。

Vetur 默认使用 eslint-plugin-vue@beta 来检测 <template> 你可以在设置中的 settings.json 文件关闭 linting：修改 vetur.validation.template 为 false 即可

  • 1.2.2. 格式化保存 prettier
    安装 prettier,通过脚手架工具创建的项目中，都会有个默认的 prettier 配置项。在保存代码时，prettier 会按照指定的规范格式化代码，保持统一风格。如果不生效，需要检查 vscode 的配置项是否有以下配置。

  • setting.json

"prettier.requireConfig": true,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
  • 1.2.3. 其他常用 vscode 插件推荐

Image preview： 预览图片

wxml： 微信小程序 wxml 格式化以及高亮组件

uni-app-devtools：vscode 的 uniapp 插件，方便 uniapp 在 vscode 开发

open-in-browser：在浏览器中查看

Bracket Pair Colorizer： 用不同颜色高亮显示匹配的括号

Highlight Matching Tag：高亮显示匹配标签

Improt Cost：这个插件可以在你导入工具包的时候提示这个包的体积，如果体积过大就需要考虑压缩包，为后期上线优化做准备。

GitLens：查看 Git 信息，将光标移到代码行上，即可显示当前行最近的 commit 信息和作者

# 2.文件目录

├── src -------------------------------------------工作目录
│ ├── api -----------------------------------------接口 api
│ ├── assets --------------------------------------图片资源，css 预置
│ ├── components ----------------------------------全局组件库，尽量考虑封装到组件库中
│ ├── directive -----------------------------------自定义指令，目前主要是权限
│ ├── layout --------------------------------------基本布局：导航，头部模块
│ ├── router --------------------------------------路由模块
│ ├── store ---------------------------------------存储用户相关信息，系统相关信息
│ ├── utils ---------------------------------------工具包
│ ├── views ---------------------------------------主界面
│ │ └── test --------------------------------------test 模块
│ │ │ └── cmp -------------------------------------test 模块相关的组件
│ │ │ └── index.vue -------------------------------test 主页面
│ ├── App.vue -------------------------------------主界面入口
│ ├── main.js -------------------------------------主界面挂载
├── .env.dev --------------------------------------开发环境
├── .env.development ------------------------------测试环境
├── .env.staging ----------------------------------预发布环境
├── .env.production -------------------------------生产环境
├── .prettierignore -------------------------------格式化代码忽略的文件配置
├── .prettierrc -----------------------------------格式化代码配置

<1> 所有包名必须单词小写，js 文件、vue 文件名，一律小写，不允许用驼峰法命名，使用中划线。
<2> 国际化文件的命名必须与对应页面命名一致。例如 customer 模块对应的国际化文件名字为 customer.js
<3> 尽量采用组件库的公共方法和组件，非特殊原因不许引入第三方
<4> 所有自定义的 html 标签，不允许使用驼峰，默认采用分隔符。
<5> 监听事件处理统一采用`doXXX``，且事件名称应快可能短，例如：select, save, cancel, confirm
<6> 每一行的代码开始，禁止使用 （） 和 []，prettier 格式化会在开始加个分号，可以分成 2 行。
<7> 变量名要直观，禁止使用数字、拼音。

← v1.0.0 →