element-plu…

falseVSCode需要安装一个插件EditorConfig

for

JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown

等语言基本上前端能用到的文件格式它都可以搞定是当下最流行的代码格式化工具。

1.安装prettier

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

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

{useTabs:

**/*.sh/public/*4.VSCode需要安装prettier的插件

prettier:

1.在前面创建项目的时候我们就选择了ESLint所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件

安装插件vue在创建项目时如果选择prettier那么这两个插件会自动安装

npm

[plugin:vue/vue3-essential,eslint:recommended,vue/typescript/recommended,vue/prettier,vue/prettier/typescript-eslint,plugin:prettier/recommended],1.4.

git

虽然我们已经要求项目使用eslint了但是不能保证组员提交代码之前都将eslint中的问题解决掉了

那么我们需要在组员执行

命令的时候对其进行校验如果不符合eslint规范那么自动通过规范进行修复

hook工具可以帮助我们触发git提交的各个阶段pre-commit、commit-msg、pre-push

如何使用husky呢

接下来我们需要去完成一个操作在进行commit时执行lint脚本

这个时候我们执行git

commit会按照统一的风格来提交这样可以快速定位每次提交的内容方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情我们可以使用一个工具Commitizen

Commitizen

-D2.安装cz-conventional-changelog并且初始化cz-conventional-changelog

npx

--save-exact这个命令会帮助我们安装cz-conventional-changelog

并且在package.json中进行配置

(documentation)style代码格式修改(white-space,

formatting,

etc)refactor代码重构(refactor)perf改善性能(A

code

等chore变更构建流程或辅助工具(比如更改测试环境)revert代码回退

issue

-D2.在根目录创建commitlint.config.js文件配置commitlint

module.exports

[commitlint/config-conventional]

npx

https://www.my-app.com/比如outputDir修改输出的文件夹

方式二通过configureWebpack修改webpack的配置

可以是一个对象直接会被合并可以是一个函数会接收一个config可以通过config来修改配置

webpack-chain

import(../views/main/main.vue)},{path:

/login,component:

import(../views/login/login.vue)}

]const

./routercreateApp(App).use(router).mount(#app)在App.vue中配置跳转

templatediv

to/login登录/router-linkrouter-link

to/main首页/router-linkrouter-view/router-view/div

/template2.3.

createApp(App).use(router).use(store).mount(#app)在App.vue中使用

h2{{

相信很多同学在Vue2中都使用过element-ui而element-plus正是element-ui针对于vue3开发的一个UI组件库它的使用方式和很多其他的组件库是一样的所以学会element-plus其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的

安装element-plus

一种引入element-plus的方式是全局引入代表的含义是所有的组件和插件都会被自动注册

import

element-plus/lib/theme-chalk/index.cssimport

router

./storecreateApp(App).use(router).use(store).use(ElementPlus).mount(#app)2.4.2.

局部引入

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

/templatescript

/style但是我们会发现是没有对应的样式的引入样式有两种方式

npm

element-plus/lib/theme-chalk/${name}.css}}]],presets:

这些组件我们在多个页面或者组件中使用的时候都需要导入并且在components中进行注册所以我们可以将它们在全局注册一次

import

{ElButton,ElTable,ElAlert,ElAside,ElAutocomplete,ElAvatar,ElBacktop,ElBadge,

from

[ElButton,ElTable,ElAlert,ElAside,ElAutocomplete,ElAvatar,ElBacktop,ElBadge

]for

AxiosRequestConfigconstructor(options:

AxiosRequestConfig)

axios.create(options)this.instance.interceptors.request.use((config)

{const

err})this.instance.interceptors.response.use((res)

{//

AxiosResponseResultT(config).then((res)

{resolve((res

vscode-great-icons,editor.fontSize:

off,[javascript]:

dbaeumer.vscode-eslint},files.autoSave:

2,terminal.integrated.fontSize:

{strings:

javascriptreact},explorer.confirmDragAndDrop:

16,javascript.updateImportsOnFileMove.enabled:

${workspaceRoot}/src},hediet.vscode-drawio.local-storage:

eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ,hediet.vscode-drawio.theme:

Source

monospace,editor.smoothScrolling:

esbenp.prettier-vscode,workbench.colorTheme:

Atom

Dark,vetur.completion.autoImport:

false,security.workspace.trust.untrustedFiles:

true}

https://documenter.getpostman.com/view/12387168/TzsfmQvw

http://152.136.185.210:5000设置全局token的方法

const

https://documenter.getpostman.com/view/12387168/TzzDKb12