@insaic/neon v0.4.26
A Mobile UI Components built on Vue
Links
国内站点访问
安装
NPM
npm i @insaic/neon -S
CDN
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/@insaic/neon/lib/style.min.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/@insaic/neon/lib/index.min.js"></script>
引入组件
1.按需引入(推荐)
使用 babel-plugin-import,该插件是一款 babel 插件,它会在编译过程中将
import { Button } from '@insaic/neon'
的写法自动转换为按需引入的方式
const button = require('@insaic/neon/lib/button')
require('@insaic/neon/lib/button/style')
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
在.babelrc
里添加插件配置
"plugins": [
[
"import",
{
"libraryName": "@insaic/neon",
"style": true
}
]
]
安装和配置好插件后,即可使用
import { Style, Button } from '@insaic/neon'
Vue.use(Style).use(Button)
的方式引入需要的组件
注意: 按需引入组件 也需引入基础样式
import { Style } from '@insaic/neon' Vue.use(Style)
2.全局引入
import Neon from '@insaic/neon'
Vue.use(Neon)
注意 全局引入已包含了基础样式
主题定制
样式变量
Neon
样式基于Sass
开发,可通过全局和组件的样式变量对主题样式进行调整
完整的样式变量列表可以查看 默认样式变量
变量覆盖
可以通过引入组件源码(components
目录下),并覆盖样式变量的方式来实现主题定制
首先安装如下依赖:
babel-plugin-import
sass-loader
node-sass
在
.babelrc
添加如下配置
// .babelrc
{
"plugins": [
["import", {"libraryName": "@insaic/neon", "libraryDirectory": "src/components"}],
]
}
- 在
vue.config.js
添加如下配置(基于vue-cli 3.0情况下)
// vue.config.js
module.exports = {
// ...
// 将neon源码包里的js进行babel-loader转译
transpileDependencies: [
'@insaic'
],
// 将neon源码包里的scss变量引入,实现自定义样式主题
css: {
loaderOptions: {
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.scss` 这个文件
data: `@import "@/variables.scss";`
}
}
}
// ...
}
- 最后在
src
下新建variables.scss
添加如下配置
// src/variables.scss
// 下面两项须确保引入,不可省略
@import '~@insaic/neon/src/common/styles/variables';
@import '~@insaic/neon/src/common/styles/mixins';
// 以下为自定义内容,覆盖样式变量
// $theme-color:red;
// $button-primary-background-color: $theme-color;
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago