mk-movies

v1.0.9

Published

4 years ago

momo vue static module

0High
0Medium
0Low

nioky

陌陌VUE组件库

Movies组件库文档

DEMO目录结构

enter image description here

上图为使用Movies组件最基本的目录结构，可以根据需求有所差异。

在上述文件基础上，我们最先要做的是安装依赖包。详情可以参考 Webpack官方配置参考

具体步骤如下

安装依赖

$npm install --save webpack vue vue-loader vue-html-loader vue-style-loader css-loader sass-loader node-sass babel-loader babel-core babel-preset-es2015 mk-movies

依赖很多，我稍微解释一下

首先是webpack主体
其次是vue主体+loader，比如负责控件template部分的vue-html-loader，负责样式表的vue-style-loader，sass预编译，css-loader，
然后是ES6的babel，用于解析ES6语法。
最后当然还有我们自己的movies库

到这里，准备工作就结束了，我们来看下基础的demo文件的代码：首先是VueJS模板代码

src/index.js

import { Mask } from 'mk-movies';
import { Vue } from 'Vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    show:""
  },
  components:{
  	'mask':Mask
  },
  ready:function(){
  	this.show = true;
  }
})

通过import { Mask } from 'mk-movies'引入依赖。
由于使用了require这个es6特性，所以这里需要上webpack。 如果是简单的项目，觉得没有必要上webpack这套东西，那么请回避使用Component，而是直接用老的static

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry:'./src/index.js',
  resolve: {
    root: [
      path.resolve(__dirname, './components'),
    ],
    extensions: ['', '.js', '.vue']
  },
  output: {
    path: path.resolve(__dirname, './static'),
    filename: '[name].js',
  },
  babel: {
      presets: ['es2015'],
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      { 
        test: /mk-movies\/.*?js$/, 
        loader: 'babel' },
    ]
  }
}

这个webpack文件没用插件，
这里需要额外加入一个用于编译mk-movies的规则。

{ 
    test: /mk-movies\/.*?js$/, 
    loader: 'babel' 
}

完成上述规则后，在webpack.config.js同级目录运行

webpack

得到

Hash: 36f5de65097bafa3eaba
Version: webpack 1.13.2
Time: 2975ms
  Asset    Size  Chunks             Chunk Names
main.js  375 kB       0  [emitted]  main
    + 54 hidden modules

完成文件编译

顺便给出demo html的源代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Demo</title> 
</head>
<body>
	<div id="app">
	<mask :show.sync="show"></mask>
	</div>
</body>
<script src="static/main.js"></script>
</html>

组件开发

环境搭建

在这里找到gitclone地址，先拉代码 npm主页 Movies的GitLab地址
根目录 npm install 安装依赖
根目录执行

npm run dev

打开浏览器，即可访问http://127.0.0.1:8080/index.html 查看demo页面，现在热部署已经上线。

新增组件步骤

首先阅读理解mk-movies文件夹下的index.js文件夹。
其次在components目录下建立组件，请附带文档。
在local/main.js文件中增加路由。
如果需要，在routers/index.vue下增加菜单项
在routers下增加组件demo模板
全部测试开发结束，push git
执行npm更新代码
```
npm version patch
npm publish
```

计划

第一版计划组件

| 序号 |文件夹层级| 名称 | 作用 | 备注 | | :-------- | :---|:--------: | :--------:| :------: | | 1 | base | mask.vue | 简单的遮罩层 | 自带一个点击事件 | | 2 | base | icon.vue | 作为一些常用库的基础支持 | 后续要看有没有可能进一步做成可配置型 | | 1 | normal | button.vue | 常规按钮 | | | 2 | normal | list-item.vue | 一个符合陌陌设计风格的列表项| | | 1 | popup | loading.vue | 正在Loading的状态 | 可配置遮罩 | | 2 | popup | show-tip.vue | 弹出框组件 | 需要适配mk | | 3 | popup | alert.vue | 带有一个确定按钮的警告框 | 可以设定标题 | | 4 | popup | confirm.vue | 带有确定和取消按钮的提示框 | |

第二版计划

| 序号 |文件夹层级| 名称 | 作用 | 备注 | | :-------- | :---|:--------: | :--------:| :------: | | 1 | base | status.vue | 各类状态 | | | 2 | popup | bottomSelect.vue | 底部List选择弹框 | | | 1 | popup | options.vue | 中央List选择弹框 | | | 2 | form | switch.vue | 符合陌陌设计的switch控件 | | | 1 | normal | tab.vue | 切换标签 | | | 2 | normal | autoLoad.vue | 自动加载 | | | 3 | normal | bottom.vue | 底部常规fixed框 | | | 4 | normal | column.vue | 分栏 |