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



然后就可以正常使用啦~

相关推荐
黑夜照亮前行的路9 分钟前
JavaScript 性能优化实战技术指南
javascript·性能优化
Stringzhua1 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
万少1 小时前
可可图片编辑 HarmonyOS 上架应用分享
前端·harmonyos
你的人类朋友2 小时前
git常见操作整理(持续更新)
前端·git·后端
无羡仙2 小时前
Webpack 核心实战:从零搭建支持热更新与 Babel 转译的现代前端环境
前端·webpack·前端框架
乐~~~2 小时前
el-date-picker type=daterange 日期范围限制
javascript·vue.js·elementui
你的人类朋友2 小时前
git中的Fast-Forward是什么?
前端·git·后端
初遇你时动了情2 小时前
uniapp vue3 ts自定义底部 tabbar菜单
前端·javascript·uni-app
JarvanMo3 小时前
天塌了?Flutter工程总监跑去苹果了?
前端
烛阴4 小时前
掌握 TypeScript 的边界:any, unknown, void, never 的正确用法与陷阱
前端·javascript·typescript