转至内容
转至导航栏
转至主菜单
转至动作菜单
转至快速搜索
空间
创建
创建
按回车键(Enter)搜索
帮助
在线帮助
快捷键
RSS源建立器
新功能
可用的小工具
关于Confluence
登录
人员
高晨辉
页面
高晨辉的主页
前端开发规范
vue开发规范
vue开发规范
search
attachments
weblink
advanced
image-effects
image-attributes
正文
正文
标题 1
标题 2
标题 3
标题 4
标题 5
标题 6
预格式化
引用
粗体
斜体
下划线
颜色选取器
更多颜色
格式
删除线
下标
上标
等宽
清除格式
无序列表
有序列表
任务列表
减小缩进
增大缩进
左对齐
居中
右对齐
页面布局
链接
表格
插入
插入内容
文件和图片
链接
Wiki标记
水平线
任务列表
日期
表情符号
符号
插入宏
用户提及
Jira问题/过滤器
信息
状态
画廊
目录
其它宏
页面布局
无布局
两栏 (简单)
两栏 (简单,左侧栏)
两栏 (简单,右侧栏)
三栏 (简单)
两栏
两栏 (左侧栏)
两栏 (右侧栏)
三列
三栏 (左边和右侧栏)
回退
重做
查找/替换
键盘快捷方式帮助
你还没有登录。你所做的任何更改会将作者标记为
匿名用户
。 如果你已经拥有帐户,请
登录
。
此页面正在由
编辑,当保存时将会和其他人编辑的内容进行合并。
<h2><strong>1.文件命名</strong></h2><ul><li><p style="margin-left: 0.0px;"><strong>组件文件</strong>:使用<span> </span><code>PascalCase</code><span> </span>命名法,如<span> </span><code>UserProfile.vue</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>工具函数文件</strong>:使用<span> </span><code>camelCase</code><span> </span>命名法,如<span> </span><code>dateUtils.js</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>样式文件</strong>:使用<span> </span><code>kebab-case</code><span> </span>命名法,如<span> </span><code>global-styles.scss</code>。</p></li></ul><h2><strong>2.Vue 组件规范</strong></h2><h4>组件结构</h4><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="57b6dc6c-62a1-4916-9bdb-34bc37622047" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre><template> <div class="user-profile"> <!-- 模板内容 --> </div> </template> <script> export default { name: 'UserProfile', // 组件名使用 PascalCase components: { // 引入的子组件 }, props: { // 定义 props }, data() { return { // 组件数据 }; }, computed: { // 计算属性 }, watch: { // 监听器 }, methods: { // 方法 }, created() { // 生命周期钩子 }, mounted() { // 生命周期钩子 }, }; </script> <style scoped> .user-profile { /* 样式 */ } </style></pre></td></tr></table><h4>组件命名</h4><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="6da088ee-ab3e-42af-9b51-f65cb2b6d0c0" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>props: { userName: { type: String, required: true, }, age: { type: Number, default: 18, }, },</pre></td></tr></table><h3>3.样式规范</h3><h4>Scoped CSS</h4><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>scoped</code><span> </span>属性来限制样式作用域,避免全局污染。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="a7eb163e-e747-429c-aa1d-73576506215f" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre><style scoped> .user-profile { /* 样式 */ } </style></pre></td></tr></table><h4>CSS 预处理器</h4><ul><li><p style="margin-left: 0.0px;">推荐使用<span> </span><code>SCSS</code><span> </span>或<span> </span><code>Less</code><span> </span>作为 CSS 预处理器。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="22c52e68-35bd-49ce-9d90-3e145e6e3709" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre><style lang="less" scoped> .user-profile { .avatar { width: 100px; height: 100px; } } </style></pre></td></tr></table><h3>路由规范</h3><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>kebab-case</code><span> </span>命名路由路径。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="73a7c25f-613f-4bbc-a9a9-c9ed00c4d0b3" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const routes = [ { path: '/user-profile', name: 'UserProfile', component: UserProfile, }, ];</pre></td></tr></table><h4>路由懒加载</h4><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>import()</code><span> </span>语法实现路由懒加载。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="d9d6b633-7f64-4899-9766-3733de5fb697" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>const UserProfile = () => import('@/views/UserProfile.vue');</pre></td></tr></table><h3>4.Vuex 规范</h3><h4>模块化</h4><ul><li><p style="margin-left: 0.0px;">将 Vuex 模块化,每个模块放在<span> </span><code>store/modules/</code><span> </span>目录下。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="e619084e-5f26-46f3-a829-d57a07366637" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>// store/modules/user.js const state = { userInfo: null, }; const mutations = { SET_USER_INFO(state, userInfo) { state.userInfo = userInfo; }, }; const actions = { fetchUserInfo({ commit }) { // 异步操作 }, }; export default { namespaced: true, state, mutations, actions, };</pre></td></tr></table><h4>命名规范</h4><ul><li><p style="margin-left: 0.0px;"><strong>Mutation 类型</strong>:使用<span> </span><code>UPPER_SNAKE_CASE</code><span> </span>命名法,如<span> </span><code>SET_USER_INFO</code>。</p></li><li><p style="margin-left: 0.0px;"><strong>Action 命名</strong>:使用<span> </span><code>camelCase</code><span> </span>命名法,如<span> </span><code>fetchUserInfo</code>。</p></li></ul><h3>5.API 请求规范</h3><h4>接口封装</h4><ul><li><p style="margin-left: 0.0px;">将 API 请求封装在<span> </span><code>api/</code><span> </span>目录下,按模块划分。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="70cfdbae-f7c9-49b4-8dec-cd9a46240b90" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>// api/user.js import request from '@/utils/request'; export function fetchUserInfo(userId) { return request({ url: `/user/${userId}`, method: 'get', }); }</pre></td></tr></table><h4>请求方法</h4><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>axios</code><span> </span>进行请求,并在<span> </span><code>utils/request.js</code><span> </span>中进行全局配置。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="0d1226bb-c83f-46b6-abe5-7c87ab23aaa5" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>// utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000, }); service.interceptors.request.use( config => { // 请求拦截 return config; }, error => { // 请求错误处理 return Promise.reject(error); } ); service.interceptors.response.use( response => { // 响应拦截 return response.data; }, error => { // 响应错误处理 return Promise.reject(error); } ); export default service;</pre></td></tr></table><h2><strong>6.代码质量规范</strong></h2><h3>ESLint</h3><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>ESLint</code><span> </span>进行代码质量检查,推荐使用<span> </span><code>eslint-plugin-vue</code><span> </span>插件。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="4b376ec8-5192-4696-a95a-cbfbe12c67f8" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>{ "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": { "vue/no-unused-components": "warn", "vue/no-unused-vars": "warn", "no-console": "warn" } }</pre></td></tr></table><h3>Prettier</h3><ul><li><p style="margin-left: 0.0px;">使用<span> </span><code>Prettier</code><span> </span>进行代码格式化,保持代码风格一致。</p></li></ul><table class="wysiwyg-macro" data-macro-name="code" data-macro-id="ca859fec-f79f-4e11-8297-cd504db6052e" data-macro-parameters="language=js" data-macro-schema-version="1" style="background-image: url(http://wiki.huacjian.cn/plugins/servlet/confluence/placeholder/macro-heading?definition=e2NvZGU6bGFuZ3VhZ2U9anN9&locale=zh_CN&version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>{ "singleQuote": true, "semi": false, "trailingComma": "es5" }</pre></td></tr></table><p><br /></p><p><br /></p>
编辑
保存
取消
预览
查看更改
恢复到最新已发布版本
{"serverDuration": 109, "requestCorrelationId": "cfb0d1a8828886da"}