美文网首页Vue
Vue 项目开发总结

Vue 项目开发总结

作者: Qingelin | 来源:发表于2020-08-12 15:31 被阅读0次

    目录:

    • 前言 ................................................................................................................................................................................
    • Vue 简介..........................................................................................................................................................................
    • Vue 特性 .........................................................................................................................................................................
    • Vue 插件..........................................................................................................................................................................
    • Vue项目开发规规范.........................................................................................................................................................

    1. 前言

    目前Vue 是主流前端框架之一,它是用于构建用户界面的框架,它与其他大型框架如React等不同的是可以自底向上逐层应用,相比于react对于原生js要求较低,开发过程中只关心view视图层,容易上手,开发项目可读性强,能够以最简单的方式完成复杂的单页应用。

    2. Vue 简介

    • 作者: 尤雨溪(一位华裔前Google工程师)
    • 目的:构建用户界面
    • vue是渐进式的JavaScript框架

    3. Vue框架的最主要特点:

    1. 遵循MVVM模式(M => model数据对象,V=> view视图层,VM => view model)
    2. 只关注 UI,可以轻松引入其他插件或第三方库以及已有项目整合
    3. 体积小,运行率高,适合移动端和PC端开发

    4. Vue官网及插件官网地址

    Vue官网链接
    Vue 中英文官网文档都是尤雨溪一人写的,所以中英文文档认知程度没有区别,只是语言的表达不同罢了,可直接切换不同语言就可以.

    使用Vue开发移动端和PC端项目时用到的插件有所不同

    • Vue CLI —— Vue脚手架
    • Vue Router —— Vue官方的路由器管理
    • vuex —— Vue状态管理机
    • Vue UI框架 iView —— 用于中后台的PC端产品
    • vue-lazyload —— 图片懒加载
    • vue-scroller ——页面滑动相关
    • Element-UI —— 基于Vue的UI组件库(优先PC端使用)
    • iView —— 主要服务于 PC 界面的中后台产品 (优先PC端使用)
    • mint-ui —— 基于Vue的UI组件库(优先移动端端使用)

    5. Vue 项目开发规范

    5.1 目录结构
    |— build                            构建脚本目录
        |— build.js                     生产环境构建(编译打包)脚本
        |— check-versions.js            版本验证工具
        |— utils.js                     构建相关工具方法(主要用来处理css类文件的loader)
        |— vue-loader.conf.js           处理vue中的样式
        |— webpack.base.conf.js         webpack基础配置
        |— webpack.dev.conf.js          webpack开发环境配置
        |— webapck.prod.conf.js         webpack生产环境配置
    |— config                   项目配置
        |— dev.env.js           开发环境变量
        |— index.js             主配置文件
        |— prod.env.js          生产环境变量
        |— test.env.js          测试环境变量
    |— dist                                     build后生成的生产文件
            |— static                           
                      |— css                  生产版本页面样式
                      |— fonts                引用的字体库
                      |— js                     页面懒加载后分成的js文件       
            |— index.html                  生产版本的html模板入口页面
    |— node_modules             项目依赖模块
    |— mock                     mock数据目录,用于本地数据模拟
    |— src                      项目源码目录
        |— assets               资源目录,资源会被webpack构建
            |— js               公共js文件目录
            |— css              公共样式文件目录
            |— images           图片存放目录
        |— components           公共组件目录
        |— common 
        |— network
                          |— util.js        存放项目的网络模块,接口,比如统一管理时间等
        |— tools                自己封装的一些工具
        |— App.vue              根组件
        |— main.js              入口js文件
        |— routers              前端路由目录
            |— index.js
        |— pages                    前端页面文件
        |— store                    应用级数据管理
            |— index.js             组装模块并导出,统一管理导出,也可命名为store.js
            |— state.js             单一状态树,定义应用数据结构及初始化状态
            |— getters.js           获取state中的状态,仅单向获取数据,不做任何修改
            |— actions.js           调用mutation方法对数据进行操作 
            |— mutation-types.js    存放vuex常用的变量
            |— mutations.js         定义state数据的修改操作
    |— static   纯静态资源,不会被webpack构建,eg:没有npm包模块
    |— .babelrc                 babel的配置文件
    |— .editorconfig            编辑器的配置文件
    |— .gitignore               git的忽略配置文件
    |— .postcssrc.js            postcss的配置文件
    |— index.html               html模板,入口页面
    |— package.json             npm包配置文件,依赖包信息
    |— README.md                    项目介绍
    
    
    5.2 css样式处理选择

    推荐使用Stylus
    原因:Stylus是来源于Node.js社区,与js关系密切,富于表现力、动态的、健壮的 CSS、支持省略花括号、支持省略分号,灵活、整洁

    5.3 文件名、组件命名规范、组件结构规范
    1. 文件夹:
    • 文件夹名称应统一格式,小写开头,见名思意,pages页面下的文件夹名称统一以page结尾,例如:homePage,loginPage。
    • 其余文件夹名称统一按照项目结构目录命名规范统一命名。
    1. 组件:
    • 组件名以单词大写开头,当多个单词拼写成的组件时,采用驼峰式命名规则。一般是多个单词全拼,减少简写的情况,这样增加可读性。
    • 组件应该都放到components文件夹下,单个页面独立一个文件夹,用来放相对应的vue文件以及页面相关的样式文件,样式少可直接写到页面组件里边,这样更符合组件化的思想。
    • 公用组件应该统一放到public文件下。
    1. 基础组件:
    • 当项目中需要自定义比较多的基础组件的时候,比如一些button,input,icon,建议以一个统一的单词Base开头,或者放到base文件夹统一管理,这样做的目的是为了方便查找。
    • 页面级组件应该放到相对应页面文件夹下,比如一些组件只有这个页面用到,其他地方没有用到的,可以直接放到页面文件夹,然后以父组件开头命名,例如:HomeHeader.vue,HomeNav.vue。
    • 项目级组件一般放到公共文件夹public下给所有的页面使用。
    1. 组件结构规范:组件结构遵循从上往下:template,script,style的结构
    5.4 组件之template模板部分规范
    1. 尽量使用以.vue结束的单文件组件,方便管理,结构清晰。
    2. 标签语义化,避免清一色的div元素
    3. 样式class的命名:统一以小写字母开头,小写字母、下划线和数字组成。命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如:xx_left,xx_line。
    4. 多特性,分行写,提高可读性。即一个标签内有多个属性,属性分行写。
    5. 自定义标签:使用自闭标签的写法。例如:,如果自定义标签中间需要传入slot,则写开始标签和结束标签,结束标签必须加/。
    6. 组件/实例选项中的空行。便于阅读和代码架构清晰。
    5.5 组件之script部分规范

    在 script 标签中,你应该遵守 Js 的规范和ES6规范。

    1. 组件名称:必须以大写字母开头驼峰法命名。
    2. data必须是一个函数。
    3. Props定义:提供默认值,使用type属性校验类型,使用props之前先检查prop是否存在
    4. 调试信息 console.log() debugger使用完及时删除。
    5. 为v-for设置Key值。
    6. 使用计算 规避v-if和v-for用在一起。
    7. 无特殊情况不允许使用原生API操作dom,谨慎使用this.$refs直接操作dom。
    8. 使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。
    9. 指令缩写:都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
    10. 使用 data 里的变量时请先在 data 里面初始化。
    11. 函数中统一使用_this=this来解决全局指向问题。
    12. 能用单引号不用双引号。
    13. 尽量使用===,!==。
    14. 声明变量必须赋值。
    5.6 组件之style部分规范
    1. 使用 scoped关键字,约束样式生效的范围。
    2. 避免使用标签选择器(效率低、损耗性能)。
    3. 非特殊情况下,禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外。
    4. CSS 属性书写顺序:先决定定位宽高显示大小,再做局部细节修饰!推荐顺序:定位属性(或显示属性,display)->宽高属性->边距属性(margin, padding)->字体,背景,颜色等,修饰属性的定义。
    5.7 组件样式

    单个组件样式一般可直接写到组件下style标签下,为了防止样式污染,可添加scoped 属性,也可以通过设置作用域来防止样式污染,写样式的时候尽量少写元素选择器,为了提高代码查找速度,可以用类选择器。

    5.8 文件格式

    采用UTF-8编码格式

    5.9 注释规范

    注意在注释的前后各有一个空格。

    1. HTML注释:
    2. CSS注释:/* write your HTML comment! */
    3. Stylus注释:
      a) 单行注释:// 我是less注释,和js的单行注释一样,在css中不输出
      b) 多行注释
      在这里插入代码片
     /*
        * less的多行注释,只有在compress选项未启用的时候
        * 才会被输出
        */
    

    c) 多行缓冲注释:

          /*!
        * less的多行缓存注释, Stylu压缩的时候这段代码无视
          */
    
    1. JS注释:
      a) 行级注释(注意//后面空格):// 正确的注释
      b) 变量声明注释:如果是在类似 Vue 项目的 data 属性中的变量,直接用行级样式跟在后面。
      例如:rightExample: ‘yes’, // 注释直接写这里
      c) 如果是在类,构造函数,或者常量定义中的变量,使用块级注释。
      例如:
         /*
          * 错误码常亮定义
          * @type {number}
         */
    

    d) 函数声明注释:不必要在每一个函数都写注释,但是在公共函数,还是建议补全注释,让后面的人不需要重复早轮子。
    e) 复杂的业务逻辑处理说明、特殊情况的代码处理说明,对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明

    5.10 资源路径配置、引入规则
    1. 路径配置
      在build/webpack.base.conf.js文件中配置。
    alias: {
    ‘@’: resolve(‘src’), // 默认配置,设置src目录别名
    ‘childRouter’: resolve(‘src/pages/menuRouter’), // 子路由路径配置
    ‘#’: resolve(‘src/assets’) // 配置assets文件夹路径
    }
    
    1. 路径导入

    1 .js文件中导入实例:

    • 导入node_modules模块中的文件,直接引入即可,不需要加文件后缀名,如:import ElementUI from 'element-ui'
    • 导入自定义文件的时候,使用相对路径或者使用路径配置别名,不许要加文件后缀名,如从一个叫blog.js文件中导入:import blog from '@/api/blog'
    1. css样式导入:需要使用 ~@ 开头,例如:
      @import url('../../assets/base.less');
    5.11 数据中心
    1. 各个文件的命名根据上面的项目结构命名。
    2. 应用层级的状态应该集中到单个 store 对象中。
    3. action和mutation中的函数统一声明在mutation-type.js内。
    4. mutation-types里面的常量、常量值全部用大写+英文单词配合下划线的形式:例如:export const UPDATE_USERINFO = “UPDATE_USERINFO”。
    5. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
    6. 异步逻辑都应该封装到 action 里面。
    7. vuex 的dispatch和commit提交mutation的区别:dispatch=>actions用来触发异步操作,commit=>mutation用来触发同步操作的方法。当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成,其他使用commit即可。
    5.12 路由

    router/index.js中的内容

    1. 一般情况下路由至少包含三个选项:path、name、component,name可有可无。path统一小写;name对应于组件中的name,大写开头驼峰;component组件名称大写开头的组件驼峰。
    2. 一级路由统一使用相对路径的形式。二级路由可以配置,配置见资源路径的配置、引入规则。
    5.13 axios
    1. 根据需要配置post、get请求,一个是取一个是贴,只需要读取文件,put(PUT 往服务器上上传文件)、delect(删除)直接对数据进行操作相对不安全 。
    2. axios的挂载:Vue.prototype.$http = axios;
    3. axios使用封装后的get/post请求。
    4. ajax的判断
      首先 ajax 请求可以写在 actions也可以直接写在 .vue 页面里。
      我们判断的依据是回调是否需要调用页面结构来区分,
      比如在.vue页面中发送完请求后需要调用 this.$refs.element等,或者需要利用组件的独立性的效果时 后,那就写在.vue页面,否则就写在 actions 里。
    5. axios 的更详细用法 点击查看
    5.14 util管理

    同一网络接口

    1. 新建src/ network/util.js
      放置api路径,要注意 axios已经有了前缀,所以这里的 api 值需要写前缀之后的路径。当路径较多时可以再多建几个文件,分类放置。
      例如:
      // 统一管理接口
    export default {
        manage: {
            fertilizerStation: '/api/AllFertSiteNameList', // 获取列表
            userLogin: '/api/Login' // 用户登录
        }
    
    1. 在main.js中引入
      import Util from '@/helpers/util'

    使用 Vue.prototype.friendlyDate = friendlyDate 挂载到原型链上即可处处使用

    5.15 依赖规范

    在package.json里添加依赖包

    "dependencies": {
        "axios": "^0.19.2",
        "element-ui": "^2.13.2",
        "less-loader": "^4.1.0",
        "marked": "^1.1.1",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vuex": "^3.5.1"
      },
    
    5.16 Web字体规范
    1. 优先使用框架中的字体图标,比如element ui中的
    2. 使用iconfont字体图标代替图片
    3. 在规范中包括的字体格式有:
      woff: WOFF (Web Open Font 格式)
      ttf: TrueType
      ttf, otf: OpenType
      eot: 嵌入式 OpenType
      svg, svgz: SVG 字体
    4. 字体规则
      a) 为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei)、宋体(SimSun)、微软雅黑(Microsoft Yahei)。
      b) 字体粗细采用具体数值,粗体bold写成700,正常normal写成400。
      c) font-size必须以px为单位。
      为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,font-family不允许在业务代码中随意设置。

    参考链接:
    https://www.docschina.org/

    https://blog.csdn.net/yw00yw/article/details/87856592

    相关文章

      网友评论

        本文标题:Vue 项目开发总结

        本文链接:https://www.haomeiwen.com/subject/wqlpdktx.html