init

README.md

@@ -5,8 +5,8 @@
 #### 安装
 
 ``` bash
-1、 使用jpm安装nutui
-jnpm install nutui --save
+1、 使用npm安装nutui
+npm install nutui --save
 ```
 
 #### 引用完整组件库

package.json

@@ -14,8 +14,7 @@
     "build": "npm run clean && cross-env NODE_ENV=production webpack -p --hide-modules --progress",
     "add": "node scripts/addComponent"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "files": [
     "src",
     "dist/nutui.js"
@@ -34,11 +33,6 @@
       "type": "component"
     },
     {
-      "name": "Coupon",
-      "chnName": "优惠券",
-      "type": "component"
-    },
-    {
       "name": "Loading",
       "type": "method"
     },
@@ -120,43 +114,27 @@
       "type": "component"
     },
     {
-      "name": "Webp",
-      "chnName": "webp图片过滤器",
-      "type": "filter"
-    },
-    {
       "name": "InfiniteLoading",
       "type": "component"
     },
     {
       "name": "NumOperate",
-      "chnName": "数字加减操作",
       "type": "component"
     },
     {
       "name": "Radio",
-      "chnName": "单选",
       "type": "component"
     },
     {
-      "name": "ImgSet",
-      "chnName": "图片设置",
-      "type": "filter",
-      "showDemo":false
-    },
-    {
       "name": "Checkbox",
-      "chnName": "复选框",
       "type": "component"
     },
     {
       "name": "RadioGroup",
-      "chnName": "单选组",
       "type": "component"
     },
     {
       "name": "Slider",
-      "chnName": "滑块",
       "type": "component"
     },
     {
@@ -165,13 +143,11 @@
     },
     {
       "name": "PictureView",
-      "chnName": "浏览大图",
       "type": "component",
       "erp": "zhangshijie6"
     },
     {
       "name": "Popup",
-      "chnName": "可自定义内容的弹出框",
       "type": "component"
     }
   ],

src/app.vue

@@ -2,7 +2,7 @@
   <div @click="wrapperClick" class="sys-box">
     <!-- <vue-progress-bar></vue-progress-bar> -->
     <div class="sys-header"><div class="sys-inner"><a href="./default.html" class="sys-logo">NutUI</a><ul class="sys-menu">
-          <li><a href="http://git.jd.com/lifeifan3/NutUI">GitLab</a></li>
+          <li><a href="https://github.com/jdf2e/nutui.git">Github</a></li>
         </ul><a href="javascript:;" class="sys-nav-btn" @click.stop="toggleMenu()">组件</a></div></div>
     <div class="sys-container">
     	<router-view class="view sys-nav" v-show="navShow" @click.stop name="nav"></router-view>

src/demo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <h1 class="logo">NutUI</h1>
-    <p>NutUI是一套基于Vue2的轻量级移动端组件库。[<a href="/index.html">文档</a>] [<a href="http://git.jd.com/lifeifan3/NutUI">代码</a>]</p>
+    <p>NutUI是一套基于Vue2的轻量级移动端组件库。[<a href="/index.html">文档</a>] [<a href="https://github.com/jdf2e/nutui.git">代码</a>]</p>
     <ul>
       <li v-for="cpt in packages"><router-link :to="'/'+cpt.name" v-if="cpt.showDemo !== false">{{cpt.name}}</router-link></li>
     </ul>

src/demo/webp.vue

@@ -1,23 +0,0 @@
-<template>
-    <div>
-        <h1>Webp</h1>
-        <p>过滤器。在支持webp格式的浏览器上给图片url加上“.webp”扩展名。</p>
-        <h5>示例</h5>
-        <div style="width:100%;overflow:hidden;">
-            <img :src="imgUrl | webp" alt=""/>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data(){
-        return{
-            imgUrl:'//img10.360buyimg.com/n1/s368x368_jfs/t6499/90/1456804243/302655/1e93032/5951e7ecNafb50399.jpg',
-            demo1:`<img :src="imgUrl | webp" alt=""/>`
-        }
-    }
-}
-</script>
-<style>
-</style>

src/package/coupon/index.js

@@ -1,7 +0,0 @@
-import Coupon from './src/coupon.vue';
-
-Coupon.install = function(Vue) {
-  Vue.component(Coupon.name, Coupon);
-};
-
-export default Coupon

src/package/imgset/index.js

@@ -1,56 +0,0 @@
-/* 过滤器是依据http://storage.jd.com/doc/jd-image.pdf文档所作，适合京东业务
-* @params url 后端给的图片路径，必填
-* @params width 图片宽度
-* @params height 图片高度
-* @params host 域名，分四种 1主站：img10.360buyimg.com 2移动端：m.360buyimg.com 3印尼：img10.jd.id 4内网访问：img10.360buyimg.local
-* @params postfix 后缀处理，后缀可添加：降质处理 !75、裁剪任意矩形 !cr_200x100_20_30 、原型图片的访问 !c200、转为webp格式 .webp
-* @params business 业务，有两种 主站商品的业务（一共12种：n0、n1、n2、n3、n4、n5、n6、n7、n8、n9、n11、n12） 普通业务（如 test、pop等）
-*/
-function ImgSet(url, params) {
-    let business = params.business || 'test';
-    let postfix = params.postfix || '';
-    let width = params.width;
-    let height = params.height;
-    let imgUrl = '//' + hostStatus(params.host) + '/' + business;
-    if (width && height) {
-        imgUrl += '/s' + width + 'x' + height + '_' + url;
-    } else {
-        imgUrl += '/' + url;
-    }
-    return imgUrl + postfix;
-}
-
-//域名处理
-function hostStatus(status) {
-	let host = '';
-	switch (status + ''){
-		case '1':
-		  host = mainStationHost();
-		  break;
-		case '2':
-		  host = 'm.360buyimg.com';
-		  break;
-		case '3':
-		  host = 'img10.jd.id';
-		  break;
-		case '4':
-		  host = 'img10.360buyimg.local';
-		  break;
-		default:
-		  host = mainStationHost();
-	}
-	return host;
-}
-
-//主站域名处理
-function mainStationHost() {
-	var imgArray = [10, 11, 12, 13, 14, 20, 30];//域名有多种
-	return 'img' + imgArray[Math.floor(Math.random() * imgArray.length)]+ '.360buyimg.com';
-}
-
-
-ImgSet.install = function(Vue) {
-  Vue.filter(ImgSet.name, ImgSet);
-};
-
-export default ImgSet

src/package/webp/index.js

@@ -1,17 +0,0 @@
-import {
-  webpSupport
-} from '../../util/util.js';
-
-function webp(url) {
-  if (url && !/\.webp$/.test(url) && webpSupport()) {
-    return url + '.webp';
-  } else {
-    return url;
-  }
-}
-
-webp.install = function (Vue) {
-  Vue.filter(webp.name, webp);
-};
-
-export default webp

src/view/coupon.vue

@@ -1,83 +0,0 @@
-<template>
-    <div>
-        <h1>Coupon</h1>
-        <p>一种支持自定义的优惠券展示（京券、东券、运费券、不可用券），支持领取，选中。</p>
-        <h5>示例</h5>
-        <a class="button button-primary" href="/demo.html#/Coupon" target="_blank">Demo</a>
-        <h5>Props</h5>
-        <div class="tbl-wrapper">
-        <table class="u-full-width">
-          <thead>
-            <tr>
-              <th>参数</th>
-              <th>说明</th>
-              <th>类型</th>
-              <th>默认值</th>
-              <th>可选值</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>beanData</td>
-              <td>券数据</td>
-              <td>Object</td>
-              <td>--</td>
-              <td>--</td>
-            </tr>
-            <tr>
-              <td>isSwitch</td>
-              <td>是否切换到选择功能</td>
-              <td>Boolean</td>
-              <td>false</td>
-              <td>true/false</td>
-            </tr>
-            <tr>
-              <td>isBadge</td>
-              <td>是否有角标</td>
-              <td>Boolean</td>
-              <td>false</td>
-              <td>true/false</td>
-            </tr>
-          </tbody>
-        </table>
-        </div>
-        <h5>Events</h5>
-        <div class="tbl-wrapper">
-        <table class="u-full-width">
-          <thead>
-            <tr>
-              <th>事件名</th>
-              <th>说明</th>
-              <th>回调参数</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>immediate-use</td>
-              <td>点击立即使用时触发</td>
-              <td>返回当前优惠券数据</td>
-            </tr>
-            <tr>
-              <td>switch-use</td>
-              <td>选中或不选中时触发</td>
-              <td>返回当前优惠券数据和是否选中状态</td>
-            </tr>
-          </tbody>
-        </table>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data(){
-        return{
-        }
-    },
-    methods:{
-    }
-}
-</script>
-
-<style>
-</style>

src/view/imgset.vue

@@ -1,99 +0,0 @@
-<template>
-    <div>
-        <h1>ImgSet</h1>
-        <p>过滤器。处理类似'jfs/t169/69/654078710/298522/f1faa01a/53951722N73ecf645.jpg'这种图片路径的数据，可配置访问渠道、尺寸、业务，前提是该图片必须是在京东的图片系统上，具体更多细节参数设置可移步以下文档查看：<a href="http://storage.jd.com/doc/jd-image.pdf" target="_blank">http://storage.jd.com/doc/jd-image.pdf</a></p>
-        <h5>示例1：图片按照100px*100px的尺寸展示</h5>
-        <div style="width:100%;overflow:hidden;">
-            <img :src="imgUrl | imgSet({width:100,height:100})" alt="" style="border: 1px solid #ddd;"/>
-        </div>
-        <pre><code v-highlight v-text="demo1"></code></pre>
-        <pre><code v-highlight>export default {
-    data(){
-        return{
-            imgUrl:'jfs/t169/69/654078710/298522/f1faa01a/53951722N73ecf645.jpg'
-        }
-    }
-}</code></pre>
-        
-        <h5>示例2：图片是移动端pop业务</h5>
-        <div style="width:100%;overflow:hidden;">
-            <img :src="imgUrl | imgSet({width:200,height:200,host:2,business:'pop'})" alt="" style="border: 1px solid #ddd;"/>
-        </div>
-        <pre><code v-highlight v-text="demo1"></code></pre>
-
-        <h5>示例3：图片以直径为400px的圆形裁剪，以200px*200px的尺寸展示</h5>
-        <div style="width:100%;overflow:hidden;">
-            <img :src="imgUrl | imgSet({width:200,height:200,postfix:'!c400'})" alt=""  style="border: 1px solid #ddd;"/>
-        </div>
-        <pre><code v-highlight v-text="demo3"></code></pre>
-
-        <h5>Props</h5>
-        <div class="tbl-wrapper">
-        <table class="u-full-width">
-          <thead>
-            <tr>
-              <th>参数</th>
-              <th>说明</th>
-              <th>类型</th>
-              <th>默认值</th>
-              <th>可选值</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>width</td>
-              <td>宽度缩放尺寸</td>
-              <td>Number/String</td>
-              <td>null</td>
-              <td>--</td>
-            </tr>
-            <tr>
-              <td>height</td>
-              <td>高度缩放尺寸</td>
-              <td>Number/String</td>
-              <td>null</td>
-              <td>--</td>
-            </tr>
-            <tr>
-              <td>host</td>
-              <td>访问域名，分四种：<br>1 主站：img10.360buyimg.com <br>2 移动端：m.360buyimg.com <br>3 印尼：img10.jd.id <br>4 内网访问：img10.360buyimg.local</td>
-              <td>Number/String</td>
-              <td>1</td>
-              <td>--</td>
-            </tr>
-            <tr>
-              <td>postfix</td>
-              <td>后缀处理，后缀可添加：<br>!75 降质处理 <br>!cr_200x100_20_30 裁剪任意矩形 <br>!c200 原型图片的访问<br>.webp 转为webp格式 <br>等</td>
-              <td>String</td>
-              <td>&nbsp;</td>
-              <td>--</td>
-            </tr>
-            <tr>
-              <td>business</td>
-              <td>业务，有两种 <br>主站商品的业务（一共12种：n0、n1、n2、n3、n4、n5、n6、n7、n8、n9、n11、n12） <br>普通业务（如 test、pop等）</td>
-              <td>String</td>
-              <td>&nbsp;</td>
-              <td>--</td>
-            </tr>
-          </tbody>
-        </table>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data(){
-        return{
-            imgUrl:'jfs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg',
-            demo1:`<img :src="imgUrl | imgSet({width:100,height:100})" alt="" style="border: 1px solid #ddd;"/>`,
-            demo2:`<img :src="imgUrl | imgSet({width:200,height:200,host:2,business:'pop'})" alt="" style="border: 1px solid #ddd;"/>`,
-            demo3:`<img :src="imgUrl | imgSet({width:200,height:200,postfix:'!c400'})" alt=""  style="border: 1px solid #ddd;"/>`
-        }
-    }
-}
-</script>
-
-<style>
-
-</style>

src/view/intro.vue

@@ -3,17 +3,15 @@
         <div class="logo"></div>
         <p>NutUI是一个基于Vue2.0的轻量级移动端组件库，大部分组件来自「京东APP」、「京东ME」、「京东M站」中的实际项目。</p>
         <h5>安装</h5>
-        <h6>1，首先安装京东私有npm客户端jnpm</h6>
-        <pre><code v-highlight>npm install @jd/jnpm -g --registry=http://registry.m.jd.com</code></pre>
-        <h6>2，使用jnpm安装NutUI</h6>
-        <pre><code v-highlight>jnpm install @jdcfe/nutui --save-dev</code></pre>
+        <h6>1，使用npm安装NutUI</h6>
+        <pre><code v-highlight>npm install nutui --save</code></pre>
         <h6>3，在项目中引入</h6>
-        <pre><code v-highlight>import NutUI from '@jdcfe/nutui'</code></pre>
+        <pre><code v-highlight>import NutUI from 'nutui'</code></pre>
         <h6>4，初始化</h6>
         <pre><code v-highlight>NutUI.install(Vue)</code></pre>
         <p>通过以上步骤即可完成整个NutUI组件库的安装，这是推荐的使用方式。</p>
         <p>您还可以根据需要只引用部分组件。</p>
-        <pre><code v-highlight>import Mask from '@jdcfe/nutui/src/package/mask/index'
+        <pre><code v-highlight>import Mask from 'nutui/src/package/mask/index'
 
 export default {
     data(){
@@ -40,8 +38,6 @@ export default {
 <pre><code v-highlight>this.$dialog(options);</code></pre>
 <p>提示框（Toast）组件</p>
 <pre><code v-highlight>this.$toast(msg,during);</code></pre>
-<h5>使用项目</h5>
-<p><a href="http://cf.jd.com/pages/viewpage.action?pageId=100290301" target="_blank">点击查看</a></p>
 <h5>联系我们</h5>
 <p>如果您在使用组件的过程中遇到了什么问题，或者有什么意见建议，都欢迎与我们联系：<a href="mailto:lifeifan1@jd.com">lifeifan1@jd.com</a></p>
 

src/view/webp.vue

@@ -1,34 +0,0 @@
-<template>
-    <div>
-        <h1>Webp</h1>
-        <p>过滤器。在支持webp格式的浏览器上给图片url加上“.webp”扩展名。</p>
-        <h5>示例</h5>
-        <div style="width:100%;overflow:hidden;">
-            <img :src="imgUrl | webp" alt=""/>
-        </div>
-        <pre><code v-highlight v-text="demo1"></code></pre>
-        <pre><code v-highlight>export default {
-    data(){
-        return{
-            imgUrl:'//img10.360buyimg.com/n1/s368x368_jfs/t6499/90/
-            1456804243/302655/1e93032/5951e7ecNafb50399.jpg'
-        }
-    }
-}</code></pre>
-    </div>
-</template>
-
-<script>
-export default {
-    data(){
-        return{
-            imgUrl:'//img10.360buyimg.com/n1/s368x368_jfs/t6499/90/1456804243/302655/1e93032/5951e7ecNafb50399.jpg',
-            demo1:`<img :src="imgUrl | webp" alt=""/>`
-        }
-    }
-}
-</script>
-
-<style>
-
-</style>

webpack.config.js

@@ -64,16 +64,12 @@ webpackConfig.plugins = [
         template: './src/demo.html',
         chunks:['demo']
     }),
-    /*new ExtractTextPlugin({
-        filename: 'nutui.css'
-    }),*/
     new webpack.optimize.UglifyJsPlugin({
         compress: false
     }),
     new webpack.BannerPlugin('NutUI v' + config.version + ' ' + new Date().toString()),
     new CopyWebpackPlugin([
-        { from: path.join(__dirname, "./src/asset/"), to: path.join(__dirname, "./dist/asset") },
-        /* { from: path.join(__dirname, "./src/default.html"), to: path.join(__dirname, "./dist/default.html") } */
+        { from: path.join(__dirname, "./src/asset/"), to: path.join(__dirname, "./dist/asset") }
     ])
 ];
 
@@ -101,7 +97,7 @@ if (isProduction) {
     webpackConfig.devServer = {
         contentBase: path.resolve(__dirname, 'dist'),
         compress: true, //gzip压缩
-        host:'192.168.191.1',
+        //host:'192.168.191.1',
         historyApiFallback: true
     };
 }