网站 自助建站,中国建设移动门户网站,wordpress 访问很慢,东莞短视频制作公司项目搭建规范 一. 代码规范1.1. 集成editorconfig配置1.2. 使用prettier工具1.3. 使用ESLint检测1.4. git Husky和eslint1.5. git commit规范1.5.1. 代码提交风格1.5.2. 代码提交验证 二. 第三方库集成2.1. vue.config.js配置2.2. vue-router集成2.3. vuex集成2.4. element-plu… 项目搭建规范 一. 代码规范1.1. 集成editorconfig配置1.2. 使用prettier工具1.3. 使用ESLint检测1.4. git Husky和eslint1.5. git commit规范1.5.1. 代码提交风格1.5.2. 代码提交验证 二. 第三方库集成2.1. vue.config.js配置2.2. vue-router集成2.3. vuex集成2.4. element-plus集成2.4.1. 全局引入2.4.2. 局部引入 2.5. axios集成2.6. VSCode配置 三. 接口文档 一. 代码规范
1.1. 集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
# http://editorconfig.orgroot 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 falseVSCode需要安装一个插件EditorConfig for VS Code
1.2. 使用prettier工具
Prettier 是一款强大的代码格式化工具支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言基本上前端能用到的文件格式它都可以搞定是当下最流行的代码格式化工具。
1.安装prettier
npm install prettier -D2.配置.prettierrc文件
useTabs使用tab缩进还是空格缩进选择falsetabWidthtab是空格的情况下是几个空格选择2个printWidth当行字符的长度推荐80也有人喜欢100或者120singleQuote使用单引号还是双引号选择true使用单引号trailingComma在多行输入的尾逗号是否添加设置为 nonesemi语句末尾是否要加分号默认值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.测试prettier是否生效
测试一在代码中保存代码测试二配置一次性修改的命令
在package.json中配置一个scripts prettier: prettier --write .npm run prettier 全部修改
1.3. 使用ESLint检测
1.在前面创建项目的时候我们就选择了ESLint所以Vue会默认帮助我们配置需要的ESLint环境。
2.VSCode需要安装ESLint插件
3.解决eslint和prettier冲突的问题
安装插件vue在创建项目时如果选择prettier那么这两个插件会自动安装
npm i eslint-plugin-prettier eslint-config-prettier -D添加prettier插件 extends: [plugin:vue/vue3-essential,eslint:recommended,vue/typescript/recommended,vue/prettier,vue/prettier/typescript-eslint,plugin:prettier/recommended],1.4. git Husky和eslint
虽然我们已经要求项目使用eslint了但是不能保证组员提交代码之前都将eslint中的问题解决掉了 也就是我们希望保证代码仓库中的代码都是符合eslint规范的 那么我们需要在组员执行 git commit 命令的时候对其进行校验如果不符合eslint规范那么自动通过规范进行修复
那么如何做到这一点呢可以通过Husky工具
husky是一个git hook工具可以帮助我们触发git提交的各个阶段pre-commit、commit-msg、pre-push
如何使用husky呢
这里我们可以使用自动配置命令
npx husky-init npm install这里会做三件事
1.安装husky相关的依赖
2.在项目目录下创建 .husky 文件夹
npx huksy install3.在package.json中添加一个脚本
接下来我们需要去完成一个操作在进行commit时执行lint脚本
这个时候我们执行git commit的时候会自动对代码进行lint校验。
1.5. git commit规范
1.5.1. 代码提交风格
通常我们的git commit会按照统一的风格来提交这样可以快速定位每次提交的内容方便之后对版本进行控制。
但是如果每次手动来编写这些是比较麻烦的事情我们可以使用一个工具Commitizen
Commitizen 是一个帮助我们编写规范 commit message 的工具
1.安装Commitizen
npm install commitizen -D2.安装cz-conventional-changelog并且初始化cz-conventional-changelog
npx commitizen init cz-conventional-changelog --save-dev --save-exact这个命令会帮助我们安装cz-conventional-changelog
并且在package.json中进行配置
这个时候我们提交代码需要使用 npx cz
第一步是选择type本次更新的类型
Type作用feat新增特性 (feature)fix修复 Bug(bug fix)docs修改文档 (documentation)style代码格式修改(white-space, formatting, missing semi colons, etc)refactor代码重构(refactor)perf改善性能(A code change that improves performance)test测试(when adding missing tests)build变更项目构建或外部依赖例如 scopes: webpack、gulp、npm 等ci更改持续集成软件的配置文件和 package 中的 scripts 命令例如 scopes: Travis, Circle 等chore变更构建流程或辅助工具(比如更改测试环境)revert代码回退 第二步选择本次修改的范围作用域 第三步选择提交的信息 第四步提交详细的描述信息 第五步是否是一次重大的更改 第六步是否影响某个open issue
我们也可以在scripts中构建一个命令来执行 cz
1.5.2. 代码提交验证
如果我们按照cz来规范了提交风格但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢
我们可以通过commitlint来限制提交
1.安装 commitlint/config-conventional 和 commitlint/cli
npm i commitlint/config-conventional commitlint/cli -D2.在根目录创建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二. 第三方库集成
2.1. vue.config.js配置
vue.config.js有三种配置方式
方式一直接通过CLI提供给我们的选项来配置 比如publicPath配置应用程序部署的子目录默认是 /相当于部署在 https://www.my-app.com/比如outputDir修改输出的文件夹 方式二通过configureWebpack修改webpack的配置 可以是一个对象直接会被合并可以是一个函数会接收一个config可以通过config来修改配置 方式三通过chainWebpack修改webpack的配置 是一个函数会接收一个基于 webpack-chain 的config对象可以对配置进行修改
const path require(path)module.exports {outputDir: ./build,// configureWebpack: {// resolve: {// alias: {// views: /views// }// }// }// configureWebpack: (config) {// config.resolve.alias {// : path.resolve(__dirname, src),// views: /views// }// },chainWebpack: (config) {config.resolve.alias.set(, path.resolve(__dirname, src)).set(views, /views)}
}2.2. vue-router集成
安装vue-router的最新版本
npm install vue-routernext创建router对象
import { createRouter, createWebHashHistory } from vue-router
import { RouteRecordRaw } from vue-routerconst routes: RouteRecordRaw[] [{path: /,redirect: /main},{path: /main,component: () import(../views/main/main.vue)},{path: /login,component: () import(../views/login/login.vue)}
]const router createRouter({routes,history: createWebHashHistory()
})export default router安装router
import router from ./routercreateApp(App).use(router).mount(#app)在App.vue中配置跳转
templatediv idapprouter-link to/login登录/router-linkrouter-link to/main首页/router-linkrouter-view/router-view/div
/template2.3. vuex集成
安装vuex
npm install vuexnext创建store对象
import { createStore } from vuexconst store createStore({state() {return {name: coderwhy}}
})export default store安装store
createApp(App).use(router).use(store).mount(#app)在App.vue中使用
h2{{ $store.state.name }}/h22.4. element-plus集成
Element Plus一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
相信很多同学在Vue2中都使用过element-ui而element-plus正是element-ui针对于vue3开发的一个UI组件库它的使用方式和很多其他的组件库是一样的所以学会element-plus其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的
安装element-plus
npm install element-plus2.4.1. 全局引入
一种引入element-plus的方式是全局引入代表的含义是所有的组件和插件都会被自动注册
import ElementPlus from element-plus
import element-plus/lib/theme-chalk/index.cssimport router from ./router
import store from ./storecreateApp(App).use(router).use(store).use(ElementPlus).mount(#app)2.4.2. 局部引入
也就是在开发中用到某个组件对某个组件进行引入
templatediv idapprouter-link to/login登录/router-linkrouter-link to/main首页/router-linkrouter-view/router-viewh2{{ $store.state.name }}/h2el-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button/div
/templatescript langts
import { defineComponent } from vueimport { ElButton } from element-plusexport default defineComponent({name: App,components: {ElButton}
})
/scriptstyle langless
/style但是我们会发现是没有对应的样式的引入样式有两种方式
全局引用样式像之前做的那样局部引用样式通过babel的插件
1.安装babel的插件
npm install babel-plugin-import -D2.配置babel.config.js
module.exports {plugins: [[import,{libraryName: element-plus,customStyleName: (name) {return element-plus/lib/theme-chalk/${name}.css}}]],presets: [vue/cli-plugin-babel/preset]
}但是这里依然有个弊端
这些组件我们在多个页面或者组件中使用的时候都需要导入并且在components中进行注册所以我们可以将它们在全局注册一次
import {ElButton,ElTable,ElAlert,ElAside,ElAutocomplete,ElAvatar,ElBacktop,ElBadge,
} from element-plusconst app createApp(App)const components [ElButton,ElTable,ElAlert,ElAside,ElAutocomplete,ElAvatar,ElBacktop,ElBadge
]for (const cpn of components) {app.component(cpn.name, cpn)
}2.5. axios集成
安装axios
npm install axios封装axios
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from axios
import { Result } from ./types
import { useUserStore } from //store/modules/userclass HYRequest {private instance: AxiosInstanceprivate readonly options: AxiosRequestConfigconstructor(options: AxiosRequestConfig) {this.options optionsthis.instance axios.create(options)this.instance.interceptors.request.use((config) {const token useUserStore().getTokenif (token) {config.headers.Authorization Bearer ${token}}return config},(err) {return err})this.instance.interceptors.response.use((res) {// 拦截响应的数据if (res.data.code 0) {return res.data.data}return res.data},(err) {return err})}requestT any(config: AxiosRequestConfig): PromiseT {return new Promise((resolve, reject) {this.instance.requestany, AxiosResponseResultT(config).then((res) {resolve((res as unknown) as PromiseT)}).catch((err) {reject(err)})})}getT any(config: AxiosRequestConfig): PromiseT {return this.request({ ...config, method: GET })}postT any(config: AxiosRequestConfig): PromiseT {return this.request({ ...config, method: POST })}patchT any(config: AxiosRequestConfig): PromiseT {return this.request({ ...config, method: PATCH })}deleteT any(config: AxiosRequestConfig): PromiseT {return this.request({ ...config, method: DELETE })}
}export default HYRequest2.6. VSCode配置
{workbench.iconTheme: vscode-great-icons,editor.fontSize: 17,eslint.migration.2_x: off,[javascript]: {editor.defaultFormatter: dbaeumer.vscode-eslint},files.autoSave: afterDelay,editor.tabSize: 2,terminal.integrated.fontSize: 16,editor.renderWhitespace: all,editor.quickSuggestions: {strings: true},debug.console.fontSize: 15,window.zoomLevel: 1,emmet.includeLanguages: {javascript: javascriptreact},explorer.confirmDragAndDrop: false,workbench.tree.indent: 16,javascript.updateImportsOnFileMove.enabled: always,editor.wordWrap: on,path-intellisense.mappings: {: ${workspaceRoot}/src},hediet.vscode-drawio.local-storage: eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ,hediet.vscode-drawio.theme: Kennedy,editor.fontFamily: Source Code Pro, Courier New, monospace,editor.smoothScrolling: true,editor.formatOnSave: true,editor.defaultFormatter: esbenp.prettier-vscode,workbench.colorTheme: Atom One Dark,vetur.completion.autoImport: false,security.workspace.trust.untrustedFiles: open,eslint.lintTask.enable: true,eslint.alwaysShowStatus: true,editor.codeActionsOnSave: {source.fixAll.eslint: true}
}三. 接口文档
https://documenter.getpostman.com/view/12387168/TzsfmQvw
baseURL的值
http://152.136.185.210:5000设置全局token的方法
const res pm.response.json();
pm.globals.set(token, res.data.token);接口文档v2版本有部分更新
https://documenter.getpostman.com/view/12387168/TzzDKb12
