实践场景(在老的项目添加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. 【题解】[USACO17JAN]Balanced Photo G

    题目链接:https://www.luogu.com.cn/problem/P3608 方法一 用树状数组求逆序对先后扫两遍,一次从前往后,一次从后往前,算出每头奶牛左右两边比她高的数量. 最后统计一 ...

  2. SQL注入之Boolean型盲注

    什么是Boolean型注入 Boolean型的注入意思就是页面返回的结果是Boolean型的,通过构造SQL判断语句,查看页面的返回结果是否报错,页面返回是否正常等来判断哪些SQL判断条件时成立的,通 ...

  3. vue全家桶(2.4)

    3.6.重定向和别名 3.6.1.重定向 路由重定向通俗的说就是从一个路由重新定位跳转到另一个路由,例如:访问的 "/a" 重定向到"/b" 重定向也是通过配置 ...

  4. 【错误】上传新的项目出错 error: failed to push some refs to 'https://github.com/...

    问题描述:在git bash中键入 $ git push origin master 进行提交的时候出现 如下错误: error: failed to push some refs to 'https ...

  5. 【vue】---- ElementUI 实现上传Excel

    1.功能描述:vue 项目使用 el-upload 实现上传 Excel. 2.功能效果:在el-upload基础上做了样式整改. 3.功能实现: // el-upload 上传组件 <temp ...

  6. 使用.net standard实现不同内网端口的互通(类似花生壳)

    应用场景 1.公司电脑与家中电脑的远程控制,一般通过teamview.向日葵等软件,端口互通后,可以使用电脑自带的远程桌面 2.家中电脑搭建SVN.git仓库,在外网或者内网访问,一般使用云服务器,端 ...

  7. JVM源码分析之深入分析Object类finalize()方法的实现原理

      原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 ​“365篇原创计划”第十篇. 今天呢!灯塔君跟大家讲: 深入分析Object类finalize()方法的实现原理 finalize 如果 ...

  8. NOI Online #3 提高组 T1水壶 题解

    题目描述 有 n 个容量无穷大的水壶,它们从 1∼n 编号,初始时 i 号水壶中装有 Ai 单位的水. 你可以进行不超过 k 次操作,每次操作需要选择一个满足 1≤x≤n−1 的编号 x,然后把 x ...

  9. 关于c++中结构体列表初始化,聚合问题

    聚合(aggregate) C++语法规定:不能使用初始值列表来初始化"非聚合(non-aggregate)"的对象.那么,什么才算是"聚合"呢?C++认为聚合 ...

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

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