vue框架简单封装

前一阵子没有太多事情，所以就在翻看一些博客，自己学习一下，然后突然有个想法就冒了出来，就是封装一个自己的框架，其实也算不上封装，就是添加一些基础配置，减少一下初始的操作，然后我就看了很多的博客，在加上自己最近的项目实战，自己弄了一个小框架，其实主要就是为了自己毕业设计省很多事情:)....可以拿来直接用。下面就记录一下。

项目主要采用 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.