Vue項目中使用元件庫cube-ui

（一）建立一個vue項目

（1） (安裝全局vue-cli,通過vue -V檢視版本)

npm  install  -g  vue-cli
           

（2）vue init 你用的模闆工具 項目名稱 (這裡采用webpack作為模闆工具)

vue  init  webpack  my-project
           

（3）安裝成功後進入你的項目目錄

cd  my-project
           

（4） 啟動項目

npm run dev
           

(二）安裝cube-ui

建議大家先看看官網快速上手怎麼說：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

安裝：（注意：此安裝部分隻針對于 vue-cli < 3 的情況，vue -V檢視你的版本去，cue-cli>3的請移步官網哦）

npm   install  cube-ui  --save
           

cube-ui 搭配 webpack 2+ 支援後編譯和普通編譯 2 種建構方式（預設使用後編譯），使用前都需要修改應用的依賴和配置。

• 後編譯

  （1）修改 package.json 并安裝依賴

{
  // webpack-transform-modules-plugin 依賴 transformModules
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  },
  "devDependencies": {
    // 新增 stylus 相關依賴
    "stylus": "^0.54.5",
    "stylus-loader": "^2.1.1",
    "webpack-post-compile-plugin": "^0.4.1",
    "webpack-transform-modules-plugin": "^0.3.5"
  }
}
           

（2）修改 webpack.base.conf.js

var PostCompilePlugin = require('webpack-post-compile-plugin')
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
  // ...
  plugins: [
    // ...
    new PostCompilePlugin(),
    new TransformModulesPlugin()
  ]
  // ...
}
           

（3）修改 build/utils.js 中的 exports.cssLoaders 函數

exports.cssLoaders = function (options) {
  // ...
  const stylusOptions = {
    'resolve url': true
  }
  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus', stylusOptions),
    styl: generateLoaders('stylus', stylusOptions)
  }
}
           

（4）修改 vue-loader.conf.js

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: false
  }),
  // ...
}
           

具體參見 https://github.com/vuejs-templates/webpack/pull/970/files

（5）index.html中引入以下檔案

<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
           

到此為止後編譯配置完畢，用後編譯就後編譯哦，普通編譯和後編譯不能混着配置，就是說你不能既要配置普通編譯還要配置後編譯，會報錯哒（作為一個過來人的忠告，嘻嘻），下面看看普通編譯

• 普通編譯

  （1）修改 package.json 并安裝依賴

{
  // webpack-transform-modules-plugin 依賴 transformModules
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/lib/${member}",
      "kebabCase": true,
      "style": {
        "ignore": ["create-api", "better-scroll", "locale"]
      }
    }
  },
  "devDependencies": {
    "webpack-transform-modules-plugin": "^0.3.5"
  }
}
           

（2）修改 webpack 配置：

// webpack.config.js
var TransformModulesPlugin = require('webpack-transform-modules-plugin')
module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      // ...
      'cube-ui': 'cube-ui/lib'
      // ...
    }
    // ...
  }
  // ...
  plugins: [
    // ...
    new TransformModulesPlugin()
  ]
  // ...
}
           

（3）同樣的要引入CDN檔案到index.html中

<script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
           

（三）使用

全部引入（推薦，簡單粗暴（嘻嘻））

一般在入口檔案main.js中：

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

Vue.use(Cube)
           

按需引入這裡就暫時不介紹了哦，可以到官網看看哦，下面是個例子

• 案例

<template>
  <cube-button @click="showDialog">show dialog</cube-button>
</template>

<script>
  export default {
    methods: {
      showDialog() {
        this.$createDialog({
          type: 'alert',
          title: 'Alert',
          content: 'dialog content'
        }).show()
      }
    }
  }
</script>
           

運作你的項目看看是不是ok啦，以上是本文的全部内容

參照這個步驟在本機運作成功，原文位址：https://blog.csdn.net/weixin_38483133/article/details/85342863