uni-app 之 安装uView,安装scss/sass编译

uni-app 之 安装uView,安装scss/sass编译

image.png

image.png

image.png

点击HBuilder X 顶部,工具,插件安装,安装新插件

image.png

image.png

安装成功!

注意,一定要先登录才可以安装

image.png

1. 引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

复制代码
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

image.png

#2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

复制代码
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

image.png

#3. 引入uView基础样式

注意!

App.vue首行的位置引入,注意给style标签加入lang="scss"属性

复制代码
<style lang="scss">
    /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-ui/index.scss";
</style>

image.png



然后就可以正常使用啦~

相关推荐
lemon_sjdk35 分钟前
DOM 节点
java·前端·javascript
nvd1136 分钟前
深入现代 Web 鉴权架构:网关统一代理 (Forward-Auth) vs 前端持有 JWT 的终极选型与边缘同域实践
前端·架构·状态模式
leoZ2311 小时前
2026-09-09-springboot-cloud-deploy-pitfalls
java·前端·javascript·vue.js·人工智能·spring boot·后端
YWL1 小时前
OpenLayers弹窗Overlay深度实战
前端·vue·openlayers
YWL2 小时前
OpenLayers+ECharts联动:地图点击联动图表,数据可视化大屏方案
前端·信息可视化·vue·echarts·openlayers
芭拉拉小魔仙2 小时前
Vue 2 门诊收费系统中的医保结算流程设计与实践
前端·javascript·vue.js
moonrailgun2 小时前
用 Node.js 复刻 Codex Astra 的终端星光
前端·javascript·算法
海上彼尚2 小时前
Cursor 模型的强度实测排行
前端·人工智能·后端
默_笙2 小时前
💫 给金鱼建图书馆(下):Milvus 向量数据库,让 AI 拥有长期记忆
前端·javascript
liangshanbo12153 小时前
手写 Function.prototype.call 与 Function.prototype.apply 面试题满分答案
开发语言·javascript·原型模式