Vue公共UI库制作教程

[WHB1]

本教程目的：
主要打算制作一个用于Vue组件的库方便实用，可以直接从公网直接使用的教程

学习分析的库文件如下 https://segmentfault.com/p/1210000008583242/read?from=timeline

滴滴的Vue
https://github.com/didi/cube-ui

以下文件学习总结皆来自与分析饿了吗的Vue组件

官方网址
代码网址： https://github.com/ElemeFE/element
官方网址：http://element-cn.eleme.io/#/zh-CN

比较好的vue 饿了吗社区 https://github.com/ElemeFE

采用

比较滴滴和饿了吗技术结果 滴滴采用shelljs饿了吗采用是yarn 两个成熟度来说滴滴的偏向于手写半自动化，饿了吗偏向于快速

第二个比较好的 iviewUI

https://github.com/iview/iview
https://www.iviewui.com/

所有采用的原理都一样

gulp去加载sass【elementUI】或者less【iviewUI】打包成一个.min.css文件进行加载 将组建.vue与样式分离.vue只写与结构逻辑有关代码 webpack将.vue进行整理打包为整个.min.js文件进行使用

都采用yarn进行模块加载以及架构

还有一些较差一点的网站 https://jingyan.baidu.com/article/636f38bb905fd4d6b84610eb.html http://blog.csdn.net/u012857153/article/details/73649022 https://www.cnblogs.com/lanchar/p/6894167.html vue封装第三方插件并发布的npm https://www.cnblogs.com/yesyes/p/7588833.html https://segmentfault.com/a/1190000011335914 https://github.com/vuetop/top-gitment

学习基础

npm 模块安装机制 https://github.com/WHB1/WHB1.github.io/issues/21

[WHB1]

教程0 -- 先申请一个npm账号用于发布Vue组件

[WHB1]

教程1 webpack学习

网址：

https://doc.webpack-china.org/concepts/module-resolution/#webpack-%E4%B8%AD%E7%9A%84%E8%A7%A3%E6%9E%90%E8%A7%84%E5%88%99

http://www.css88.com/doc/webpack/configuration/resolve/

[WHB1]

教程2 Element 脚手架

1、纲领

官方网址： https://github.com/ElementUI/element-starter

本脚手架需要了解以下两个
第一：Yarn
第二：Cooking： 更易上手的前端构建工具【饿了吗自己的】

      官方网址：http://elemefe.github.io/cooking/  

第三：element-cooking-starter

2、Yarn与npm的比较

网址如下：
http://web.jobbole.com/88459/
http://www.jianshu.com/p/bfe96f89da0e

结论 Yarn总体上比npm略好一点（很多大公司在开发维护使用，不过呢基本上功能差不多）

3、Yarn入门教程

Yarn官方网站：https://yarn.bootcss.com/

安装

网址：https://yarn.bootcss.com/docs/install.html 1） Chocolatey 安装 管理员cmd https://chocolatey.org/install 成功测试 choco -h 2） 安装 Yarn
choco install yarn 成功测试： yarn --version

3）Yarn使用 https://yarn.bootcss.com/docs/usage.html

  命令介绍
  https://yarnpkg.com/en/docs/cli/add
  安装包列表查询
  https://yarn.bootcss.com/search.html

最终测试结果 yarn.lock文件[自动生成]

[WHB1]

其他辅助工具

babel git lerna travis

 https://www.npmjs.com/package/lerna
 https://www.jianshu.com/p/63ec67445b0f

[WHB1]

框架入口

如下图所示

通过官方网站命令安装后的文档结构如下

程序主入口如下

[WHB1]

Cooking

更易上手的前端构建工具

网址： https://github.com/ElemeFE/cooking

这个里面是webpack打包使用的东西

这里面进行打包处理文件如下

[WHB1]

样式引入

对应改变主题 http://element-cn.eleme.io/#/zh-CN/component/custom-theme

webpack如何提取vue组件的css到独立文件中 https://segmentfault.com/q/1010000005363929/a-1020000005364558

参考官方教程如下

https://vue-loader.vuejs.org/zh-cn/configurations/extract-css.html

实际上所有的模板都是围绕着 vue-loader和webpack进行展开的 https://vue-loader.vuejs.org/zh-cn/

[WHB1]

公司采用框架基于 vue-cli安装之后的东西

https://github.com/vuejs-templates -- webpack-- template文件夹下面的东西 实际上不是自己的仅仅只是在原有基础上进行简单封装

https://github.com/vuejs?utf8=%E2%9C%93&q=&type=&language=

https://github.com/vuejs-templates

上面两者关系如下 https://www.npmjs.com/package/vue-cli vue有一个快速构建项目模板vue-cli 这个里面包含以下几种方式创建项目

vuejs-templates里面都是快速构建官方模板里面的模板文件

基于这个模板进行架构的：https://github.com/vuejs-templates/webpack/tree/develop/template