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



然后就可以正常使用啦~

相关推荐
政采云技术几秒前
深入理解 setState 执行机制
前端·react.js
清汤饺子1 分钟前
Everything Claude Code:让我把 AI 编程效率再翻一倍的东西
前端·javascript·后端
西洼工作室10 分钟前
React TabBar切换与高亮实现
前端·javascript·react.js
belldeep13 分钟前
前端:Bootstrap 3.0 , 4.0 , 5.0 有什么差别?
前端·bootstrap·html
wuhen_n18 分钟前
Tool Schema 设计模式详解
前端·javascript·ai编程
码喽7号18 分钟前
Vue学习三:element-plus组件和FontAwesome图标组件
前端·vue.js·学习
zhangren0246820 分钟前
Laravel5.x版本特性全解析
android·vue.js·spring boot·mysql
2501_9159184120 分钟前
WebKit 抓包,WKWebView 请求的完整数据获取方法
android·前端·ios·小程序·uni-app·iphone·webkit
mcooiedo21 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
小陈工21 分钟前
Python Web开发入门(一):虚拟环境与依赖管理,从零搭建纯净开发环境
开发语言·前端·数据库·git·python·docker·开源