Appearance
安装
配置 .npmrc 镜像源
registry=http://192.168.14.111:8082/repository/npm-group/
@investoday:registry=http://192.168.14.111:8082/repository/npm-group/registry=http://192.168.14.111:8082/repository/npm-group/
@investoday:registry=http://192.168.14.111:8082/repository/npm-group/安装nexui
sh
pnpm add nexui@latest @nutui/icons-vue-taro -Spnpm add nexui@latest @nutui/icons-vue-taro -Swebpack config配置
ts
import Components from 'unplugin-vue-components/webpack';
import NexUIResolver from 'nexui/dist/resolver';
...
h5: {
// 需要引入scss变量文件
sass: {
data: `@import "nexui/dist/styles/variables.scss";`,
},
...
// 需要加入nexui来进行rem转换
esnextModules: [..., 'nexui'],
...
webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(
Components({
resolvers: [
NexUIResolver(),
],
})
);
}
}
...import Components from 'unplugin-vue-components/webpack';
import NexUIResolver from 'nexui/dist/resolver';
...
h5: {
// 需要引入scss变量文件
sass: {
data: `@import "nexui/dist/styles/variables.scss";`,
},
...
// 需要加入nexui来进行rem转换
esnextModules: [..., 'nexui'],
...
webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(
Components({
resolvers: [
NexUIResolver(),
],
})
);
}
}
...app.ts 注册全局icon
tsx
import { IconFont } from '@nutui/icons-vue-taro'
...
App.component('icon-font', IconFont)
// 使用
<icon-font
font-class-name="nex"
size="23"
color="rgb(229, 229, 229)"
class-prefix="nex-icon"
name="a-unchosen"
></icon-font>import { IconFont } from '@nutui/icons-vue-taro'
...
App.component('icon-font', IconFont)
// 使用
<icon-font
font-class-name="nex"
size="23"
color="rgb(229, 229, 229)"
class-prefix="nex-icon"
name="a-unchosen"
></icon-font>app.less引入icon 和 variable样式
less
@import "nexui/dist/styles/iconfont.less"
@import "nexui/dist/styles/variables.less"@import "nexui/dist/styles/iconfont.less"
@import "nexui/dist/styles/variables.less"