实践场景(在老的项目添加cube-ui)

  1. 查看vue-cli版本
  npm info vue-cli // version: '2.9.6',
  1. 添加cube-ui依赖
  npm install cube-ui -S
  1. 修改 package.json 并安装依赖
  // package.json
{
// webpack-transform-modules-plugin 依赖 transformModules
"transformModules": {
"cube-ui": {
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true,
"style": {
"ignore": ["create-api", "better-scroll","locale"]
} // style的可选值 style index
}
},
"devDependencies": {
// 新增 stylus 相关依赖
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"webpack-transform-modules-plugin": "^0.4.3"
}
} //.babelrc transformModules 另一种修改方案
["transform-modules", {"cube-ui": {
"transform": "cube-ui/lib/${member}",
"kebabCase": true,
"style": { // style的可选值 style index
"ignore": ["create-api", "better-scroll","locale"]
}
}
}
]
  1. 修改 webpack 配置
    // webpack.base.conf.js
const TransformModulesPlugin = require('webpack-transform-modules-plugin')
// ...
plugins: [
// ...
new TransformModulesPlugin()
]
  1. 按需加载
  import {
/* eslint-disable no-unused-vars */
Style, // Style 导入即可
DatePicker } from 'cube-ui'; Vue.use(DatePicker) // 全局注册
  1. 常见报错及解决办法
   //  error  in ./node_modules/cube-ui/lib/fonts/cubeic.dcc2b6f.ttf

    {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
exclude: /node_modules/, // 注释此处
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

cube-ui普通编译实践的更多相关文章

  1. Android 6.0 源代码编译实践

    http://www.judymax.com/archives/1087 Android 6.0 源代码编译实践 https://mirrors.tuna.tsinghua.edu.cn/help/A ...

  2. 北航 编译实践 PL/0文法

    编译实践-PL\0编译系统实现 姓名:   专业: 计算机科学与技术 学院: 软件学院 提交时间: 2013年12月25日 北京航空航天大学·软件学院 编译实践-PL\0编译系统实现 实验要求 以个人 ...

  3. 加薪攻略之UI组件库实践—storybook

    目录 加薪攻略之UI组件库实践-storybook 一.业务背景 二.选用方案 三.引入分析 项目结构 项目效果 四.实现步骤 1.添加依赖 2.添加npm执行脚本 3.添加配置文件 4.添加必要的w ...

  4. eric6中ui文件编译失败,提示找不到puicc5

    1解决办法 在setting中——preference 找到qt设置——pyQT工具文件选择更改为: 我的pyuicc5.exe文件在这个目录下 然后右击编译窗口,就成功了. 如果找不到ui文件,在窗 ...

  5. 关于React Native项目在android上UI性能调试实践

    我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...

  6. OpenWRT平台搭建及简单应用[转帖]+华为HG255D编译实践(20190323更新)

    转自:http://www.cnblogs.com/zmkeil/archive/2013/04/17/3027385.html对于HG255D参照这里:http://www.right.com.cn ...

  7. Android8.1源码编译实践(Mac)

    第0步:版本选择 AOSP版本选择很重要,如果选错了,会造成编译失败等各种问题,编译AOSP对Xcode的版本是有要求的: 比如:AOSP6.0-7.0,要求Xcode的版本是8.3,然而在MacOS ...

  8. 微信小程序UI自动化:实践之后的记录01-选择工具/框架

    目录 1. 前言 2. 工具/框架/库选择 2.1 miniprogram-automator官方介绍(摘自官方哈) 小程序自动化 特性 2.2 minium官方介绍 特性 3. 如何选择 4. 对应 ...

  9. .Net反编译实践记录

    去壳 去壳可以使用 de4dot,源码在 这里.可用版本 下载地址. 使用方式为:.\de4dot.exe [path] 修改代码 反编译修改代码可以使用 dnSpy,源码在 这里.可用版本 下载地址 ...

随机推荐

  1. 入门大数据---Hive常用DDL操作

    一.Database 1.1 查看数据列表 show databases; 1.2 使用数据库 USE database_name; 1.3 新建数据库 语法: CREATE (DATABASE|SC ...

  2. 且谈 Apache Spark 的 API 三剑客:RDD、DataFrame 和 Dataset

    作者:Jules S. Damji 译者:足下 本文翻译自 A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets ,翻译已 ...

  3. 并发04--JAVA中的锁

    1.Lock接口 Lock与Synchronized实现效果一致,通过获得锁.释放锁等操作来控制多个线程访问共享资源,但是Synchronized将获取锁固话,必须先获得锁,再执行,因此两者对比来说, ...

  4. keras 从txt加载预测数据

    ImageDataGenerator.flow_from_directory()的用法已经非常多了,优点是简单方便,但数据量很大时,需要组织目录结构和copy数据,很浪费资源和时间 1. 训练时从tx ...

  5. 如何在项目开发中应用好“Deadline 是第一生产力”?

    我想也许你早就听说过"Deadline是第一生产力"这句话,哪怕以前没听说过,我相信看完本文后,再也不会忘记这句话,甚至时不时还要感慨一句:"Deadline是第一生产力 ...

  6. github Pull Request合入全流程介绍

    图解全流程 详细步骤 1. fork仓库 2. clone fork仓库到本地 3. 关联upstream原仓库 在fork本地仓库输入下面命令进行关联: git remote add upstrea ...

  7. Milk Pumping G&Milk Routing S 题解

    Milk Pumping G&Milk Routing S 双倍经验时间 洛谷P5837 [USACO19DEC]Milk Pumping G 洛谷P3063 [USACO12DEC]Milk ...

  8. NOIp (on line) 入门组 2020 总结

    得分情况 : 估分: 100+30+30=160: 实际: 95+70+25=190: T1 : 题意: 有n块钱,买三种文具,分别为 a:7元.b:4元.c:3元,问怎么买能让n元钱全部用完,而且使 ...

  9. 猿灯塔:关于Java面试,你应该准备这些知识点

    自天子以至于庶人,壹是皆以修身为本 <礼记·大学> 马老师说过,员工的离职原因很多,只有两点最真实: 钱,没给到位 心,受委屈了 当然,我是想换个平台,换个方向,想清楚为什么要跳槽,如果真 ...

  10. C# DataTable与Excel读取与导出

    /// <summary> /// Excel->DataTable /// </summary> /// <param name="filePath&q ...