Feui 基于 Vue 的移动端组件库 - 文章教程

Feui 基于 Vue 的移动端组件库

发布于 2020-05-07 字数 2432 浏览 1562 评论 0

Feui 是诺诺网前端组(NuoFE)基于WeUInuimVue(2.x)开发的移动端 UI 组件库,希望借此提高组件价值,减轻工作量,更好的享受生活,享受工作。

Feui 基于 Vue 的移动端组件库

特点

简单

基于 Vue 2.0的 Mobile 组件库,撸起代码超简单

方便

支持自定义主题,移植方便,使用起来超方便

可靠

支持40+的自定义组件,高复用,按需加载,99种问题一套框架解决

开始入门

安装

npm i feui --save-dev

引入组件

No.1 : 使用 babel-plugin-import (推荐)

# 安装 babel-plugin-import 插件
npm i babel-plugin-import --save-dev
// 在 .babelrc 或 babel-loader 中添加插件配置
{
  "plugins": [
    ["import", { "libraryName": "feui", "style": true }]
  ]
}

接着你可以在代码中直接引入 feui 组件,插件会自动将代码转化为 No.2 的按需引入形式。

import { Button } from "feui";
export default {
  components: {
    [Button.name]: Button
  }
};

No.2 : 按需引入组件

import { Button } from "feui/lib/button";
import "feui/lib/feui-css/base.css";
import "feui/lib/feui-css/button.css";

No.3 : 导入所有组件

import Vue from "vue";
import feui from "feui";
import "feui/lib/feui-css/index.css";
Vue.use(feui);

CDN

<!-- 引入样式 -->
<link rel="stylesheet" target="_blank" class="external-link" href="https://unpkg.com/feui/lib/feui-css/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/feui/lib/feui.min.js"></script>

vue-cli 脚手架 feui-cli

可以使用vue-cli的定义脚手架来初始化feui

vue init zoeblow/feui-cli projectName

更多使用方法参见中文文档:https://www.wenjiangs.com/docs/feui

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0