前一阵子没有太多事情,所以就在翻看一些博客,自己学习一下,然后突然有个想法就冒了出来,就是封装一个自己的框架,其实也算不上封装,就是添加一些基础配置,减少一下初始的操作,然后我就看了很多的博客,在加上自己最近的项目实战,自己弄了一个小框架,其实主要就是为了自己毕业设计省很多事情:)....可以拿来直接用。下面就记录一下。
项目主要采用 yarn + vue-cli + vue-router + vuex + scss
项目github:github.com/quguoliang/…
项目结构
|-public
|-src
|--assets //静态资源
|---fonts
|---images
|---styles
|-components //组件库
|---message //全局消息提示
|---requestLoading //加载动画
|---svgIcon //全局icon
|--icon //icon库
|---svg //svg图存放库
|--minix //存放重叠逻辑
|--provider //服务接口调用
|--api
|---request.js
|--routers //vue-router
|--stores //vuex
|---modules
|---getter.js
|---store.js
|--utils //工具文件
|--views //页面入口
|---Index.vue
|---404.vue
......
复制代码
如何开始
首先在src/views下面新增一个页面,例如新建一个Haha.vue,然后router会自动为你新建的页面配备路由。但是若你需要配置子路由时,请进入router.js进行手动配置。
一般会把views下面的文件,作为一个页面的入口的文件,页面一般都采用组件化的开发,页面的其他子组件,一般都会放到src/components下面去。
provider文件主要是与后端进行交互的,本框架主要是用的axios,request.js已经进行了axios配置,一般不需要处理,与正常Axjx一样使用即可(为啥多说这一句,就是返回数据的时候res.data就行了别调两个data),需要处理的接口放在api文件下,这样比较清楚,也方便更改。
utils文件主要是放一些全局的可调用的文件,比如已经写好的auth.js、permission.js,基本不需要改,有需要自行更改,需要全局过滤器可以在filters.js中定义,已经做好调用了,写完即生效:),如果还需要其他工具,可自行添加文件。
minix文件主要是用来解决逻辑重复的问题的,可以自定义一些逻辑,然后做组件混合,如果不理解可以不用管:)
复制代码
项目采用的yarn作为包管理器,因为当时npm安装cli脚手架会报错,因为这个问题,我浪费了一天时间,各处查找问题原因,配置webpack,还是错误,后来在尤雨溪github的issues里面发现很多人也有同样的问题,据说yarn是ok的,所以我就采用了yarn。css预处理器采用了scss。
项目还有一些问题,最近比较忙,后面我会慢慢改。
yarn文档地址yarn.bootcss.com/
scss文档地址www.sass.hk/
最近还准备弄一个node.js的自定义框架,也不为了别的,主要是自己学习一下,重要的是为毕业设计做准备:)
Time is fair, because it gives everyone 24 hours.