/ nodejs

vue+cube-ui 快速上手

cube-ui 是由滴滴出品的一款基于 Vue.js 实现的移动端组件库,相比 mint-ui 有更多好用的组件。

本文作为初始化遇到一些问题的笔记记录,正确方法写在最后……

文档说 vue-cli 版本 2 和 3 安装的方式不一样,我想我的版本刚更新应该 > 3 ,于是就心安理得地按照 > 3 的方式去做,报了一堆错。

不停地google+stackoverflow了一个晚上,尝试了各种奇怪的方法,包括 github 上有人提到用 npm 的淘宝源会出现这个问题,直接去官方就可以了。

npm config set registry https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org

然而这种偏方显然是没有卵用的……

改了一堆配置依然无效之后,我检查了我的vue-cli版本……

原来我的 vue-cli 版本是 < 3 的!

因为版本 3 之后改名叫@vue/cli,所以升级到最新也还是 < 3

npm uninstall vue-cli -g
npm install -g @vue/cli

从头再来一遍后发现,按照官方文档的步骤使用

vue init webpack projectname
cd projectname
vue add cube-ui
npm run dev

也还是会有报错

These relative modules were not found:

* ./cubeic.ttf in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/stylus-loader??ref--11-3!./node_modules/cube-ui/src/common/stylus/index.styl 
* ./cubeic.woff in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/stylus-loader??ref--11-3!./node_modules/cube-ui/src/common/stylus/index.styl

正确姿势

用脚手架模板初始化项目,再安装一下组件,然后就直接可以运行了……

 vue init cube-ui/cube-template projectname
 cd projectname
 npm i
 npm run dev

就这么简单……

配置

cube-ui 初始化的时候有一堆配置,参见文档

我都不知道这些东西怎么用……