zoukankan      html  css  js  c++  java
  • 项目模板使用说明

    前言

      项目基本框架已经实现,部分组件封装基本功能。具体优化在开发过程中一步步实现

    目录结构

    ├── doc                      //相关文档 
    ├── node_modules             // 项目依赖
    ├── public                   // 公共资源
    ├── src                        // 源代码
    │   ├── api                    // 所有请求
    │   ├── assets                 // 样式 字体 图片等静态资源
    │   ├── components             // 全局公用组件
    │   ├── directive              // 全局指令
    │   ├── filtres                // 全局 filter
    │   ├── router                 // 路由 (待配置)
    │   ├── store                  // 全局 store管理
    │   ├── utils                  // 全局公用方法
    │   ├── views                   // view
    │   ├── App.vue                // 入口页面
    │   ├── main.js                // 入口 加载组件 初始化等
    │   └── permission.js          // 权限管理
    ├── .babel.config.js                   // babel-loader 配置
    ├── eslintrc.js                // eslint 配置项
    ├── .gitignore                 // git 忽略项
    ├── vue.config.js                 // 项目配置
    └── package.json               // package.json
    

      

    主要开发文件src文件

      1、api 和 views

      随着业务的迭代,模块还会会越来越多。 所以这里建议根据业务模块来划分 views,并且 将views 和 api 两个模块一一对应,从而方便维护。如下图:

      

    -------------------------------------------------------------------这是一条分割线

           

    如 news模块下放的都是新闻相关的 api,这样不管项目怎么累加,api和views的维护还是清晰的,当然也有一些全区公用的api模块,如七牛upload,remoteSearch等等,这些单独放置就行。

      2、components

     这里的 components 放置的都是全局公用的一些组件,如上传组件,分页等等,会多处使用的组件里都写了README.md文件的,介绍参数和使用方法。一些页面级的组件建议还是放在各自views文件下,方便管理。如图:

      

      3、store

      这里我个人建议不要为了用 vuex 而用 vuex。俩个独立的东西,所以根本没有必要使用 vuex 来存储data,每个页面里存放自己的 data 就行。当然有些数据还是需要用 vuex 来统一管理的,如登录token,用户信息,或者是一些全局个人偏好设置等,还是用vuex管理更加的方便,具体当然还是要结合自己的业务场景的。总之还是那句话,不要为了用vuex而用vuex!

     生命周期

    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed

     

    vue指令基础用法

    1、v-bind 用于响应式地更新 HTML 特性

    2、v-on 用于监听 DOM 事件

    3、v-if 条件判断

        v-show

    4、v-for 列表渲染

    5、v-model 在表单控件或者组件上创建双向绑定

    vue常用属性用法

    组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,常用的选项有:(vue属性顺序遵循:引用→属性→方法)

    1.  components
    2. props
    3. data
    4. computed
    5. methods

     

  • 相关阅读:
    sass学习(1)——了解sass
    ES6学习(2)——arrows箭头函数
    ES6学习(1)——如何通过babel将ES6转化成ES5
    过年后的小计划
    JavaScript,通过分析Array.prototype.push重新认识Array
    JavaScript如何判断参数为浮点型
    gulp之静态资源防缓存处理
    递归算法,JavaScript实现
    有趣的Node爬虫,数据导出成Excel
    Memcached、Redis、RabbitMQ
  • 原文地址:https://www.cnblogs.com/vicky-li/p/9518401.html
Copyright © 2011-2022 走看看