前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于cube-ui搭建移动端项目

基于cube-ui搭建移动端项目

作者头像
天天_哥
发布2018-12-19 15:55:47
1.7K0
发布2018-12-19 15:55:47
举报
文章被收录于专栏:天天天天

一、配置

官方文档

1.1 vue-cli < 3

此安装部分只针对于 vue-cli < 3 的情况

npm install cube-ui --save

cube-ui 搭配 webpack 2+ 支持后编译和普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置。

普通编译

修改 package.json 并安装依赖

代码语言:javascript
复制
...
  "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
    },
    <!--新增的部分开始-->
    "transformModules": {
        "cube-ui": {
            "transform": "cube-ui/lib/${member}",
            "kebabCase": true,
            "style": {
                "ignore": [
                    "create-api",
                    "better-scroll",
                    "locale"
                ]
            }
        }
    },
     <!--新增的部分结束-->
    "dependencies": {
        "cube-ui": "^1.12.5",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
    },
    ...

修改 webpack 配置:

代码语言:javascript
复制
    //引入模块
    const TransformModulesPlugin = require('webpack-transform-modules-plugin')

    //将solve中的alias中增加'cube-ui': 'cube-ui/lib'
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'cube-ui': 'cube-ui/lib'
        }
    },
    //在plugins中添加 插件
     plugins: [
        // ...
        new TransformModulesPlugin()
      ]

使用

全部引入

代码语言:javascript
复制
import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)

按需引入

代码语言:javascript
复制
import {
  // 基础样式
  Style,
  // basic
  Button,
  Loading,
  Tip,
  Toolbar,
  // form
  Checkbox,
  CheckboxGroup,
  Radio,
  Checker,
  Input,
  Textarea,
  Select,
  Switch,
  Rate,
  Validator,
  Upload,
  Form,
  // popup
  Popup,
  Toast,
  Picker,
  CascadePicker,
  DatePicker,
  TimePicker,
  SegmentPicker,
  Dialog,
  ActionSheet,
  Drawer,
  // scroll
  Scroll,
  Slide,
  IndexList,
  Swipe
} from 'cube-ui'

// 全局注册
Vue.use(Button)

实例

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、配置
  • 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档