upd: nutui cli

.gitignore

@@ -17,3 +17,6 @@ localdocs.cache
 cache/src.cache
 cache/mdToVue.cache
 cache/docs.cache
+lib/plugin/cli/dist_cli/
+lib/plugin/cli/site/doc/view/
+lib/plugin/cli/site/doc/page/

README-zh_CN.md

@@ -57,6 +57,14 @@ https://nutui.jd.com
 * 联系我们：nutui@jd.com
 
 
+## 使用案例
+
+NutUI 已经投入了我们的生产环境中使用，业界也在广泛地使用。
+
+<img src="https://raw.githubusercontent.com/richard1015/nutui-user-cases/master/user-cases.jpg" />
+
+[征集更多优秀案例](https://github.com/richard1015/nutui-user-cases)
+
 ## 开源协议
 
 本项目基于 **MIT** 协议

README.md

@@ -57,6 +57,14 @@ Documents：[2.X](https://nutui.jd.com/default.html#/start) | [1.X](https://nutu
 * Contact us：nutui@jd.com
 
 
+## User Cases
+
+NutUI has been put into use in our production environment and is widely used in developing countries at the same time.
+
+<img src="https://raw.githubusercontent.com/richard1015/nutui-user-cases/master/user-cases.jpg" />
+
+[Call for more excellent cases](https://github.com/richard1015/nutui-user-cases)
+
 ## Open Source LICENSE
 
 Based on **MIT** LICENSE

babel.config.js

@@ -3,11 +3,14 @@ const presets = [
 		'@babel/preset-env',
 		{
 			loose: true,
-			modules: false
+			modules: 'commonjs',
+			targets: {
+				browsers: ['Android >= 4', 'iOS >= 8']
+			}
 		}
 	]
 ];
 
-const plugins = ['@babel/plugin-transform-runtime'];
+const plugins = ['@babel/plugin-transform-runtime', '@babel/plugin-transform-object-assign'];
 
 module.exports = { presets, plugins };

docs/start.md

@@ -137,7 +137,7 @@ import '@nutui/nutui/dist/nutui.css';
 NutUI.install(Vue);
 ```
 
-> 注意：这种方式将会导入所有组件，我们比较建议您采用下面 按需加载方式
+> 注意：这种方式将会导入所有组件
 
 ## 按需加载
 

lib/plugin/cli/CHANGELOG.md

@@ -0,0 +1,28 @@
+## 0.0.5
+
+`2020-2-24`
+- 测试cli test配置
+
+## 0.0.4
+
+`2020-2-20`
+- 测试cli test配置
+
+## 0.0.3
+
+`2020-2-20`
+- 测试cli test配置
+
+## 0.0.2
+
+`2020-1-20`
+
+- 版本测试
+
+## 0.0.1
+
+`2020-1-20`
+
+- WebPack4全新的架构
+
+

lib/plugin/cli/README.md

@@ -0,0 +1,45 @@
+# NutUI ClI
+
+NutUI ClI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写组件上，而不必花好几天去纠结配置的问题。
+
+
+## 命令
+
+### dev
+
+本地调试运行官网和Demo示例
+
+
+### add
+
+快速创建新增组件标准模板
+
+### build
+
+构建组件库，在`dist`目录下生成可用于生产环境的组件代码
+
+### build-site
+
+构建官网+Demo示例网站，输出到 `dist/site`
+
+
+### commit-lint
+
+校验 commit message 的格式是否符合规范，需要配合`husky`在提交 commit 时触发
+
+### lint
+
+运行stylelint和eslint 进行格式化代码，确保规范
+
+### test
+
+运行单元测试
+
+
+### clean
+
+清空打包目录
+
+
+
+

lib/plugin/cli/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@nutui/cli",
+  "version": "0.1.1",
+  "description": "nutui cli",
+  "main": "./dist_cli/bin/index.js",
+  "files": [
+    "dist_cli",
+    "README.md",
+    "package.json",
+    "site",
+    "README.md"
+  ],
+  "bin": {
+    "nutui-cli": "./dist_cli/bin/index.js"
+  },
+  "scripts": {
+    "dev": "tsc --watch --incremental"
+  },
+  "keywords": [
+    "nutui/cli"
+  ],
+  "author": "richard1015",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-transform-object-assign": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@commitlint/cli": "^8.0.0",
+    "@commitlint/config-conventional": "^8.0.0",
+    "@nutui/markdown-to-vue": "0.0.1",
+    "@types/node": "^13.1.1",
+    "@vue/test-utils": "1.0.0-beta.25",
+    "autoprefixer": "^9.7.3",
+    "babel-loader": "^8.0.6",
+    "cache-loader": "^4.1.0",
+    "clipboard": "^2.0.4",
+    "commander": "^4.0.1",
+    "copy": "^0.3.2",
+    "copy-webpack-plugin": "^5.1.1",
+    "coveralls": "^3.0.2",
+    "cross-env": "^5.2.0",
+    "css-loader": "^3.4.1",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.1.2",
+    "expect": "23.6.0",
+    "file-loader": "^5.0.2",
+    "fs": "0.0.1-security",
+    "fs-extra": "^8.1.0",
+    "highlight.js": "^9.17.1",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "^3.0.0",
+    "inquirer": "^7.0.3",
+    "istanbul-instrumenter-loader": "3.0.1",
+    "jsdom": "13.0.0",
+    "jsdom-global": "3.0.2",
+    "mini-css-extract-plugin": "^0.9.0",
+    "mocha": "5.2.0",
+    "mocha-webpack": "2.0.0-beta.0",
+    "node-sass": "^4.13.0",
+    "nyc": "10.0.0",
+    "offline-plugin": "^5.0.7",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "path": "^0.12.7",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-url": "^8.0.0",
+    "qrcode": "^1.4.4",
+    "raw-loader": "^4.0.0",
+    "sass-loader": "^8.0.0",
+    "signale": "^1.4.0",
+    "style-loader": "^1.1.2",
+    "stylelint": "^13.0.0",
+    "stylelint-config-standard": "^19.0.0",
+    "stylelint-webpack-plugin": "^1.2.0",
+    "typescript": "^3.7.4",
+    "url-loader": "^3.0.0",
+    "vue": "^2.6.11",
+    "vue-lazyload": "^1.3.3",
+    "vue-loader": "^15.8.3",
+    "vue-router": "^3.1.3",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.11",
+    "vueg": "^1.4.5",
+    "webpack": "^4.41.5",
+    "webpack-dev-server": "^3.10.1",
+    "webpack-merge": "^4.2.2",
+    "webpack-node-externals": "1.7.2",
+    "webpackbar": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/eslint": "^6.1.3",
+    "@types/html-webpack-plugin": "^3.2.1",
+    "@types/mini-css-extract-plugin": "^0.9.0",
+    "@types/optimize-css-assets-webpack-plugin": "^5.0.1",
+    "@types/stylelint": "^9.10.1",
+    "@types/vfile-message": "^2.0.0",
+    "@types/webpack": "^4.41.0",
+    "@types/webpack-merge": "^4.1.5"
+  }
+}

lib/plugin/cli/site/demo/app.js

@@ -0,0 +1,107 @@
+import Vue from 'vue';
+import App from './app.vue';
+import router from './router';
+import mixin from './view/mixin.js';
+import Conf from '@/config.json';
+
+import NutUI from '@/nutui';
+// import en from '../../src/locales/lang/en-US';
+// import demoEN from './lang/en-US';
+
+import * as OfflinePluginRuntime from 'offline-plugin/runtime';
+
+import './asset/css/common.scss';
+
+import './asset/img/logo_share.png';
+
+Vue.config.productionTip = false;
+
+
+
+// Object.assign(en, demoEN);
+
+// Vue.use(NutUI, {
+//   locale: 'en-US',
+//   lang: en
+// });
+
+NutUI.install(Vue);
+
+
+//Vue.locale = () => {};
+
+// const i18n = new VueI18n({
+//   locale: 'en-US',
+//   messages: {
+//     'en-US': en
+//   }
+// });
+
+// 兼容vue-i18n
+// Vue.locale = () => {};
+// const i18n = new VueI18n({
+//   locale: 'en-US',
+//   messages: {
+//     'en-US': en
+//   }
+// });
+// Vue.prototype.$i18n = i18n;
+// Vue.use(VueI18n);
+
+Vue.mixin(mixin);
+
+const app = new Vue({
+  el: '#demo',
+  router,
+  components: { App },
+  template: '<App/>'
+});
+
+OfflinePluginRuntime.install({
+  onUpdating: () => {
+    console.log('SW Event:', 'onUpdating');
+  },
+  onUpdateReady: () => {
+    console.log('SW Event:', 'onUpdateReady');
+    OfflinePluginRuntime.applyUpdate();
+  },
+  onUpdated: () => {
+    console.log('SW Event:', 'onUpdated');
+    console.log('PWA缓存有更新，需要刷新页面');
+
+    app.$dialog({
+      title: "当前页面有新版本，请刷新",
+      noCloseBtn: true,
+      noOkBtn: true,
+      cancelBtnTxt: "刷新页面",
+      closeOnClickModal:false,
+      lockBgScroll:true,
+      onCancelBtn(){
+        window.location.reload();
+      }
+    });
+
+    //window.location.reload();
+  },
+
+  onUpdateFailed: () => {
+    console.log('SW Event:', 'onUpdateFailed');
+  }
+});
+
+Vue.prototype.NUTCONF = Conf;
+
+let pageLoading = app.$toast.loading();
+
+router.beforeEach((to, from, next) => {
+  pageLoading.show();
+  next();
+})
+
+router.beforeResolve((to, from, next) => {
+  next();
+});
+
+router.afterEach((to, from) => {
+  pageLoading.hide();
+});

lib/plugin/cli/site/demo/app.vue

@@ -0,0 +1,55 @@
+<template>
+	<div :class="['demo-wrapper', { 'in-iframe': inIframe }]">
+		<router-view class="demo-nav" name="demonav" v-if="!inIframe" v-transition></router-view>
+		<keep-alive include="index">
+			<router-view class="demo" name="main" v-transition></router-view>
+		</keep-alive>
+	</div>
+</template>
+<script>
+export default {
+	name: 'app',
+	data() {
+		return {
+			inIframe: false
+		};
+	},
+	mounted() {
+		if (window.self != window.top) {
+			this.inIframe = true;
+		}
+	}
+};
+</script>
+<style lang="scss">
+* {
+	-webkit-tap-highlight-color: transparent;
+}
+[v-cloak] {
+	display: none;
+}
+body {
+	font-size: 16px;
+	margin: 0;
+	color: #2e2d2d;
+	font-family: PingHei, 'Microsoft YaHei', 'Lucida Grande', 'Lucida Sans Unicode', STHeiti, Helvetica, Arial, Verdana, 'sans-serif', 'PingHei-light',
+		SimHei, 'Droid Sans';
+}
+.demo-wrapper {
+	width: 100%;
+	min-height: 100vh;
+	padding-top: 40px;
+	box-sizing: border-box;
+	background: #f6f6f6;
+	&.in-iframe {
+		padding-top: 0;
+	}
+}
+h4 {
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+.demo {
+	padding: 0 8px 20px 8px;
+}
+</style>

lib/plugin/cli/site/demo/asset/css/common.scss

@@ -0,0 +1,33 @@
+html,
+body {
+	width: 100%;
+}
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+	opacity: 0;
+}
+
+h4 {
+	margin: 20px 0 10px;
+}
+
+.demo-list {
+	padding-left: 0;
+	padding-right: 0;
+	overflow: hidden;
+	h4 {
+		padding: 0 8px;
+		box-sizing: border-box;
+	}
+}
+
+p {
+	font-size: 12px;
+	margin: 5px 10px;
+	color: #666;
+}

lib/plugin/cli/site/demo/asset/css/custom.scss

@@ -0,0 +1,5 @@
+// Color
+$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%);

lib/plugin/cli/site/demo/asset/manifest.json

@@ -0,0 +1,12 @@
+{
+	"short_name": "NutUI",
+	"name": "一套京东风格的移动端Vue组件库",
+	"icons": [
+		{
+			"src": "/img/pwa_logo.png",
+			"type": "image/png",
+			"sizes": "144x144"
+		}
+	],
+	"start_url": "/demo.html"
+}

lib/plugin/cli/site/demo/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta content="telephone=no" name="format-detection" />
+  <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" />
+  <link rel="manifest" href="./demo/manifest.json">
+  <title>NutUI - 移动端Vue组件库</title>
+  <script src="https://h5.m.jd.com/babelDiy/Zeus/2846ykuM7PwipD9E2RzMj2BGEQpA/plugin/share.min.js"></script>
+  <style>
+    html {
+      background: #F6F6F6;
+    }
+
+    a[title=站长统计] {
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <script>
+    //分享配置
+    var shareOption = {
+      iconUrl: 'https://nutui.jd.com/img/logo_share.png',
+      url: 'https://nutui.jd.com/demo.html#/index',
+      title: '轻量级移动端Vue组件库 - NutUI 2.0',
+      desc: '京东风格的Vue组件库'
+    };
+
+    try {
+      /*初始化分享*/
+      share.shareInit(shareOption);
+    } catch (e) {
+      console.log(e);
+    }
+  </script>
+  <div id="demo">
+
+  </div>
+  <script type="text/javascript">
+    var jaq = jaq || [];
+    jaq.push(['account', 'JA2018_1831300']);
+    jaq.push(['domain', 'jd.com']);
+    (function () {
+      var ja = document.createElement('script');
+      ja.type = 'text/javascript';
+      ja.async = true;
+      ja.src = '//wl.jd.com/joya.js';
+      var s = document.getElementsByTagName('script')[0];
+      s.parentNode.insertBefore(ja, s);
+    })()
+  </script>
+  <script type="text/javascript" src="https://s23.cnzz.com/z_stat.php?id=1276268086&web_id=1276268086"></script>
+</body>
+
+</html>

lib/plugin/cli/site/demo/lang/en-US.js

@@ -0,0 +1,19 @@
+const lang = {
+    demo: {
+        cell: {
+            h4_1: 'Base Usage[{subTitle}]',
+            h4_1title: 'I am a title',
+            h4_1subtitle: 'I am a subtitle',
+            h4_1sesc: 'description',
+            h4_1link: 'with link',
+            h4_1desc: 'show default ICON',
+            h4_2: 'Distributing content through Slot'
+        },
+        dialog:{
+            okBtnTxt:'aa1',
+            CancelBtnTxt:'aa2'
+        }
+    }
+}
+
+export default lang 

lib/plugin/cli/site/demo/lang/zn-CH.js

@@ -0,0 +1,19 @@
+const lang = {
+    demo: {
+        cell: {
+            h4_1: '基本用法',
+            h4_1title: '我是标题',
+            h4_1subtitle: '我是副标题',
+            h4_1sesc: '描述文字',
+            h4_1link: '带链接',
+            h4_1desc: '展示默认ICON',
+            h4_2: '通过Slot插槽分发内容'
+        },
+        dialog: {
+            okBtnTxt: '确定1',
+            CancelBtnTxt: '取消1'
+        }
+    }
+}
+
+export default lang 

lib/plugin/cli/site/demo/router.js

@@ -0,0 +1,73 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { packages } from '@/config.json';
+import vueg from 'vueg';
+
+const Index = () => import(/* webpackChunkName: "demo-index" */ './view/index.vue');
+const DemoNav = () => import(/* webpackChunkName: "demo-demonav" */'./view/demonav.vue');
+
+// import Index from './view/index.vue';
+// import DemoNav from './view/demonav.vue';
+
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '*',
+    redirect: '/index'
+  },
+  {
+    name:'index',
+    path: '/index',
+    components: {
+      main: Index,
+      demonav: DemoNav,
+    }
+  },
+];
+
+//组件示例页面
+packages.map(item => {
+  if (item.showDemo === false) return;
+  const pkgName =  item.name.toLowerCase();
+  routes.push({
+    path: '/' + item.name,
+    components: {
+      main: () => import(
+        /* webpackChunkName: "demo-[request]" */
+        `@/packages/${pkgName}/demo.vue`),
+      demonav: DemoNav
+    },
+    name: item.name
+  });
+});
+
+const router = new VueRouter({
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (to.path == '/index') {
+      return null;
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }
+});
+
+
+const options = {
+  duration: '0.2', //转场动画时长，默认为0.3，单位秒
+  firstEntryDisable: true, //值为true时禁用首次进入应用时的渐现动画，默认为false
+  firstEntryDuration: '.3', //首次进入应用时的渐现动画时长，默认为.6
+  forwardAnim: 'fadeInRight', //前进动画，默认为fadeInRight
+  backAnim: 'fadeInLeft', //后退动画，默认为fedeInLeft
+  sameDepthDisable: false, //url深度相同时禁用动画，默认为false
+  tabs: [], //默认为[]，'name'对应路由的name,以实现类似app中点击tab页面水平转场效果，如tabs[1]到tabs[0]，会使用backAnim动画，tabs[1]到tabs[2]，会使用forwardAnim动画
+  tabsDisable: false, //值为true时，tabs间的转场没有动画，默认为false
+  shadow: false, //值为false，转场时没有阴影的层次效果
+  disable: false, //禁用转场动画，默认为false，嵌套路由默认为true
+};
+
+Vue.use(vueg, router, options);
+
+export default router;

lib/plugin/cli/site/demo/view/mixin.js

@@ -0,0 +1,21 @@
+export default {
+  data() {
+    return {
+      isMobile: false,
+      cacheHasNewVersion:false
+    };
+  },
+  methods: {
+    checkIsMob() {
+      if (window.navigator.userAgent.match(
+          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i)) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+  mounted() {
+    this.isMobile = this.checkIsMob();
+  }
+};

lib/plugin/cli/site/doc/app.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router';
+import copy from 'clipboard';
+import backtop from './compents/backtop/backtop.js';
+import './compents/backtop/backtop.css';
+backtop.install(Vue);
+import 'highlight.js/styles/github.css';
+import VueStickto from './compents/vue-stickto/VueStickto.js';
+Vue.use(VueStickto)
+import codes from 'qrcode';
+import { isMobile } from './asset/js/utils.js';
+
+if (isMobile) {
+  location.replace('demo.html' + location.hash);
+}
+
+Vue.prototype.copy = copy;
+Vue.prototype.qrcode = codes;
+
+Vue.config.productionTip = false;
+
+new Vue({
+  el: '#doc',
+  router,
+  components: { App },
+  template: '<App/>'
+});
+

lib/plugin/cli/site/doc/asset/css/style-blue.scss

@@ -0,0 +1,194 @@
+.doc-cont {
+	margin: 0 0 0 60px;
+	position: relative;
+	h1 {
+		font-size: 30px;
+		font-weight: 700;
+		margin: 10px 0 20px;
+		color: #333333;
+	}
+	p {
+		font-size: 14px;
+		line-height: 1.8;
+		margin: 10px 0;
+	}
+	h1 + p,
+	h1 + p + p,
+	h1 + p + p {
+		color: #333333;
+	}
+	h2 {
+		margin: 30px 0 15px;
+		font-size: 22px;
+		font-weight: 400;
+		color: #333333;
+	}
+	h2 + p,
+	h2 + p + p {
+		color: #3f4449;
+	}
+	h3 {
+		margin: 20px 0 10px;
+		font-size: 18px;
+		font-weight: 400;
+		color: #333333;
+	}
+	h3 + p,
+	h3 + p + p {
+		color: #3f4449;
+	}
+	h4 {
+		font-size: 14px;
+		font-weight: normal;
+		margin: 15px 0;
+		color: #666666;
+	}
+	h4 + p,
+	h4 + p + p,
+	h4 + p + p + p {
+		color: #666666;
+	}
+	h4 + p::nth-child(n) {
+		color: #666666;
+	}
+	blockquote {
+		padding: 0;
+		margin: 0;
+		margin-top: 10px;
+		p {
+			margin: 0;
+			display: inline-block;
+			background: rgba(83, 150, 255, 0.14);
+			font-size: 14px;
+			color: #333333;
+			border-radius: 4px;
+			text-decoration-style: none;
+			border-left: 8px solid #5396ff;
+			padding: 15px 54px 15px 22px;
+			line-height: 1.5;
+			overflow: hidden;
+			font-style: normal;
+		}
+	}
+	ul {
+		border-radius: 3px;
+		padding: 5px 20px 5px 0;
+		list-style: none;
+		p {
+			margin: 0;
+		}
+		ul {
+			margin: 0;
+			padding: 0;
+		}
+		li {
+			font-size: 14px;
+			color: #455a64;
+			padding: 7px;
+			line-height: 20px;
+			display: flex;
+			align-items: center;
+		}
+		li:before {
+			content: '';
+			width: 6px;
+			height: 6px;
+			border: 1px solid #455a64;
+			border-radius: 14px;
+			margin-right: 12px;
+			display: inline-block;
+		}
+	}
+	ol {
+		background: #f2f4f5;
+		border-radius: 3px;
+		padding: 13px 40px;
+		li {
+			line-height: 20px;
+			padding: 7px 0 0 10px;
+			font-size: 14px;
+			color: #3f4449;
+		}
+	}
+	ul,
+	ol,
+	p,
+	table {
+		em {
+			color: #8cade9;
+			font-style: normal;
+			padding: 0 2px;
+		}
+		strong {
+			display: inline-block;
+			background: #f7f7f7;
+			border: 1px solid #ececec;
+			border-radius: 2px;
+			font-size: 13px;
+			line-height: 1;
+			color: #3f536e;
+			padding: 3px 5px;
+			margin: 0 5px;
+		}
+	}
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		th {
+			background: #f7f7f7;
+			border: 1px solid #e9e9e9;
+			font-size: 14px;
+			line-height: 1.5;
+			color: #333333;
+			height: 40px;
+			padding: 0 20px 0 14px;
+		}
+		td {
+			border: 1px solid #e9e9e9;
+			font-size: 14px;
+			line-height: 1.5;
+			color: #3f4449;
+			height: 50px;
+			padding-left: 14px;
+		}
+	}
+	hr {
+		height: 1px;
+		border-width: 0;
+		background-color: #e7f0ff;
+	}
+	img[alt='full'] {
+		width: 100%;
+	}
+	img[alt='flex'] {
+		flex-shrink: 0;
+		width: 50%;
+		padding: 0 15px;
+		flex-basis: auto;
+		flex: 1;
+	}
+	p {
+		font-size: 14px;
+		white-space: unset;
+		word-break: break-all;
+	}
+	a {
+		color: #5396ff;
+		text-decoration: none;
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+// 书签样式
+.markList {
+	a {
+		color: #666;
+	}
+	.cur {
+		a {
+			color: #5396ff;
+		}
+	}
+}

lib/plugin/cli/site/doc/asset/js/Detector.js

@@ -0,0 +1,86 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+var Detector = {
+
+	canvas: !! window.CanvasRenderingContext2D,
+	webgl: ( function () {
+
+		try {
+
+			var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	} )(),
+	webgl2: ( function () {
+
+		try {
+
+			var canvas = document.createElement( 'canvas' ); return !! ( window.WebGL2RenderingContext && ( canvas.getContext( 'webgl2' ) ) );
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	} )(),
+	workers: !! window.Worker,
+	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
+
+	getWebGLErrorMessage: function () {
+
+		var element = document.createElement( 'div' );
+		element.id = 'webgl-error-message';
+		element.style.fontFamily = 'monospace';
+		element.style.fontSize = '13px';
+		element.style.fontWeight = 'normal';
+		element.style.textAlign = 'center';
+		element.style.background = '#fff';
+		element.style.color = '#000';
+		element.style.padding = '1.5em';
+		element.style.width = '400px';
+		element.style.margin = '5em auto 0';
+
+		if ( ! this.webgl ) {
+
+			element.innerHTML = window.WebGLRenderingContext ? [
+				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' ) : [
+				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>',
+				'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.'
+			].join( '\n' );
+
+		}
+
+		return element;
+
+	},
+
+	addGetWebGLMessage: function ( parameters ) {
+
+		var parent, id, element;
+
+		parameters = parameters || {};
+
+		parent = parameters.parent !== undefined ? parameters.parent : document.body;
+		id = parameters.id !== undefined ? parameters.id : 'oldie';
+
+		// element = Detector.getWebGLErrorMessage();
+		// element.id = id;
+
+		// parent.appendChild( element );
+
+	}
+
+};
+
+module.exports = Detector;

lib/plugin/cli/site/doc/asset/js/bookmark.js

@@ -0,0 +1,18 @@
+import vb from '../asset/js/isVisibiliy.js';
+import root from '../root.js';
+        export default {
+            mixins:[root],
+            mounted(){
+              let visb = vb('.visibility');
+              visb.then(res=>{
+               
+               
+                let id  = res.target.id;
+                let index =id.replace(/head/,'');                
+                let li = document.querySelector('.level'+index);
+                if(li){
+                  
+                }
+              })
+            }
+        }

lib/plugin/cli/site/doc/asset/js/isVisibiliy.js

@@ -0,0 +1,55 @@
+function isVisibility(param){
+    
+    let domLists = document.querySelectorAll(param);
+    //元素属性
+    this.domList = domLists;
+    this.showDom = null; //当前展示的节点 
+    this.io = null;   
+}
+isVisibility.prototype.IntersectionObserverRun = function(){  
+    let _that = this;
+    if(IntersectionObserver){
+        _that.io = new IntersectionObserver(
+           (res)=>{
+            _that.Intersections(res)
+           },{  
+            rootMargin:'10px 0px 0px 0px',       
+            threshold: [ 0, Number.MIN_VALUE, 0.01]        
+        });
+        setTimeout(()=>{
+            //对当前元素进行监听
+            _that.domList.forEach((item)=>{
+                    _that.io.observe(item);
+            })
+        })
+    }
+    
+        
+} 
+isVisibility.prototype.Intersections = function (entries){
+    let _that = this;
+    if(// 正在交叉
+        entries[0].isIntersecting ||
+        // 交叉率大于0
+        entries[0].intersectionRatio){
+          
+            let showDom = entries[0];
+            this.showDom = showDom;
+            if(this.callback)   {
+                this.callback(showDom)   
+            }
+       
+    }
+};
+isVisibility.prototype.then = function(callback){   
+    
+    if(callback){
+        this.callback = callback;
+    }   
+}
+function run (param){
+   let visib = new isVisibility(param);
+   visib.IntersectionObserverRun();
+   return visib;
+}
+module.exports = run;

lib/plugin/cli/site/doc/asset/js/utils.js

@@ -0,0 +1,7 @@
+
+const ua = navigator.userAgent.toLowerCase();
+const isMobile = /ios|iphone|ipod|ipad|android/.test(ua);
+
+export {
+    isMobile
+}

lib/plugin/cli/site/doc/backup/fastStart.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="wrapper">
+		快速上手
+		<p id="copy">这个用来实验按钮的好坏</p>
+		<button class="btncp" data-clipboard-target="#copy">点击复制</button>
+	</div>
+</template>
+<style>
+body {
+	background: #fff;
+}
+</style>
+
+<script>
+export default {
+	name: 'index',
+	data() {
+		return {
+			path: '',
+			packages: {},
+			sortedPackages: [],
+			version: '',
+		};
+	},
+	watch: {
+		packages() {
+			const compare = (obj1, obj2) => {
+				const val1 = obj1.name;
+				const val2 = obj2.name;
+				if (val1 < val2) {
+					return -1;
+				} else if (val1 > val2) {
+					return 1;
+				} else {
+					return 0;
+				}
+			};
+
+			this.sortedPackages = [...this.packages].sort(compare);
+		},
+	},
+	methods: {},
+	created() {
+		// copys.on('success', function(e) {
+		//     console.info('Action:', e.action);
+		//     console.info('Text:', e.text);
+		//     console.info('Trigger:', e.trigger);
+		//     e.clearSelection();
+		// });
+	},
+};
+</script>
+<style></style>
+
+<style lang="scss" scoped>
+.logo {
+	text-align: center;
+	padding: 16px 0;
+	img {
+		width: 240px;
+	}
+	div {
+		font-family: Roboto, Lato, sans-serif;
+		font-size: 24px;
+		letter-spacing: 0.14px;
+		line-height: 20px;
+		margin-top: 12px;
+	}
+}
+.l-s {
+	list-style: none;
+	margin: 0;
+	padding: 10px 0;
+	li {
+		line-height: 40px;
+
+		border-bottom: 1px solid rgba(204, 204, 204, 0.4);
+		&:first-child {
+			border-top: none;
+		}
+	}
+	a {
+		text-decoration: none;
+		color: #333;
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		padding-left: 20px;
+		box-sizing: border-box;
+	}
+}
+</style>

lib/plugin/cli/site/doc/backup/international.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="wrapper">
+		国际化f
+		<p id="copy">这个用来实验按钮的好坏</p>
+		<button class="btncp" data-clipboard-target="#copy">点击复制</button>
+	</div>
+</template>
+<style>
+body {
+	background: #fff;
+}
+</style>
+
+<script>
+export default {
+	name: 'index',
+	data() {
+		return {
+			path: '',
+			packages: {},
+			sortedPackages: [],
+			version: '',
+		};
+	},
+	watch: {
+		packages() {
+			const compare = (obj1, obj2) => {
+				const val1 = obj1.name;
+				const val2 = obj2.name;
+				if (val1 < val2) {
+					return -1;
+				} else if (val1 > val2) {
+					return 1;
+				} else {
+					return 0;
+				}
+			};
+
+			this.sortedPackages = [...this.packages].sort(compare);
+		},
+	},
+	methods: {},
+	created() {
+		// copys.on('success', function(e) {
+		//     console.info('Action:', e.action);
+		//     console.info('Text:', e.text);
+		//     console.info('Trigger:', e.trigger);
+		//     e.clearSelection();
+		// });
+	},
+};
+</script>
+<style></style>
+
+<style lang="scss" scoped>
+.logo {
+	text-align: center;
+	padding: 16px 0;
+	img {
+		width: 240px;
+	}
+	div {
+		font-family: Roboto, Lato, sans-serif;
+		font-size: 24px;
+		letter-spacing: 0.14px;
+		line-height: 20px;
+		margin-top: 12px;
+	}
+}
+.l-s {
+	list-style: none;
+	margin: 0;
+	padding: 10px 0;
+	li {
+		line-height: 40px;
+
+		border-bottom: 1px solid rgba(204, 204, 204, 0.4);
+		&:first-child {
+			border-top: none;
+		}
+	}
+	a {
+		text-decoration: none;
+		color: #333;
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		padding-left: 20px;
+		box-sizing: border-box;
+	}
+}
+</style>

lib/plugin/cli/site/doc/backup/intr.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="wrapper">
+		自我介绍页
+		<p id="copy">这个用来实验按钮的好坏</p>
+		<button class="btncp" data-clipboard-target="#copy">点击复制</button>
+	</div>
+</template>
+<style>
+body {
+	background: #fff;
+}
+</style>
+
+<script>
+export default {
+	name: 'index',
+	data() {
+		return {
+			path: '',
+			packages: {},
+			sortedPackages: [],
+			version: '',
+		};
+	},
+	watch: {
+		packages() {
+			const compare = (obj1, obj2) => {
+				const val1 = obj1.name;
+				const val2 = obj2.name;
+				if (val1 < val2) {
+					return -1;
+				} else if (val1 > val2) {
+					return 1;
+				} else {
+					return 0;
+				}
+			};
+
+			this.sortedPackages = [...this.packages].sort(compare);
+		},
+	},
+	methods: {},
+	created() {
+		// copys.on('success', function(e) {
+		//     console.info('Action:', e.action);
+		//     console.info('Text:', e.text);
+		//     console.info('Trigger:', e.trigger);
+		//     e.clearSelection();
+		// });
+	},
+};
+</script>
+<style></style>
+
+<style lang="scss" scoped>
+.logo {
+	text-align: center;
+	padding: 16px 0;
+	img {
+		width: 240px;
+	}
+	div {
+		font-family: Roboto, Lato, sans-serif;
+		font-size: 24px;
+		letter-spacing: 0.14px;
+		line-height: 20px;
+		margin-top: 12px;
+	}
+}
+.l-s {
+	list-style: none;
+	margin: 0;
+	padding: 10px 0;
+	li {
+		line-height: 40px;
+
+		border-bottom: 1px solid rgba(204, 204, 204, 0.4);
+		&:first-child {
+			border-top: none;
+		}
+	}
+	a {
+		text-decoration: none;
+		color: #333;
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		padding-left: 20px;
+		box-sizing: border-box;
+	}
+}
+</style>

lib/plugin/cli/site/doc/backup/theme.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="wrapper">
+		主题
+		<p id="copy">这个用来实验按钮的好坏</p>
+		<button class="btncp" data-clipboard-target="#copy">点击复制</button>
+	</div>
+</template>
+<style>
+body {
+	background: #fff;
+}
+</style>
+
+<script>
+export default {
+	name: 'index',
+	data() {
+		return {
+			path: '',
+			packages: {},
+			sortedPackages: [],
+			version: '',
+		};
+	},
+	watch: {
+		packages() {
+			const compare = (obj1, obj2) => {
+				const val1 = obj1.name;
+				const val2 = obj2.name;
+				if (val1 < val2) {
+					return -1;
+				} else if (val1 > val2) {
+					return 1;
+				} else {
+					return 0;
+				}
+			};
+
+			this.sortedPackages = [...this.packages].sort(compare);
+		},
+	},
+	methods: {},
+	created() {
+		// copys.on('success', function(e) {
+		//     console.info('Action:', e.action);
+		//     console.info('Text:', e.text);
+		//     console.info('Trigger:', e.trigger);
+		//     e.clearSelection();
+		// });
+	},
+};
+</script>
+<style></style>
+
+<style lang="scss" scoped>
+.logo {
+	text-align: center;
+	padding: 16px 0;
+	img {
+		width: 240px;
+	}
+	div {
+		font-family: Roboto, Lato, sans-serif;
+		font-size: 24px;
+		letter-spacing: 0.14px;
+		line-height: 20px;
+		margin-top: 12px;
+	}
+}
+.l-s {
+	list-style: none;
+	margin: 0;
+	padding: 10px 0;
+	li {
+		line-height: 40px;
+
+		border-bottom: 1px solid rgba(204, 204, 204, 0.4);
+		&:first-child {
+			border-top: none;
+		}
+	}
+	a {
+		text-decoration: none;
+		color: #333;
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		padding-left: 20px;
+		box-sizing: border-box;
+	}
+}
+</style>

lib/plugin/cli/site/doc/backup/update.vue

@@ -0,0 +1,92 @@
+<template>
+	<div class="wrapper">
+		更新
+		<p id="copy">这个用来实验按钮的好坏</p>
+		<button class="btncp" data-clipboard-target="#copy">点击复制</button>
+	</div>
+</template>
+<style>
+body {
+	background: #fff;
+}
+</style>
+
+<script>
+export default {
+	name: 'index',
+	data() {
+		return {
+			path: '',
+			packages: {},
+			sortedPackages: [],
+			version: '',
+		};
+	},
+	watch: {
+		packages() {
+			const compare = (obj1, obj2) => {
+				const val1 = obj1.name;
+				const val2 = obj2.name;
+				if (val1 < val2) {
+					return -1;
+				} else if (val1 > val2) {
+					return 1;
+				} else {
+					return 0;
+				}
+			};
+
+			this.sortedPackages = [...this.packages].sort(compare);
+		},
+	},
+	methods: {},
+	created() {
+		// copys.on('success', function(e) {
+		//     console.info('Action:', e.action);
+		//     console.info('Text:', e.text);
+		//     console.info('Trigger:', e.trigger);
+		//     e.clearSelection();
+		// });
+	},
+};
+</script>
+<style></style>
+
+<style lang="scss" scoped>
+.logo {
+	text-align: center;
+	padding: 16px 0;
+	img {
+		width: 240px;
+	}
+	div {
+		font-family: Roboto, Lato, sans-serif;
+		font-size: 24px;
+		letter-spacing: 0.14px;
+		line-height: 20px;
+		margin-top: 12px;
+	}
+}
+.l-s {
+	list-style: none;
+	margin: 0;
+	padding: 10px 0;
+	li {
+		line-height: 40px;
+
+		border-bottom: 1px solid rgba(204, 204, 204, 0.4);
+		&:first-child {
+			border-top: none;
+		}
+	}
+	a {
+		text-decoration: none;
+		color: #333;
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		padding-left: 20px;
+		box-sizing: border-box;
+	}
+}
+</style>

lib/plugin/cli/site/doc/code.vue

@@ -0,0 +1,52 @@
+<template>
+	<div>
+		<div class="nut-qrcode" id="qrcode">二维码位置</div>
+	</div>
+</template>
+<script>
+import QRCode from './asset/js/code.js';
+export default {
+	name: 'nut-qrcode',
+	props: {
+		QCWidth: {
+			type: Number,
+			default: 160,
+		},
+		QCHeight: {
+			type: Number,
+			default: 160,
+		},
+		content: {
+			type: String,
+			required: true,
+		},
+		fontColor: {
+			type: String,
+			default: '#000',
+		},
+		backColor: {
+			type: String,
+			default: '#fff',
+		},
+	},
+	data() {
+		return {};
+	},
+	mounted() {
+		this.qrcode();
+	},
+	methods: {
+		qrcode() {
+			let qrcode = new QRCode('qrcode', {
+				width: this.QCWidth,
+				height: this.QCHeight, // 高度
+				text: this.content, // 二维码内容
+				colorDark: this.fontColor,
+				colorLight: this.backColor,
+				margin: 0,
+			});
+		},
+	},
+};
+</script>
+<style lang="scss"></style>

lib/plugin/cli/site/doc/compents/backtop/backtop.css

@@ -0,0 +1,29 @@
+/*! NutUI2(2.0.2) - backtop.css, 4d177b46df0af221d246, 2019-01-25T10:47:27+08:00 */
+.nut-backtop {
+  display: none;
+  line-height: 0;
+  position: fixed;
+  cursor: pointer;
+  bottom: 20px;
+  right: 10px;
+  z-index: 1111; }
+  .nut-backtop.show {
+    display: block; }
+  .nut-backtop-main {
+    -webkit-transition: all .2s ease-in-out;
+    transition: all .2s ease-in-out;
+    width: 38px;
+    height: 38px;
+    background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
+    background-size: 20px 20px;
+    border-radius: 50%;
+    border: 2px solid rgba(180, 180, 180, 0.5);
+    box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, 0.1); }
+  .nut-backtop i {
+    color: #fff;
+    font-size: 24px;
+    padding: 8px 12px;
+    line-height: 0; }
+
+
+/*# sourceMappingURL=backtop.css.map*/

lib/plugin/cli/site/doc/compents/backtop/backtop.scss

@@ -0,0 +1,30 @@
+.nut-backtop {
+	display: none;
+	line-height: 0;
+	position: fixed;
+	cursor: pointer;
+	bottom: 20px;
+	right: 10px;
+	z-index: 1111;
+	&.show {
+		display: block;
+	}
+	&-main {
+		transition: all 0.2s ease-in-out;
+		width: 38px;
+		height: 38px;
+		background: #fff
+			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E")
+			no-repeat center;
+		background-size: 20px 20px;
+		border-radius: 50%;
+		border: 2px solid rgba(180, 180, 180, 0.5);
+		box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, 0.1);
+	}
+	i {
+		color: #fff;
+		font-size: 24px;
+		padding: 8px 12px;
+		line-height: 0;
+	}
+}

lib/plugin/cli/site/doc/compents/backtop/backtop.vue

@@ -0,0 +1,113 @@
+<template>
+	<div :class="['nut-backtop', { show: backTop }]" :style="styles" @click="goto">
+		<slot>
+			<div class="nut-backtop-main"></div>
+		</slot>
+	</div>
+</template>
+<script>
+export default {
+	name: 'nut-backtop',
+	props: {
+		distance: {
+			type: Number,
+			default: 200,
+		},
+		bottom: {
+			type: Number,
+			default: 20,
+		},
+		right: {
+			type: Number,
+			default: 10,
+		},
+		duration: {
+			type: Number,
+			default: 1000,
+		},
+		zIndex: {
+			type: Number,
+			default: 1111,
+		},
+	},
+	data() {
+		return {
+			backTop: false,
+		};
+	},
+	mounted() {
+		window.addEventListener('scroll', this.handleScroll, false);
+		window.addEventListener('resize', this.handleScroll, false);
+	},
+	beforeDestroy() {
+		window.removeEventListener('scroll', this.handleScroll, false);
+		window.removeEventListener('resize', this.handleScroll, false);
+	},
+	computed: {
+		styles() {
+			return {
+				bottom: `${this.bottom}px`,
+				right: `${this.right}px`,
+				'z-index': this.zIndex,
+			};
+		},
+	},
+	methods: {
+		handleScroll() {
+			this.backTop = window.pageYOffset >= this.distance;
+		},
+		goto() {
+			const sTop = document.documentElement.scrollTop || document.body.scrollTop;
+			this.scrollTop(window, sTop, 0, this.duration);
+			this.$emit('click');
+		},
+		scrollTop(el, from = 0, to, duration = 500, endCallback) {
+			this.el = el;
+			let lastTime = 0;
+			let vendors = ['webkit', 'moz'];
+			for (let x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+				window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+				window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+			}
+
+			if (!window.requestAnimationFrame) {
+				window.requestAnimationFrame = function (callback, element) {
+					let currTime = new Date().getTime();
+					let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
+					let id = window.setTimeout(function () {
+						callback(currTime + timeToCall);
+					}, timeToCall);
+					lastTime = currTime + timeToCall;
+					return id;
+				};
+			}
+			if (!window.cancelAnimationFrame) {
+				window.cancelAnimationFrame = function (id) {
+					clearTimeout(id);
+				};
+			}
+			const difference = Math.abs(from - to);
+			const step = Math.ceil((difference / duration) * 50);
+
+			this.scroll(from, to, step, endCallback);
+		},
+		scroll(start, end, step, endCallback) {
+			if (start === end) {
+				endCallback && endCallback();
+				return;
+			}
+
+			let d = start + step > end ? end : start + step;
+			if (start > end) {
+				d = start - step < end ? end : start - step;
+			}
+			if (this.el === window) {
+				window.scrollTo(d, d);
+			} else {
+				this.el.scrollTop = d;
+			}
+			window.requestAnimationFrame(() => this.scroll(d, end, step));
+		},
+	},
+};
+</script>

lib/plugin/cli/site/doc/compents/backtop/index.js

@@ -0,0 +1,8 @@
+import BackTop from './backtop.vue';
+import './backtop.scss';
+
+BackTop.install = function(Vue) {
+  Vue.component(BackTop.name, BackTop);
+};
+
+export default BackTop

lib/plugin/cli/site/doc/compents/hidden/hidden.vue

@@ -0,0 +1,113 @@
+<template>
+	<div
+		class="swap"
+		:class="{
+			hasPadding: heightSlot > 400,
+		}"
+	>
+		<div
+			class="eidt-box"
+			:class="{
+				show: isShow,
+				hide: isHide,
+			}"
+		>
+			<slot></slot>
+		</div>
+		<div :title="titleMsg" v-if="heightSlot > 400" class="bar" @click="showall">
+			<svg width="20" viewBox="0,0 20,10">
+				<path
+					v-if="isShow"
+					d="M 0,5 
+                            L10,10 
+                            L 20,5"
+					fill="none"
+					stroke="#000"
+				></path>
+				<path
+					v-if="!isShow"
+					d="M 0,5 
+                            L10,0 
+                            L 20,5"
+					fill="none"
+					stroke="#000"
+				></path>
+			</svg>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			siteHeight: {
+				height: '',
+			},
+			isShow: true,
+			isHide: false,
+			//  盒子高度
+			heightSlot: 0,
+			titleMsg: '点击展开',
+		};
+	},
+	methods: {
+		showall() {
+			this.isShow = !this.isShow;
+			this.isHide = !this.isHide;
+			if (this.isHide) {
+				this.siteHeight = { height: this.heightSlot + 'px' };
+				this.titleMsg = '点击收起';
+			} else {
+				this.siteHeight = {
+					height: '400px',
+				};
+				this.titleMsg = '点击展开';
+			}
+		},
+	},
+	mounted() {
+		this.heightSlot = this.$slots.default[0].elm.offsetHeight;
+		if (this.heightSlot < 400) {
+			this.siteHeight = { height: '' };
+		} else {
+			this.siteHeight = { height: '300px' };
+		}
+	},
+};
+</script>
+<style lang="scss" scoped>
+.eidt-box {
+	transition: all 0.5s;
+}
+.swap {
+	position: relative;
+
+	background: #f2f4f5;
+	margin: 16px 0;
+}
+.hasPadding {
+	padding-bottom: 30px;
+}
+.show {
+	overflow: hidden;
+	position: relative;
+	max-height: 400px;
+}
+.hide {
+	position: relative;
+	max-height: 4000px;
+}
+.bar {
+	height: 30px;
+	width: 100%;
+	bottom: 0;
+	background: linear-gradient(rgba(255, 255, 255, 0), #fafafa);
+	position: absolute;
+	z-index: 1;
+	text-align: center;
+	cursor: pointer;
+	svg {
+		vertical-align: bottom;
+	}
+}
+</style>

lib/plugin/cli/site/doc/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta content="telephone=no" name="format-detection" />
+  <link rel="shortcut icon" href="/favicon.ico">
+  <title>NutUI - 移动端Vue组件库</title>
+  <meta name="description" content="移动端Vue组件库NutUI官网" />
+  <meta name="keywords" content="NutUI,NutUI 2.0,移动端Vue组件库,Vue移动端组件库,Vue组件库,Vue components,JDC,京东用户体验设计部" />
+  <script src="//misc.360buyimg.com/felibs/vue/2.5.16/vue.min.js"></script>
+  <style>
+    a[title=站长统计]{
+      display: none;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="doc">
+
+  </div>
+
+  <script type="text/javascript">
+    var jaq = jaq || [];
+    jaq.push(['account', 'JA2018_1831300']);
+    jaq.push(['domain', 'jd.com']);
+    (function () {
+      var ja = document.createElement('script');
+      ja.type = 'text/javascript';
+      ja.async = true;
+      ja.src = '//wl.jd.com/joya.js';
+      var s = document.getElementsByTagName('script')[0];
+      s.parentNode.insertBefore(ja, s);
+    })()
+  </script>
+  <script type="text/javascript" src="https://s23.cnzz.com/z_stat.php?id=1276268086&web_id=1276268086"></script>
+</body>
+
+</html>

lib/plugin/cli/site/doc/info.vue

@@ -0,0 +1,280 @@
+<template>
+	<div class="main-menu lt-nv">
+		<div class="left-nav-fixed">
+			<ol class="nav-l-1">
+				<dt>指南</dt>
+				<dd :class="curName == 'intr' ? 'l-1 curs' : 'l-1'">
+					<a href="#/intro">介绍</a>
+				</dd>
+				<dd :class="curName == 'fastStart' ? 'l-1 curs' : 'l-1'">
+					<a href="#/start">快速上手</a>
+				</dd>
+				<dd :class="curName == 'theme' ? 'l-1 curs' : 'l-1'">
+					<a href="#/theme">主题定制</a>
+				</dd>
+				<dd :class="curName == 'international' ? 'l-1 curs' : 'l-1'">
+					<a href="#/international">国际化</a>
+				</dd>
+				<dd :class="curName == 'update' ? 'l-1 curs' : 'l-1'">
+					<a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
+				</dd>
+			</ol>
+			<ol class="cplist">
+				<dt>组件</dt>
+				<dd
+					class="l-1"
+					@click="selectNav(nameObj.name)"
+					:class="cur.indexOf(nameObj.name) > -1 && 'cur'"
+					v-for="(nameObj, index) in sortedPackages"
+					:key="index"
+				>
+					<div class="l-c-i">
+						<span>{{ nameObj.name }}</span>
+						<i class="pt"></i>
+					</div>
+					<ul class="l-2" v-if="cur.indexOf(nameObj.name) > -1">
+						<template v-for="cpt in nameObj.ary">
+							<li v-on:click.stop="listCheck(cpt)" :class="curName == cpt.name ? 'curs' : ''" :key="cpt.name" v-if="cpt.showDemo">
+								<router-link :to="{ name: cpt.name }">
+									{{ cpt.name }}
+									<span>{{ cpt.chnName }}</span>
+								</router-link>
+							</li>
+						</template>
+					</ul>
+				</dd>
+			</ol>
+		</div>
+	</div>
+</template>
+<script>
+import { sorts, packages } from '@/config.json';
+import { version } from '@/../package.json';
+export default {
+	name: 'index',
+	data() {
+		return {
+			path: '',
+			packages: {},
+			sortedPackages: [],
+			cur: [],
+			curName: '',
+			version: version,
+		};
+	},
+
+	watch: {
+		packages() {
+			// const compare = (obj1, obj2) => {
+			//   const val1 = obj1.name;
+			//   const val2 = obj2.name;
+			//   if (val1 < val2) {
+			//     return -1;
+			//   } else if (val1 > val2) {
+			//     return 1;
+			//   } else {
+			//     return 0;
+			//   }
+			// };
+			let that = this;
+			let tempAry = [];
+			let temp = {};
+			let sorts = this.sorts;
+			let sortArys = [...this.packages];
+			sortArys.map((item) => {
+				let name = sorts[item.sort];
+				if (!temp[name]) {
+					temp[name] = [];
+				}
+				temp[name].push(item);
+			});
+			for (let key in temp) {
+				tempAry.push({
+					name: key,
+					ary: temp[key],
+				});
+			}
+			let routeName = this.$route.name;
+			this.sortedPackages = tempAry;
+			tempAry.map((list) => {
+				let showParentNode = false;
+				list.ary.map((ary) => {
+					if (ary.name == routeName) {
+						showParentNode = true;
+					}
+				});
+				if (showParentNode) {
+					that.cur.push(list.name);
+				}
+			});
+		},
+		$route: 'fetchData',
+	},
+	methods: {
+		fetchData(obj) {
+			let that = this;
+			this.curName = obj.name;
+			let sortedPackages = this.sortedPackages;
+
+			this.selectNav(obj.name);
+		},
+		listCheck(obj) {
+			// this.curName = obj.name;
+		},
+		selectNav(val) {
+			let nowCur = this.cur;
+			let index = nowCur.indexOf(val);
+			if (index > -1) {
+				nowCur.splice(index, 1);
+			} else {
+				nowCur.push(val);
+			}
+			this.cur = nowCur;
+		},
+	},
+	created() {
+		let nameRt = this.$route.name;
+		let packgs = packages;
+
+		this.cur = sorts;
+		this.curName = nameRt;
+		this.packages = packgs;
+		this.sorts = sorts;
+	},
+};
+</script>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: all 1s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+	opacity: 0;
+	height: 0;
+}
+ul,
+ol {
+	margin: 0;
+	list-style: none;
+	padding: 0;
+}
+
+dt {
+	font-size: 16px;
+	font-weight: 500;
+	text-indent: 35px;
+	color: #5b657b;
+	margin: 10px 0;
+}
+
+dd {
+	margin: 0;
+	& > a {
+		display: block;
+		height: 100%;
+		cursor: pointer;
+	}
+}
+.cplist {
+	padding-bottom: 20px;
+}
+.left-nav-fixed {
+	margin-top: 115px;
+}
+.lt-nv {
+	font-size: 14px;
+	width: 295px;
+	border-right: 1px solid #d8d8d8;
+	a,
+	span {
+		text-decoration: none;
+		color: #666666;
+	}
+	.curs {
+		border-right: 4px solid #5396ff;
+		color: #5396ff;
+		background: rgba(83, 150, 255, 0.14);
+		a,
+		span {
+			color: #5396ff;
+		}
+	}
+	.pt {
+		width: 0;
+		height: 0;
+		vertical-align: middle;
+		border-width: 5px 5px 0;
+		border-style: solid;
+		border-color: #333 transparent transparent;
+		transform: rotate(-90deg);
+	}
+	.l-1 {
+		line-height: 40px;
+		a {
+			padding: 0 0 0 35px;
+		}
+	}
+	.l-c {
+		a {
+			padding: 0 0 0 35px;
+		}
+	}
+	.l-c-i {
+		cursor: pointer;
+		position: relative;
+		span {
+			padding: 0 0 0 35px;
+		}
+		.pt {
+			float: right;
+			margin: 20px 20px 0 0;
+		}
+	}
+	.l-2 {
+		overflow: hidden;
+		a {
+			font-size: 14px;
+			padding: 0 0 0 50px;
+			span {
+				font-size: 12px;
+				padding: 0 0 0 8px;
+			}
+		}
+	}
+	.cur {
+		.pt {
+			transition: all 0.5s;
+			transform: rotate(0deg);
+		}
+	}
+	.l-2 {
+		a {
+			display: inline-block;
+			box-sizing: border-box;
+			width: 100%;
+			border-right: 1px solid #fff;
+		}
+		li:hover {
+			transition: all 0.5;
+			background: rgba(83, 150, 255, 0.14);
+			border-right: 4px solid #5396ff;
+			color: #5396ff;
+			a,
+			span {
+				color: #5396ff;
+			}
+		}
+	}
+	.nav-l-1 {
+		dd:hover {
+			transition: all 0.5;
+			background: rgba(83, 150, 255, 0.14);
+			border-right: 4px solid #5396ff;
+			a,
+			span {
+				color: #5396ff;
+			}
+		}
+	}
+}
+</style>

lib/plugin/cli/site/doc/root.js

@@ -0,0 +1,68 @@
+import hide from './compents/hidden/hidden.vue';
+import vb from './asset/js/isVisibiliy.js';
+const myMixin ={
+    data(){
+        return {
+          content:'',
+          codeurl:'',
+          demourl:'',
+          levalcur:1
+        }
+      },
+    components:{
+        hide
+    },
+    methods:{
+        leavelchose(index){
+          this.levalcur = index;
+        },
+        closelayer(){
+          this.content = '';
+        },
+        toast(e){
+          const options = {
+            noHeader:true,
+            noFooter:true,
+            content:e.target.parentElement.outerHTML
+          }        
+          this.content = options.content;
+          let copy = this.copy;
+          new copy('.copy',{
+              target:res => {         
+                return res.previousElementSibling
+              }
+          });   
+        },  
+        dsCode(e){
+            let tag = e.target;
+            if(tag.attributes.toast){
+                this.toast(e)  
+            }      
+        }
+  },
+  mounted(){  
+    let visb = vb('.visibility');
+    visb.then(res=>{
+      let id  = res.target.id;
+      let index =Number(id.replace(/head/,''));       
+      if(index>0){
+        this.levalcur = index
+      }
+    })
+    this.$nextTick(()=>{
+        let copy = this.copy;
+        new copy('.copy',{
+            target:res => {         
+            return res.previousElementSibling
+            }
+        });    
+        let demourl = 'https://nutui.jd.com/demo.html#'+this.$route.path;
+        this.demourl = demourl;
+        this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
+            this.codeurl = url
+        });
+    });
+  }
+}
+
+export default myMixin;

lib/plugin/cli/site/doc/router.js

@@ -0,0 +1,121 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { packages } from '@/config.json';
+import vueg from 'vueg';
+
+import frontCover from './index.vue';
+ 
+ const Index = () => import(/* webpackPrefetch: true */ /* webpackChunkName: 'info' */'./info.vue');
+ const Intro = () => import(/* webpackPrefetch: true */ /* webpackChunkName: 'intro' */'./page/intro.vue');
+ const Start = () => import(/* webpackPrefetch: true */ /* webpackChunkName: 'start' */'./page/start.vue');
+ const International = () => import(/* webpackPrefetch: true */ /* webpackChunkName: 'international' */'./page/international.vue');
+ const Theme = () => import(/* webpackPrefetch: true */ /* webpackChunkName: 'theme' */'./page/theme.vue');
+ const JoinUs = () => import(/* webpackPrefetch: true */ /* webpackChunkName: 'joinus' */'./page/joinus.vue');
+ //const Update = () => import('./page/changelog.vue');
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: '*',
+    redirect: '/index'
+  },
+  {
+    path: '/',
+    redirect: '/index'
+  },
+  {
+    path:'/index',
+    name:'frontcover',
+    component:frontCover
+    
+  },
+  {    
+    path: '/intro',
+    name:'intr',
+    components: {
+      default: Index,
+      main: Intro,     
+    }
+  },
+  {    
+    path: '/international',
+    name:'international',
+    components: {
+      default: Index,
+      main: International,     
+    }
+  },
+  {    
+    path: '/start',
+    name:'start',
+    components: {
+      default: Index,
+      main: Start,     
+    }
+  },
+  {    
+    path: '/theme',
+    name:'theme',
+    components: {
+      default: Index,
+      main: Theme,     
+    }
+  },
+  {
+    path: '/joinus',
+    name: 'joinus',
+    components: {
+      default: Index,
+      main: JoinUs,
+    }
+  }
+];
+//组件md文件展示
+packages.map(item => {
+  if (item.showDemo === false) return;
+  const pkgName =  item.name.toLowerCase();
+  routes.push({
+    path: '/' + item.name,
+    components: {      
+      default: Index,
+      main: () => import(
+        /* webpackPrefetch: true */
+        /* webpackChunkName: "doc-[request]" */`./view/${pkgName}.vue`)
+    },
+    name: item.name
+  });
+});
+
+const router = new VueRouter({
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (to.path == '/index') {
+      return null;
+    } else {
+      return { x: 0, y: 0 }
+    }
+  }
+});
+
+
+
+
+
+const options = {
+  duration: '0.3', //转场动画时长，默认为0.3，单位秒
+  firstEntryDisable: false, //值为true时禁用首次进入应用时的渐现动画，默认为false
+  firstEntryDuration: '.4', //首次进入应用时的渐现动画时长，默认为.6
+  forwardAnim: 'fadeInRight', //前进动画，默认为fadeInRight
+  backAnim: 'fadeInLeft', //后退动画，默认为fedeInLeft
+  sameDepthDisable: false, //url深度相同时禁用动画，默认为false
+  tabs: [], //默认为[]，'name'对应路由的name,以实现类似app中点击tab页面水平转场效果，如tabs[1]到tabs[0]    ，会使用backAnim动画，tabs[1]到tabs[2]，会使用forwardAnim动画
+  tabsDisable: false, //值为true时，tabs间的转场没有动画，默认为false
+  shadow: false, //值为false，转场时没有阴影的层次效果
+  disable: false, //禁用转场动画，默认为false，嵌套路由默认为true
+  nuxt: false //若使用后端渲染框架Nuxt，需要将此设为true，默认为false
+};
+
+Vue.use(vueg, router, options);
+
+export default router;

lib/plugin/cli/site/doc/search.vue

@@ -0,0 +1,149 @@
+<template>
+	<div class="search-box">
+		<input @focus="onfocus" @keyup="choseList" v-model="searchVal" class="search" type="text" placeholder="搜索组件..." />
+		<!-- <transition name="fade"> -->
+		<ul class="search-list" v-if="searchList.length > 0">
+			<li :class="searchCurName == item.name ? 'cur' : ''" @click="checklist(item)" v-for="(item, index) in searchList" :key="index">
+				<router-link :to="{ name: item.name }">
+					{{ item.name }}
+					<span>{{ item.chnName }}</span>
+				</router-link>
+			</li>
+		</ul>
+		<!-- </transition> -->
+	</div>
+</template>
+<script>
+import { packages } from '@/config.json';
+export default {
+	data() {
+		return {
+			packages,
+			searchVal: '',
+			searchList: [],
+			searchCurName: '',
+			searchIndex: 0,
+		};
+	},
+	watch: {
+		searchVal(sVal) {
+			if (sVal) {
+				this.searchList = this.packages.filter((item) => {
+					if (item.showDemo === false) return false;
+					const rx = new RegExp(sVal, 'gi');
+					return rx.test(item.name + ' ' + item.chnName + '' + item.desc);
+				});
+			} else {
+				this.searchCurName = '';
+				this.searchIndex = 0;
+				this.searchList = [];
+			}
+		},
+	},
+	mounted() {
+		document.documentElement.addEventListener('click', this.closelist);
+	},
+	methods: {
+		closelist() {
+			this.searchVal = '';
+			this.searchCurName = '';
+			this.searchIndex = 0;
+		},
+		onfocus(e) {
+			e.target.select();
+		},
+		checklist() {
+			this.searchVal = '';
+			this.searchCurName = '';
+			this.searchIndex = 0;
+		},
+		choseList(e) {
+			let searchIndex = this.searchIndex;
+			if (e.keyCode == 40) {
+				searchIndex++;
+			}
+			if (e.keyCode == 38) {
+				searchIndex--;
+			}
+			if (searchIndex < 0) {
+				searchIndex = 0;
+			}
+			let searchList = this.searchList;
+			if (searchList.length > 0) {
+				let chnName = searchList[searchIndex] && searchList[searchIndex].name;
+
+				if (chnName) {
+					this.searchCurName = chnName;
+					this.searchIndex = searchIndex;
+					if (e.keyCode == 13) {
+						this.$router.push({
+							path: '/' + searchList[searchIndex].name,
+						});
+						this.searchCurName = '';
+						this.searchIndex = 0;
+						this.searchVal = '';
+					}
+				}
+			}
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.search-box {
+	height: 22px;
+	min-width: 300px;
+	position: relative;
+	input {
+		width: 100%;
+	}
+}
+.search {
+	height: 22px;
+	font-size: 14px;
+	color: #666;
+	border: none;
+	background: url(./asset/css/i/sreach.png) no-repeat left center;
+	padding-left: 45px;
+	&:focus {
+		outline: none;
+	}
+}
+.search-list {
+	background: #fff;
+	position: absolute;
+	width: 300px;
+	list-style: none;
+	border: 1px solid #f2f2f2;
+	z-index: 99999;
+	top: 27px;
+	padding: 0;
+	li {
+		height: 40px;
+		line-height: 40px;
+		font-size: 12px;
+		a {
+			display: inline-block;
+			box-sizing: border-box;
+			width: 100%;
+			padding-left: 40px;
+			text-decoration: none;
+			color: #666;
+		}
+		&:hover {
+			background: #6096ff;
+			color: #fff;
+			a {
+				color: #fff;
+			}
+		}
+	}
+	.cur {
+		background: #6096ff;
+		color: #fff;
+		a {
+			color: #fff;
+		}
+	}
+}
+</style>

lib/plugin/cli/src/bin/index.ts

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+import { setNodeEnv } from '../util';
+process.argv[2] === 'dev' ? setNodeEnv('development') : setNodeEnv('production');
+import program from 'commander';
+import { dev } from '../commands/dev';
+import { build } from '../commands/build';
+import { lint } from '../commands/lint';
+import { buildSite } from '../commands/build-site';
+import { clean } from '../commands/clean';
+import { createComponent } from '../commands/createComponent';
+import { commitLint } from '../commands/commitLint';
+import { test } from '../commands/test';
+import { release } from '../commands/npmPublish';
+import { ROOT_CLI_PATH } from '../util/dic';
+
+const config = require(ROOT_CLI_PATH('package.json'));
+program.version(`@nutui/cli ${config.version}`, '-v', '--version');
+
+program.command('dev').description('本地调试运行官网和Demo示例').action(dev);
+
+program.command('build').description('构建完整版nutui和各个组件可发布到npm的静态资源包').action(build);
+
+program.command('build-site').description('构建官网和Demo示例，进行官网发布').action(buildSite);
+
+program.command('clean').description('清空打包目录').action(clean);
+
+program.command('add').description('新增组件使用该命令').action(createComponent);
+
+program.command('commit-lint').description('获取校验commit message 的配置文件').action(commitLint);
+
+program.command('test').description('运行单元测试').action(test);
+
+program.command('lint').description('运行stylelint和eslint').action(lint);
+
+program.command('release').description('发布版本...待开发').action(release);
+
+program.parse(process.argv);

lib/plugin/cli/src/commands/build-site.ts

@@ -0,0 +1,8 @@
+import { emptyDir } from 'fs-extra';
+import { compileSite } from '../compiler/site';
+import { DIST_DIR } from '../util/dic';
+export async function buildSite() {
+	await emptyDir(DIST_DIR);
+	await compileSite(true);
+	process.exit();
+}

lib/plugin/cli/src/commands/build.ts

@@ -0,0 +1,19 @@
+import { emptyDir } from 'fs-extra';
+import { compilePackage } from '../compiler/package';
+import { DIST_DIR } from '../util/dic';
+import logger from '../util/logger';
+import { compilePackageDisperse } from '../compiler/package.disperse';
+export async function build() {
+	try {
+		await emptyDir(DIST_DIR);
+		await compilePackage(false);
+		logger.success(`build compilePackage false package success!`);
+		await compilePackage(true);
+		logger.success(`build compilePackage true package success!`);
+		await compilePackageDisperse();
+		logger.success(`build compilePackageDisperse package success!`);
+		process.exit();
+	} catch (error) {
+		logger.error(error);
+	}
+}

lib/plugin/cli/src/commands/clean.ts

@@ -0,0 +1,11 @@
+import { emptyDir } from 'fs-extra';
+import { DIST_DIR, CACHE_DIR } from '../util/dic';
+import logger from '../util/logger';
+
+export async function clean() {
+	await emptyDir(DIST_DIR);
+	logger.success(`clean ${DIST_DIR} success!`);
+	await emptyDir(CACHE_DIR);
+	logger.success(`clean ${CACHE_DIR} success!`);
+	process.exit();
+}

lib/plugin/cli/src/commands/commitLint.ts

@@ -0,0 +1 @@
+export async function commitLint() {}

lib/plugin/cli/src/commands/createComponent.ts

@@ -0,0 +1,4 @@
+import init from '../script/createCptTpl';
+export async function createComponent() {
+	await init();
+}

lib/plugin/cli/src/commands/dev.ts

@@ -0,0 +1,4 @@
+import { compileSite } from '../compiler/site';
+export async function dev() {
+	await compileSite();
+}