Browse Source

docs: nutui-jdl

richard1015 5 years ago
parent
commit
7a3e1ee0b2
5 changed files with 40 additions and 42 deletions
  1. 8 8
      docs/international.md
  2. 5 5
      docs/intro.md
  3. 19 21
      docs/start.md
  4. 7 7
      docs/theme.md
  5. 1 1
      package.json

+ 8 - 8
docs/international.md

@@ -8,9 +8,9 @@ NutUI 2.0 以上版本支持多语言。组件默认使用中文,支持加载
 
 ```javascript
 import Vue from 'vue';
-import NutUI from '@nutui/nutui';
+import NutUI from '@nutui/nutui-jdl';
 
-import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+import enUS from '@nutui/nutui-jdl/dist/locales/lang/en-US';
 
 Vue.use(NutUI, {
   locale: 'en-US',
@@ -24,9 +24,9 @@ Vue.use(NutUI, {
 
 ```javascript
 import Vue from 'vue';
-import {locale} from '@nutui/nutui';
+import {locale} from '@nutui/nutui-jdl';
 
-import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+import enUS from '@nutui/nutui-jdl/dist/locales/lang/en-US';
 
 locale('en-US', enUS);
 ```
@@ -48,7 +48,7 @@ locale('en-US', enUS);
 
 ```javascript
 import VueI18n from 'vue-i18n';
-import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+import enUS from '@nutui/nutui-jdl/dist/locales/lang/en-US';
 
 Vue.use(VueI18n);
 
@@ -74,7 +74,7 @@ const app = new Vue({
 
 ```javascript
 import Vue from 'vue';
-import {i18n} from '@nutui/nutui';
+import {i18n} from '@nutui/nutui-jdl';
 
 Vue.mixin({
     methods: {
@@ -94,8 +94,8 @@ Vue.mixin({
 
 ```javascript
 import Vue from 'vue';
-import {locale} from '@nutui/nutui';
-import enUS from '@nutui/nutui/dist/locales/lang/en-US';
+import {locale} from '@nutui/nutui-jdl';
+import enUS from '@nutui/nutui-jdl/dist/locales/lang/en-US';
 import myEnUS from './path/to/lang/en-US';
 
 Object.assign(enUS, myEnUS);

+ 5 - 5
docs/intro.md

@@ -1,6 +1,6 @@
-# NutUI
+# NutUI-JDL
 
-NutUI是一套京东风格的移动端组件库,开发和服务于移动Web界面的企业级前中后台产品。
+NutUI-JDL是一套京东物流风格的移动端组件库,开发和服务于移动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">
@@ -16,7 +16,7 @@ NutUI是一套京东风格的移动端组件库,开发和服务于移动Web界
 
 * 50+ 高质量组件
 * 40+ 京东移动端项目正在使用
-* 基于京东APP 7.0 视觉规范
+* 基于京东物流视觉规范
 * 支持按需加载
 * 详尽的文档和示例
 * 支持定制主题
@@ -28,7 +28,7 @@ NutUI是一套京东风格的移动端组件库,开发和服务于移动Web界
 
 ## 示例
 
-![NutUI Demo](https://img14.360buyimg.com/uba/s260x260_jfs/t1/32118/11/559/2782/5c3d81ecEbda0c0f1/5f2b637d11817204.png)
+![NutUI Demo](https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png)
 
 ## 支持环境
 
@@ -43,7 +43,7 @@ NutUI是一套京东风格的移动端组件库,开发和服务于移动Web界
 
 > AMD 环境、Webpack 等构建工具环境、服务端建议使用 UMD 版,非模块化环境(如通过 `<script>` 标签直接引用)建议使用 UMD 压缩版。
 
-最新稳定版:![npm](https://img.shields.io/npm/v/@nutui/nutui.svg)
+最新稳定版:![npm](https://img.shields.io/npm/v/@nutui/nutui-jdl.svg)
 
 > 你还可以订阅: https://github.com/jdf2e/nutui/releases.atom 来获得稳定版发布的通知。
 

+ 19 - 21
docs/start.md

@@ -10,17 +10,15 @@
 
 #### NPM
 ```bash
-npm i @nutui/nutui -S
+npm i @nutui/nutui-jdl -S
 ```
 
 #### YARN
 ```bash
-yarn add @nutui/nutui
+yarn add @nutui/nutui-jdl
 ```
 > 如果你的网络环境不佳,不妨试试国内的npm镜像
 
-> 默认安装最新版,如需使用 1.x 版本,请指定版本号,如:  `npm i @nutui/nutui@1.3.2 -S`
-
 * 页面直接引用
 
 在页面中使用 script 和 link 标签直接引入文件,**NutUI** 将会自动注册。我们在 npm 发布包内的 dist 目录下提供了 **nutui.js** **nutui.css** 以及 **nutui.min.js** **nutui.min.css**。
@@ -30,21 +28,21 @@ yarn add @nutui/nutui
 ```html 开发环境版本,包含了有帮助的命令行警告
 <!-- 开发环境版本,包含了有帮助的命令行警告 -->
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/nutui.css">
 <!-- 引入Vue -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- 引入组件库 -->
-<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/nutui.js"></script>
 ```
 或者
 ```html
 <!-- 生产环境版本,优化了尺寸和速度 -->
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/nutui.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@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>
+<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/nutui.min.js"></script>
 ```
 
 CDN 引入示例
@@ -56,7 +54,7 @@ CDN 引入示例
     <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">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/nutui.min.css">
 </head>
 <body>
     <div id="app">
@@ -68,7 +66,7 @@ CDN 引入示例
     <!-- 引入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 src="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/nutui.min.js"></script>
     <script>
         new Vue({
             el: '#app',
@@ -105,12 +103,12 @@ CDN 按需加载引入示例
     <!-- 引入样式 -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/packages/button/button.css"
+      href="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/packages/button/button.css"
     />
     <!-- 引入Vue -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <!-- 引入组件库 -->
-    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@latest/dist/packages/button/button.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui-jdl@latest/dist/packages/button/button.js"></script>
     <script>
       Vue.component(button.default.name, button.default);
       new Vue({
@@ -125,14 +123,14 @@ CDN 按需加载引入示例
 
 * 通过 **Vue CLI** 图形化界面安装
 
-如果你的项目是使用 [Vue CLI](https://cli.vuejs.org/zh/) 脚手架搭建,那么你还可以通过 **Vue CLI** 提供的图形化界面安装 **NutUI** :在图形化界面的 **依赖** 界面,点击右上角 **安装依赖** 按钮,搜索 **@nutui/nutui** 安装即可。
+如果你的项目是使用 [Vue CLI](https://cli.vuejs.org/zh/) 脚手架搭建,那么你还可以通过 **Vue CLI** 提供的图形化界面安装 **NutUI** :在图形化界面的 **依赖** 界面,点击右上角 **安装依赖** 按钮,搜索 **@nutui/nutui-jdl** 安装即可。
 
 ## 加载示例
 
 ```javascript
 import Vue from 'vue';
-import NutUI from '@nutui/nutui';
-import '@nutui/nutui/dist/nutui.css';
+import NutUI from '@nutui/nutui-jdl';
+import '@nutui/nutui-jdl/dist/nutui.css';
 
 NutUI.install(Vue);
 ```
@@ -168,7 +166,7 @@ npm i @nutui/babel-plugin-separate-import -D
 
 ```javascript
 import Vue from 'vue';
-import { Dialog,Picker } from '@nutui/nutui';
+import { Dialog,Picker } from '@nutui/nutui-jdl';
 
 Dialog.install(Vue);
 Picker.install(Vue);
@@ -179,7 +177,7 @@ Picker.install(Vue);
 {
     loader: 'sass-loader',
     options: {
-        data: `@import "@nutui/nutui/dist/styles/index.scss"; `
+        data: `@import "@nutui/nutui-jdl/dist/styles/index.scss"; `
     }
 }
 ```
@@ -196,7 +194,7 @@ module.exports = {
                 // 注意:在 sass-loader v7 中,这个选项名是 "data"
                 prependData: ` 
                 @import "@/assets/custom_theme.scss";
-                @import "@nutui/nutui/dist/styles/index.scss";
+                @import "@nutui/nutui-jdl/dist/styles/index.scss";
                 `,
             }
         },
@@ -210,10 +208,10 @@ module.exports = {
 
 ```javascript
 import Vue from 'vue';
-import Button from '@nutui/nutui/dist/packages/button/button.js';  // 加载构建后的JS
-import '@nutui/nutui/dist/packages/button/button.css';  //加载构建后的CSS
+import Button from '@nutui/nutui-jdl/dist/packages/button/button.js';  // 加载构建后的JS
+import '@nutui/nutui-jdl/dist/packages/button/button.css';  //加载构建后的CSS
 //主题定制等场景需要加载SCSS,而不是构建后的CSS
-//import '@nutui/nutui/dist/packages/button/button.scss'; 
+//import '@nutui/nutui-jdl/dist/packages/button/button.scss'; 
 
 Button.install(Vue);
 ```

+ 7 - 7
docs/theme.md

@@ -42,7 +42,7 @@ $dark-color: #DADADA;
         {
             loader: 'sass-loader',
             options: {
-                data: `@import "./asset/css/custom.scss"; @import "@nutui/nutui/dist/styles/index.scss"; `,
+                data: `@import "./asset/css/custom.scss"; @import "@nutui/nutui-jdl/dist/styles/index.scss"; `,
             }
         }
     ]
@@ -61,7 +61,7 @@ module.exports = {
                 // 注意:在 sass-loader v7 中,这个选项名是 "data"
                 prependData: ` 
                 @import "@/assets/custom_theme.scss";
-                @import "@nutui/nutui/dist/styles/index.scss";
+                @import "@nutui/nutui-jdl/dist/styles/index.scss";
                 `,
             }
         },
@@ -76,15 +76,15 @@ module.exports = {
 1.引用完整组件库时,需要引入 **nutui.scss** 文件
 
 ```javascript
-import NutUI from '@nutui/nutui';
-import '@nutui/nutui/dist/nutui.scss';
+import NutUI from '@nutui/nutui-jdl';
+import '@nutui/nutui-jdl/dist/nutui.scss';
 ```
 
 2.未使用插件,手动按需引用组件时,需手动引入组件对应的 SCSS 文件。
 
 ```javascript
-import Button from '@nutui/nutui/dist/packages/button/button.js';
-import '@nutui/nutui/dist/packages/button/button.scss';
+import Button from '@nutui/nutui-jdl/dist/packages/button/button.js';
+import '@nutui/nutui-jdl/dist/packages/button/button.scss';
 ```
 
 3.使用了插件 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 进行按需引用时,需修改babel的配置文件(如.babelrc),将 **style** 的设置为 **scss**。该插件将会自动引入指定组件对应的 SCSS 文件。
@@ -93,7 +93,7 @@ import '@nutui/nutui/dist/packages/button/button.scss';
 {
   "plugins": [
     ["@nutui/babel-plugin-separate-import", {
-        "libraryName": "@nutui/nutui",
+        "libraryName": "@nutui/nutui-jdl",
         "libraryDirectory": "dist/packages",
         "style": "scss"
     }]

+ 1 - 1
package.json

@@ -77,7 +77,7 @@
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@nutui/cli": "^0.3.3",
+    "@nutui/cli": "^0.3.4",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",