博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
项目模板使用说明
阅读量:2238 次
发布时间:2019-05-09

本文共 1906 字,大约阅读时间需要 6 分钟。

前言

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

目录结构

├── 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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/vicky-li/p/9518401.html

你可能感兴趣的文章
Java集合详解1:一文读懂ArrayList,Vector与Stack使用方法和实现原理
查看>>
Java集合详解2:一文读懂Queue和LinkedList
查看>>
Java集合详解3:一文读懂Iterator,fail-fast机制与比较器
查看>>
Java集合详解4:一文读懂HashMap和HashTable的区别以及常见面试题
查看>>
Java集合详解5:深入理解LinkedHashMap和LRU缓存
查看>>
Java集合详解6:这次,从头到尾带你解读Java中的红黑树
查看>>
Java集合详解8:Java集合类细节精讲,细节决定成败
查看>>
Java并发指南1:并发基础与Java多线程
查看>>
Java并发指南2:深入理解Java内存模型JMM
查看>>
Java并发指南5:JMM中的final关键字解析
查看>>
Java并发指南6:Java内存模型JMM总结
查看>>
Java并发指南7:JUC的核心类AQS详解
查看>>
Java并发指南8:AQS中的公平锁与非公平锁,Condtion
查看>>
Java网络编程和NIO详解6:Linux epoll实现原理详解
查看>>
Java网络编程和NIO详解7:浅谈 Linux 中NIO Selector 的实现原理
查看>>
Java网络编程与NIO详解8:浅析mmap和Direct Buffer
查看>>
Java网络编程与NIO详解10:深度解读Tomcat中的NIO模型
查看>>
Java网络编程与NIO详解11:Tomcat中的Connector源码分析(NIO)
查看>>
深入理解JVM虚拟机1:JVM内存的结构与消失的永久代
查看>>
深入理解JVM虚拟机3:垃圾回收器详解
查看>>