项目模板使用说明
前言
项目基本框架已经实现,部分组件封装基本功能。具体优化在开发过程中一步步实现
目录结构
├── 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属性顺序遵循:引用→属性→方法)
- components
- props
- data
- computed
- methods