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

一、配置

官方文档

1.1 vue-cli < 3

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

npm install cube-ui --save

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

普通编译

修改 package.json 并安装依赖

...
  "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"
    },
    ...
  //还有
   "devDependencies": {
    "webpack-transform-modules-plugin": "^0.3.5"
  }

修改 webpack 配置：

    //引入模块
    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()
      ]

使用

全部引入

import Vue from 'vue'
import Cube from 'cube-ui'

Vue.use(Cube)

按需引入

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)

实例