element-dse-ui v1.0.2

基本使用

• 装包

npm run bootstrap

• 运行官网

npm run dev

• 运行普通示例

npm run dev:play

• 打包

npm run dist

package.json解读

{
  // 装包
  "bootstrap": "yarn || npm i",
  // 通过JS脚本，自动生成以下文件：生成 examples/icon.json 文件 && 生成 src/index.js 文件 && 生成四种语言的官网的 .vue 文件 && 生成 examples/version.json 文件，包含了组件库的版本信息
  "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
  // 构建主题样式：在 index.scss 中自动引入各个组件的样式文件 && 通过 gulp 将 scss 文件编译成 css 并输出到 lib 目录 && 拷贝基础样式 theme-chalk 到 lib/theme-chalk
  "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
  // 通过 babel 编译 src 目录，然后将编译后的文件输出到 lib 目录，忽略 /src/index.js
  "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
  // 将 ES Module 风格的翻译文件编译成 UMD 风格
  "build:umd": "node build/bin/build-locale.js",
  // 清除构建产物
  "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
  // 构建官网项目
  "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-dse-ui/CNAME",
  // 构建主题插件
  "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
  // 启动主题插件的开发环境
  "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
  // 启动组件库的本地开发环境。执行 build:file，自动化生成一些文件 && 启动 example 项目，即官网 && 监听 examples/pages/template 目录下所有模版文件的变化，如果改变了则重新生成 .vue",
  "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
  // 组件测试项目，在 examples/play/index.vue 中可以引入组件库任意组件，也可以直接使用 dev 启动的项目，在文档中使用组件
  "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
  // 构建组件库
  "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
  // 生成四种语言的官网的 .vue 文件
  "i18n": "node build/bin/i18n.js",
  // lint，保证项目代码质量
  "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
  // 装包 && 合并远程仓库的 dev 分支 && 合并 dev 分支到 master、打包编译、修改样式包和组件库的版本号、发布样式包和组件库、提交代码到远程仓库。使用时注掉最后一个脚本，那个脚本有问题
  "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",
  // 生成测试报告，不论是 test 还是 test:watch，生成一次测试报告耗时太长了
  "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  // 启动测试项目，可以检测测试文件的更新
  "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
}

ElementUI 源码解读

详细讲解了 ElementUI 源码架构

• 配套文章：

  • 掘金
  • 微信公众号

• 配套视频：

  • B 站

框架依赖

https://github.com/sass/node-sass/releases/tag/v4.14.1

很多人在本地跑 ElementUI 项目会报 node-sass 相关的错误，这里会涉及一个 node 版本兼容性的问题，我这边用的是 node@14