Merge pull request #7 from jdf2e/v2

V2

Author: Franslee

README.md

@@ -1,5 +1,5 @@
 # NutUI 2
-![npm version](https://img.shields.io/npm/v/@nutui/nutui.svg)  [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=v2)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=v2)](https://coveralls.io/github/jdf2e/nutui?branch=v2) ![license](https://img.shields.io/npm/l/@nutui/nutui.svg)
+![npm version](https://img.shields.io/npm/v/@nutui/nutui.svg)  [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=v2)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=master)](https://coveralls.io/github/jdf2e/nutui?branch=master) ![license](https://img.shields.io/npm/l/@nutui/nutui.svg)
 
 一套移动端轻量级Vue组件库
 

build/webpack.base.conf.js

@@ -24,8 +24,9 @@ module.exports = {
                 include: path.resolve('src'), // instrument only testing sources with Istanbul, after ts-loader runs
                 loader: 'istanbul-instrumenter-loader'
             }: {},
-            test ? { test: /\.css$/, loader: 'style!css' } : {},
+            test ? { test: /\.css$/, use: [{loader: 'style!css'}] } : {},
             test ? { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' } : {},
+            test ? { test: /\.scss$/, use: [{loader: 'sass-loader', options:{data: `@import "./src/styles/index.scss"; `,} }]} : {},
             !test ?{
                 test: /\.(sa|sc|c)ss$/,
                 use: [

build/webpack.demo.base.conf.js

@@ -22,17 +22,17 @@ module.exports = merge(webpackBaseConf, {
     module: {
         rules: [
             //自定义主题
-            /*{
-                test: /\.(sa|sc|c)ss$/,
-                use: [
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            data: `@import "./sites/demo/asset/css/custom.scss";@import "./src/styles/index.scss"; `,
-                        },
-                    }
-                ],
-            }*/
+            // {
+            //     test: /\.(sa|sc|c)ss$/,
+            //     use: [
+            //         {
+            //             loader: 'sass-loader',
+            //             options: {
+            //                 data: `@import "./sites/demo/asset/css/custom.scss";@import "./src/styles/index.scss"; `,
+            //             },
+            //         }
+            //     ],
+            // }
         ]
     },
     plugins: [

build/webpack.demo.dev.conf.js

@@ -28,5 +28,6 @@ module.exports = merge(baseConf, {
         index: 'demo.html',
         compress: true, //gzip压缩
         historyApiFallback: true,
+        disableHostCheck: true
     }
 });

build/webpack.doc.base.conf.js

@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const merge = require('webpack-merge');
 
-const mdtohtml = require('../scripts/md-to-other');
+const mdtohtml = require('../scripts/mdToVue');
 const isDev = process.env.NODE_ENV === 'development';
 
 module.exports = merge(webpackBaseConf, {

build/webpack.doc.dev.conf.js

@@ -15,5 +15,6 @@ module.exports = merge(baseConf, {
         compress: true,
         index: 'default.html',
         historyApiFallback: true,
+        disableHostCheck: true
     }
 });

docs/intro.md

@@ -1,9 +1,10 @@
-<div style="text-align:center; margin:10px 0 30px;">
-    <img width="150" src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" alt="NutUI2" />
-    <h1>NutUI 2</h1>
-    <p style="color:#455A64;">一套移动端轻量级Vue组件库</p>
-</div>
+# NutUI 2
+
+NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。
 
+<div style="margin:30px 0;">
+    <img src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" width="150" alt="NutUI">
+</div>
 
 ## 特性
 
@@ -31,6 +32,8 @@
 > 你还可以订阅： https://github.com/jdf2e/nutui/releases.atom 来获得稳定版发布的通知。
 
 ## 链接
+* [Vue官方文档](http://cn.vuejs.org/)
+* [Webpack](http://webpack.github.io/)
 * [意见反馈](https://github.com/jdf2e/nutui/issues)
 * [更新日志](https://github.com/jdf2e/nutui/releases)
 * [模板工程命令行工具(Gaea-cli)](https://github.com/jdf2e/Gaea4)

docs/start.md

@@ -1,11 +1,12 @@
 # 快速上手
 
 ## 推荐工程
+
 我们提供一个命令行工具 [Gaea-cli](https://www.npmjs.com/package/gaea-cli) ，可用来快速生成一个已经内置了本组件库的基于 Webpack 的 Vue 项目工程。基于这个工程开发项目，可省去大量配置和调试环境的时间，也可略过下面组件库安装使用部分内容直接进入开发阶段。
 
 ## 安装
 
-推荐使用 NPM 或 YARN 安装
+* 推荐使用 NPM 或 YARN 安装（推荐）
 
 #### NPM
 ```bash
@@ -20,11 +21,65 @@ yarn add @nutui/nutui
 
 > 默认安装最新版，如需使用 1.x 版本，请指定版本号，如：  `npm i @nutui/[email protected] -S`
 
-#### 浏览器引入
+* 页面直接引用
+
+在页面中使用 script 和 link 标签直接引入文件，**NutUI** 将会自动注册。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
 
-在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 nutui。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
+当然你也可以通过 CDN 的方式引入， 可以在 **jsdelivr** 和 **unpkg** 等公共 CDN 上获取到 NutUI。我们推荐链接到一个你可以手动更新的指定版本号。
 
-> 我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐浏览器中直接引入的用法
+```html
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
+<!-- 引入Vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+<!-- 引入组件库 -->
+<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
+```
+
+CDN 引入示例
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- 引入样式 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
+</head>
+<body>
+    <div id="app">
+        <nut-button @click="showDialog">
+            Button
+        </nut-button>
+    </div>
+
+    <!-- 引入Vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+    <!-- 引入NutUI组件库 -->
+    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.js"></script>
+    <script>
+        new Vue({
+            el: '#app',
+            methods: {
+                showDialog() {
+                    this.$dialog({
+                        title: "确定删除此订单？",
+                        content: "删除后将从你的记录里消失，无法找回"
+                    });
+                }
+            }
+        });
+    </script>
+</body>
+</html>
+```
+
+> 在页面中直接引入，将无法使用 **主题换肤** 等功能。我们推荐使用 *NPM* 或 *YARN* 方式安装，不推荐在页面中直接引入的用法
+
+* 通过 **Vue-cli** 图形化界面安装
+
+如果你的项目是使用 [Vue-cli](https://cli.vuejs.org/zh/) 脚手架搭建，那么你还可以通过 **Vue-cli** 提供的图形化界面安装 **NutUI** ：在图形化界面的 **依赖** 界面，点击右上角 **安装依赖** 按钮，搜索 **@nutui/nutui** 安装即可。
 
 ## 加载示例
 
@@ -42,7 +97,7 @@ NutUI.install(Vue);
 
 以下两种方式都可以实现只加载用到的组件，从而减少加载的文件体积。
 
-### 1. 使用 webpack 插件 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 
+### 1. 使用 webpack 插件 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** (推荐)
 
 首先安装 **@nutui/separate-import** 插件
 
@@ -61,7 +116,7 @@ npm i @nutui/separate-import -D
   ]
 }
 ```
-> style 选项值为 "css" 时加载组件对应的css文件，为 "scss" 时加载对应的scss文件。无style选项时，不自动加载样式。
+> style 选项值为 "css" 时加载组件对应的css文件，为 "scss" 时加载对应的scss文件。无style选项时，不自动加载样式文件。
 
 接下来，我们就可以在项目里只引入用到的组件了。默认情况下，样式也无需单独引入。插件会自动将代码转换为方式二的手动引入方式。
 
@@ -91,6 +146,9 @@ Button.install(Vue);
 ```html
 <nut-switch :active="true" size="base"></nut-switch>
 ```
-2.组件具体用法以文档为准
 
-3.组件使用过程中如有问题或建议，欢迎[反馈](https://github.com/jdf2e/nutui/issues)
+2.组件 css 单位使用的是 **px**，如果你的项目中需要 **rem** 单位，可借助一些工具进行转换，比如 webpack 的 [px2rem-loader](https://www.npmjs.com/package/px2rem-loader)、postcss 的 [postcss-plugin-px2rem](https://www.npmjs.com/package/postcss-plugin-px2rem) 插件
+
+3.组件具体用法以文档为准
+
+4.组件使用过程中如有问题或建议，欢迎[反馈](https://github.com/jdf2e/nutui/issues)

docs/theme.md

@@ -1,8 +1,11 @@
 # 主题定制
 
+> 定制主题须使用 NutUI 2.0 以上版本
+
 NutUI 默认提供一套 UI 主题，同时允许在一定程度上定制新的主题，以满足业务的多样化视觉需求。
 
-> 定制主题需使用 NutUI 2.0 以上版本
+![主题定制](http://img14.360buyimg.com/uba/jfs/t1/14893/39/4803/92712/5c3478afEc0458edb/54e06165a4445661.png)
+
 
 ## 样式变量
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",
@@ -137,7 +137,7 @@
     "webpack": "4.25.0",
     "webpack-bundle-analyzer": "2.13.1",
     "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.5",
+    "webpack-dev-server": "3.1.11",
     "webpack-merge": "4.1.4",
     "webpack-node-externals": "1.7.2"
   },

scripts/md-to-other.js renamed to scripts/mdToVue.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 var path = require('path');
 let marked = require('marked');
-
+let package =require("../package.json") ;
 if (!marked) {
     console.log('you need npm i marked -D!');
 }
@@ -76,6 +76,7 @@ let jsroot = `<script>export default {
 //插入
 function insert(sorce) {
     var insert = sorce.indexOf('</h1>');
+    
     if (insert > -1) {
         return sorce.substring(0, insert) + '<i class="qrcode"><a :href="demourl"><span>请使用手机扫码体验</span><img :src="codeurl" alt=""></a></i>' + sorce.substring(insert, sorce.length);
     } else {
@@ -86,6 +87,7 @@ function insert(sorce) {
 ///创建一个空文件
 function createdFile(output, sorce,ishasCode) {
     var pathSrc = output;
+    sorce = sorce.replace(/@latest/g,'@'+package.version)
     if(!ishasCode){       
         var res = insert(sorce);
     }   else{

sites/demo/app.js

@@ -1,12 +1,14 @@
-//import 'babel-polyfill';
 import "core-js/modules/es6.promise";
 import "core-js/modules/es6.array.iterator";
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
+import Conf from '../../src/config.json';
 import NutUI from '../../src/nutui';
 // import en from '../../src/locales/lang/en-US';
 // import demoEN from './lang/en-US';
+
+
 import './asset/css/common.scss';
 
 import './asset/img/logo_share.png';
@@ -49,8 +51,7 @@ const app = new Vue({
   template: '<App/>'
 })
 
-//Vue.prototype.NUTCONF = Conf;
-
+Vue.prototype.NUTCONF = Conf;
 
 let pageLoading = app.$toast.loading();
 

sites/demo/asset/css/custom.scss

@@ -1,6 +1,5 @@
 // Color
-$primary-color : green;
-$gradient-start-color: mix($primary-color , #FFF, 60%);
-$gradient-end-color: mix($primary-color , #FFF, 80%);
-$btn-gradient-bg : linear-gradient(315deg, $gradient-start-color 0%,  $gradient-end-color 100%);
-
+$primary-color: #4169E1;
+$gradient-start-color: mix($primary-color, #FFF, 60%);
+$gradient-end-color: mix($primary-color, #FFF, 80%);
+$btn-gradient-bg: linear-gradient(315deg, $gradient-start-color 0%, $gradient-end-color 100%);

sites/demo/index.html

@@ -7,7 +7,7 @@
   <link rel="shortcut icon" href="/favicon.ico">
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
   <title>NutUI - 移动端Vue组件库</title>
-  <script src="//misc.360buyimg.com/felibs/vue/2.5.16/vue.min.js"></script>
+  <!-- <script src="//misc.360buyimg.com/felibs/vue/2.5.16/vue.min.js"></script> -->
   <script src="https://h5.m.jd.com/babelDiy/Zeus/2846ykuM7PwipD9E2RzMj2BGEQpA/plugin/share.min.js"></script>
   <!-- <script src="//misc.360buyimg.com/felibs/fastclick/1.0.6/fastclick.min.js"></script> -->
   <style>
@@ -29,8 +29,8 @@
     var shareOption = {
       iconUrl: 'http://nutui.jd.com/img/logo_share.png',
       url: 'http://nutui.jd.com/demo.html#/index',
-      title: '移动端Vue组件库 NutUI 2.0',
-      desc: '一套京东风格的轻量级移动端Vue组件库'
+      title: '轻量级移动端Vue组件库 - NutUI 2.0',
+      desc: '京东风格的Vue组件库'
     };
 
     try {

sites/demo/view/demonav.vue

@@ -81,7 +81,7 @@ export default {
         display: block;
         width: 26px;
         height: 26px;
-        background: url("data:image/svg+xml, %3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999' d='M959.39 527.762c0 23.128-18.419 41.874-41.138 41.874-12.336 0-23.277-5.64-30.818-14.394L541.09 202.729a40.629 40.629 0 0 0-58.18 0L237.802 452.204c2.878 5.636 4.654 11.927 4.654 18.69v165.477c0 .328-.089.635-.097.961h.298v163.004c0 23.126 18.506 41.872 41.337 41.872h82.569v-164.47c0-22.85 18.52-41.368 41.369-41.368h206.844c22.848 0 41.369 18.518 41.369 41.369 0 22.846-18.52 41.369-41.37 41.369H449.3v165.474c0 22.427-17.875 40.583-40.142 41.246v.122h-146.01c-57.116 0-103.418-46.864-103.418-104.678v-183.94h.085c-.006-.327-.097-.634-.097-.962V531.68l-23.163 23.576c-7.542 8.745-18.476 14.38-30.808 14.38-22.719 0-41.139-18.746-41.139-41.874 0-11.862 4.896-22.52 12.688-30.141l-.237-.242L439.275 128.71c40.164-40.88 105.286-40.88 145.45 0l361.57 368.011-.3.306c8.18 7.653 13.395 18.536 13.395 30.735zM614.734 842.207c.443 0 .854.12 1.294.132v-.132h122.683c22.83 0 41.338-18.746 41.338-41.872V637.33h.534c-.016-.496-.145-.961-.145-1.464 0-23.126 18.417-41.874 41.139-41.874 22.72 0 41.137 18.748 41.137 41.874 0 .503-.126.968-.146 1.464h.406v183.94c0 57.813-46.3 104.679-103.419 104.679H616.026v-.132c-.44.014-.852.132-1.294.132-22.72 0-41.14-18.744-41.14-41.87.003-23.124 18.422-41.873 41.142-41.873z'/%3E%3C/svg%3E") no-repeat center;
+        background: url("data:image/svg+xml, %3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(153,153,153)' d='M959.39 527.762c0 23.128-18.419 41.874-41.138 41.874-12.336 0-23.277-5.64-30.818-14.394L541.09 202.729a40.629 40.629 0 0 0-58.18 0L237.802 452.204c2.878 5.636 4.654 11.927 4.654 18.69v165.477c0 .328-.089.635-.097.961h.298v163.004c0 23.126 18.506 41.872 41.337 41.872h82.569v-164.47c0-22.85 18.52-41.368 41.369-41.368h206.844c22.848 0 41.369 18.518 41.369 41.369 0 22.846-18.52 41.369-41.37 41.369H449.3v165.474c0 22.427-17.875 40.583-40.142 41.246v.122h-146.01c-57.116 0-103.418-46.864-103.418-104.678v-183.94h.085c-.006-.327-.097-.634-.097-.962V531.68l-23.163 23.576c-7.542 8.745-18.476 14.38-30.808 14.38-22.719 0-41.139-18.746-41.139-41.874 0-11.862 4.896-22.52 12.688-30.141l-.237-.242L439.275 128.71c40.164-40.88 105.286-40.88 145.45 0l361.57 368.011-.3.306c8.18 7.653 13.395 18.536 13.395 30.735zM614.734 842.207c.443 0 .854.12 1.294.132v-.132h122.683c22.83 0 41.338-18.746 41.338-41.872V637.33h.534c-.016-.496-.145-.961-.145-1.464 0-23.126 18.417-41.874 41.139-41.874 22.72 0 41.137 18.748 41.137 41.874 0 .503-.126.968-.146 1.464h.406v183.94c0 57.813-46.3 104.679-103.419 104.679H616.026v-.132c-.44.014-.852.132-1.294.132-22.72 0-41.14-18.744-41.14-41.87.003-23.124 18.422-41.873 41.142-41.873z'/%3E%3C/svg%3E") no-repeat center;
         background-size: contain;
     }
     .title{
@@ -98,7 +98,7 @@ export default {
         text-decoration:none;
         color:#000;
         padding-left:20px;
-        background:url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#999' %3E%3Cpath d='M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385 0-.191-.008-.821-.011-1.489-2.226.484-2.695-.944-2.695-.944-.364-.925-.888-1.171-.888-1.171-.726-.497.055-.486.055-.486.803.056 1.226.824 1.226.824.714 1.223 1.872.869 2.328.665.072-.517.279-.87.508-1.07-1.777-.202-3.645-.888-3.645-3.954 0-.873.313-1.587.824-2.147-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.079 2.117.513.56.823 1.274.823 2.147 0 3.073-1.872 3.749-3.653 3.947.287.248.543.735.543 1.481 0 1.07-.009 1.932-.009 2.195 0 .213.144.462.55.384A8 8 0 0 0 8.001.196z'/%3E%3C/svg%3E") no-repeat center;
+        background:url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb(153,153,153)' %3E%3Cpath d='M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385 0-.191-.008-.821-.011-1.489-2.226.484-2.695-.944-2.695-.944-.364-.925-.888-1.171-.888-1.171-.726-.497.055-.486.055-.486.803.056 1.226.824 1.226.824.714 1.223 1.872.869 2.328.665.072-.517.279-.87.508-1.07-1.777-.202-3.645-.888-3.645-3.954 0-.873.313-1.587.824-2.147-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.079 2.117.513.56.823 1.274.823 2.147 0 3.073-1.872 3.749-3.653 3.947.287.248.543.735.543 1.481 0 1.07-.009 1.932-.009 2.195 0 .213.144.462.55.384A8 8 0 0 0 8.001.196z'/%3E%3C/svg%3E") no-repeat center;
         background-size:100% auto;
         background-origin:content-box;
     }