vue项目中开发规范记录

代码规范

文件命名

统一使用下划线分割例如 ** goods_library.vue **

代码格式约束

  1. vscode 安装 EditorConfig 插件
  2. vscode 安装 eslint插件,并且在设置中添加配置项
  3. 编辑器出现eslint error 必须解决

vscode 配置添加

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
]

css 规范

统一使用 scss预编译器

命名规范

使用中划线方式命名,例如 .main-container

属性顺序

.main {
    position: absolute; // 定位属性放在最前面
    top: 0;
    left: 0;
    display: flex; // 盒子模型放在其次
    margin: 10px;
    width: 100px;
    background: #ee5b5b; // 其他属性放最后
    color: #fff;
}

编写规范

嵌套选择器上一行必须有空格

.main {
    position: absolute;
    top: 0;
    left: 0;

    .wrapper { // 嵌套选择器上一行必须空格

    }
}

vue开发规范

  1. data中尽可能少的数据模型,不需要在页面进行响应的属性禁止写在data内
  2. 表单相关的数据,在定义模型时,统一放在form中
    ```js
    vue属性顺序排布
mixins: [],
data() {},
inject: [],
provide: {},
props: {},
computed: {}
watch: {}
directives: {}
created() {},
mounted() {},
//... 生命周期函数
filters: {}
methods: {}
components: {}

项目目录规范

  • 禁止在 src/components 目录下放置业务私有组件,业务私有组件应该在业务相关文件夹下建立components目录存放
  • assets/js 放置公共js模块,私有js模块应在业务相关文件夹下建立js目录存放
  • assets/style 放置公共样式文件,样式文件需写在vue文件中,禁止抽离出来,编写页面时,可将编辑器拆分来分别编写dom以及样式。
  • src/config src/directives src/mixins src/utils 只允许存放系统级别的模块以及功能

原文地址:https://www.cnblogs.com/yaogengzhu/p/11111784.html

时间: 2024-10-07 13:45:35

vue项目中开发规范记录的相关文章

在vue项目中的axios使用配置记录

默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withC

Vue项目中遇到的一些问题总结

一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 changeOrigin:true, pathRewrite:{ '^/api':'' //这里理解为用api代替target中的地址 } } } 配置完后,请求依然报错,大致是https证书的问题 [HPM] Error occured while trying to proxy request /xxx/

如何加快Vue项目的开发速度

如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了效率.但是对于我们的开发层面.还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命.下面我们挨个来探讨. 巧用Webpack Webpack是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack来帮我们做一些自动化的事情.首先我们要了解

在VUE项目中使用SCSS

这篇文章是记录的在VUE项目中SCSS的使用 vue项目上安装SCSS和开发入门 ① 使用vue-cli模板创建新项目:vue init webpack myvue ② 安装sass 依赖包 ,在cmd界面输入: npm  install sass-loader --save-devnpm install node-sass --sava-dev ③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置 {test: /\.scss$/,loaders: ['s

Vue 项目中使用 jsPlumb

jsPlumb 介绍 jsPlumb 是一个强大的 JavaScript 连线库,它可以将 html中 的元素用箭头.曲线.直线等连接起来,适用于开发 Web 上的图表.建模工具.流程图.关系图等. jsPlumb 参考网站 博客园:http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral 官网:https://www.jsplumbtoolkit.com/ 安装 jsPlumb v

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

在vue项目中 如何定义全局变量 全局函数

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSr

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美