NutUI简介

NutUI 是京东出的vue的移动UI库，组件相对完善。这次提到 NutUI 是因为它的3.0 改用vite来构建了，vite站未来，今天就来看看NutUI 做了啥。

注意： 截止2021-3-18，NutUI 3.0还未正式发布，随着时间发展，部分细节可能会发生变化。

国内源 https://gitee.com/nutui/nutui/tree/next/ 克隆——安装依赖——打开编辑器。

删除：

  • .github 无关的github流程文件夹

其他的基本都有点用了。

image.png
目录结构直观明了

打开 package.json 看依赖

  1. {
  2.   "dependencies": {
  3.     "axios": "^0.21.0", // 网路请求
  4.     "gsap": "^3.6.0", // 好像是搞动画的
  5.     "sass": "^1.32.8", // 预编译
  6.     "vue": "^3.0.5", // core
  7.     "vue-router": "^4.0.4" // router
  8.   },
  9.   "devDependencies": {
  10.     "@commitlint/cli": "^10.0.0", // git commit 规范
  11.     "@commitlint/config-conventional": "^10.0.0", // git commit 规范
  12.     "@types/node": "^14.14.31", // node 类型
  13.     "@vitejs/plugin-vue": "^1.1.5", // vite-vue3插件
  14.     "@vue/compiler-sfc": "^3.0.5", // vue单文件编译
  15.     "@vue/eslint-config-prettier": "^6.0.0", // 代码风格
  16.     "@vue/eslint-config-typescript": "^5.0.2", // 代码风格
  17.     "eslint": "^6.7.2", // 代码风格
  18.     "eslint-plugin-prettier": "^3.1.3", // 代码风格
  19.     "eslint-plugin-vue": "^7.0.0-0", // 代码风格
  20.     "front-matter": "^4.0.2", // 解析md的meta
  21.     "highlight.js": "^10.3.1",
  22.     "husky": "^4.3.0", // git 流程
  23.     "lint-staged": "^10.5.0", // git 流程
  24.     "prettier": "^1.19.1", // 代码风格
  25.     "transliteration": "^2.2.0", // 翻译变英文、拼音
  26.     "typescript": "^4.1.5", // ts
  27.     "vite": "^2.1.1", // core
  28.     "vite-plugin-md": "^0.6.1" // markdown插件
  29.   }
  30. }

基本没有超纲，特别简单。

看一下 script 脚本，

  1. {
  2.   "scripts": {
  3.     "checked": "npm run generate:file && tsc", // 导出包并检查
  4.     "dev": "npm run checked && vite --open", // 导出包、启动网站
  5.     "build:site": "npm run checked && vite build", // 导出包、构建
  6.     "build:gh-pages": "npm run checked && vite build --base=/nutui/",
  7.     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
  8.     "build": "npm run checked && vite build --config vite.config.build.ts && npm run generate:types",
  9.     "build:disperse": "vite build --config vite.config.build.disperse.ts",
  10.     "serve": "vite preview",
  11.     "upload": "yarn build:site:oss && node ./jd/upload.js",
  12.     "add": "node jd/createComponentMode.js", // 创建组件
  13.     "publish:beta": "npm publish --tag=beta",
  14.     "generate:file": "node jd/generate-nutui.js", // 一键生成组件插件 可以跑一下没有副作用
  15.     "generate:types": "node jd/generate-types.js"
  16.   }
  17. }

也意外的简单。走 yarn dev 启动的是 vite，走的 vite.config.ts 配置

配置页特别简单，忽略 build 即可。进入 index.html — src/sites/doc/main.ts

万事不决就 button ，先看 button 组件。