创建uni-app项目及安装scss插件

最新推荐文章于 2024-03-30 10:34:46 发布
最新推荐文章于 2024-03-30 10:34:46 发布
阅读量4k 收藏 2
点赞数
分类专栏： 笔记 文章标签： scss 小程序 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50823456/article/details/121224556
版权

uni-app在手，做啥都不愁

-什么是uni-app?

一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

一套代码编到13个平台
在这里插入图片描述
uni-app官网：https://uniapp.dcloud.io/
uView :https://www.uviewui.com/

-快速上手

1、创建uni-app项目 这里用到的是HBuilderX
点击文件 ---->新建项目
这里的模板选择的是默认模板了，也可以选择uni-app模板
在这里插入图片描述
2、运行微信开发者工具
运行–>运行到小程序模拟器—>微信开发者工具
在这里插入图片描述
3、极有可能报错如下（需要将微信小程序服务端开启）：
在这里插入图片描述
4、打开服务端口
在这里插入图片描述5、重启HBuilder 编译成功
在这里插入图片描述
此时的微信开发者工具和HBuilderX
在这里插入图片描述
6、编辑一下manifest.json
在这里插入图片描述
在这里插入图片描述

7、工具中的运行配置
在这里插入图片描述
8、新建页面page
在这里插入图片描述
9、需要导入scss插件
在这里插入图片描述
如上图 提示未安装scss 则需要去下载安装（插件市场）
在这里插入图片描述
进入插件市场 需要 登录你的HBuilderX账号
在这里插入图片描述
点击scss后进入
在这里插入图片描述
点击使用HBuilderX导入插件后:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

想吃米豆腐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app项目中使用scss语法
草灯的专栏
02-15 3万+
如何在uni-app项目中使用scss语法。我的win7 64位系统 最简单的方法如下： 点击菜单栏中的“工具 – 插件安装 – scss/sass编译” 点击安装，如果成功了，就可以正常使用了。 很不幸的是，我的提示失败了 然后我又找到D:\HBuilderX\plugins\compile-node-sass插件目录，执行npm install，仍然提示失败： 这里写自定义目录标题欢迎使用...
uniapp配置scss支持
奔跑的砖头
08-12 42
在开发 uniapp 的时候发现默认 style 是不支持 scss 模式开发样式，这样的话使用 --status-bar-height 就没有办法变成想要的数值了，这时候就需要开启 scss 支持。 在 HbuilderX 工具 -> 插件安装 找到 scss/sass编译 安装 在 style 中 添加 lang 属性 <style lang="scss"> ....
【自用】uniapp全局统一样式scss管理
最新发布
qq_43364234的博客
03-30 588
【自用】uniapp全局统一样式scss管理。
uni-app 之 安装uView，安装scss/sass编译
jun_tong的博客
09-04 1433
uni-app 之 安装uView，安装scss/sass编译
uni-app中使用scss的示例代码
12-14
遇到的坑 整个一个下午我都在解决uni-app中使用scss的坑，首先说一下我的问题，在用scss时一直不能使用@mixin，然后百度各种办法调试： 代码写法问题（完全按官网的写法来的不可行）: 官网demo 浏览器问题（换火狐不行）。 语法版本问题（换了写法同样不行）: scss使用mixin不生效，浏览器无法编译出来 插件没有安装上（重装还是不好使）。 把<style type=’css’> 改成了 scss ， 还是不行。 使用scss新语法还时不行 整个一下午实在是弄不出来，没办法的情况下，想着直接用vue的中安装scss的方法来操作一下试试，结果还真可以了。 需要注意的是不能全局
uni-app-template:uni-app 通用模板
04-06
uni-app 通用模板 官网地址 平台兼容说明 模板说明： 基于cli创建的轻量化项目模板，只保留vue最基础的使用方式，保证打包到多端时不需要作太多判断处理 状态管理不建议使用vuex，因为会导致代码变得冗余，而且在编辑器中失去代码静态追踪和提示“”使用方式可参考： 模板为了轻量化只保留了常用的组件，需要其他组件自行添加，，这里不推荐使用除官方外的扩展组件，因为打包成多端可能会有兼容问题，所以我习惯自己写，这样代码会更少 已经配置好在manifest.json文件中h5端请求代理，不需要可剔除 预装了sass，部分注意事项请看uni.scss代码注释 注意：vue.config.js 中配置的 css.loaderOptions 是无法在当前项目生效的，可能是uni-app项目设定和标准vue-cli项目设定不一样导致的，需要在uni.scss文件全局引入即可，具体看代码 目录说明
uniapp(一)
m0_74331185的博客
02-03 5897
微信小程序简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
uni-app全局引入scss文件的不同方式
Moon Star
11-01 1万+
1. 使用config方式引入 在项目下创建vue.config.js文件 module.exports = { css: { loaderOptions: { scss: { prependData: `@import "~@/static/style/index.scss";` } } } } Tips：根据scss版本确定配置，版本低的使用“data”，高的使用“prependData” 在/static/style/index.scss文件中，引入其他
uniapp 引入 Less & SCSS
曲江涛的博客
05-18 2470
通过按照上述步骤，在 UniApp 中引入 Less 和 SCSS 非常简单。首先，在项目的配置文件中添加相应的配置，确保已经安装了相应的依赖包。然后，在样式文件中使用 Less 或 SCSS 的语法编写样式。UniApp 的官方文档、Less 官方文档和 SCSS 官方文档是学习和深入了解更多关于 UniApp、Less 和 SCSS 的功能和使用方法的好资源。使用 Less 和 SCSS 可以提供更灵活和强大的样式编程能力，但也需要考虑项目复杂性和团队的技术能力，选择合适的预处理器来满足项目的需求。
uniapp 添加scss全局变量、scss公共类
热门推荐
我的博客
05-18 2万+
一、创建scss变量文件variable.scss和公共类文件common.scss，放在目录/src/static/css/下 variable.scss // 主题色 $primary-color: #0099FF; // 其他变量 ...... 若要添加其他变量直接在文件里加即可。 common.scss @import './variable.scss'; // 公共类 .color-primary { color: $primary-color; } .bg-primary
uni-app中使用scss
weixin_44003190的博客
05-27 1万+
项目总结—scss篇 1.配置 1.1 vue 1.2 react 1.3 uniapp 2. 引入scss 先将所有scss合并到index.scss中 @import "../base.scss" @import "../form.scss" 在main.js中引入即可 import "../index.scss" 3. 全局配置-global 有两个scss比较特殊，一个是global，...
uni-app-template:uni-app的项目模板
05-11
uni-app项目模板（不喜勿喷） 一个5年的web前端开源的uni-app快速开发模板，参考学习一同进步 建议uni-app使用时间达到1年以上的程序员来学习 使用步骤 下载下来，解压成文件夹 把项目包丢到HBuilder X里面 HBuilder X要安装scss/sass编译插件 运行项目 觉得不错，给个5星好评吧 QQ交流群(607391225) 微信交流群（加我好友备注"进群"） QQ群号：607391225 微信号：zhou0612wei 开源不易，需要花费很多精力，打个赏吧 微信打赏码 支付宝打赏码 空项目模板GitHub地址（开发用这个） 聊天案例项目 聊天案例项目H5地址 聊天案例项目安卓APP安装包下载地址 文件说明 components/chat-emojis.nvue 表情组件（表情、收藏表情图、表情包） components/chat-message.nvue 消
stylelint-config-recommended-scss:推荐的stylelint共享SCSS配置
05-11
stylelint-config-recommended-scss 推荐的stylelint共享SCSS配置。 它将打开stylelint中所有规则。 按原样使用它，或作为您自己的配置的基础。 安装 首先，如果尚未通过npm安装stylelint-scss和stylelint，请执行以下操作： npm install stylelint stylelint-scss --save-dev 然后您可以安装配置： npm install stylelint-config-recommended-scss --save-dev 用法 如果您在项目中本地安装了stylelint-config-recommended-scss ，只需将stylelint配置设置为： { " extends " : " stylelint-config-recommended-scss " } 如果您已
【uni-app】uni-app安装scss/sass后报错：win32-x64-64_binding.node is not a valid Win32 application
weixin_39085822的博客
11-26 4197
当我们下载HbuilderX编辑器，安装scss/sass编译插件时，报错： 现象： 这段信息告诉我们，我当时开发环境安装的node-sass中win32-ia32-72目录下binding.node这个文件丢失，需要下载补充 或： \HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-ia32-72\binding.node is not a valid Win32 application. 这段信
uniapp scss 的用法
qq_60056854的博客
04-14 2535
scss的一些基本用法
92 uni-app安装配置
samllucky的博客
06-29 655
此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做。访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html。操作步骤：工具 -> 设置 -> 打开 Settings.json 按需进行配置。dist 目录，因此默认情况下， unpackage 目录不会被 Git 追踪。在 HBuilderX 中，配置“微信开发者工具”的。在 HBuilderX 中，点击菜单栏中的。
uni-app的开发环境
weixin_54048131的博客
09-01 1177
如果我们想给组件封装一个click事件，应该在home.Vue事件中在页面上配置自定义事件：设置事件：在组件中。
uniapp修改全局样式,定义全局变量
weixin_41780937的博客
12-04 3343
以上就是用全局变量去维护uniapp项目样式的方案。
uniapp引入scss失败
08-24
在uniapp中，如果你在引入scss变量时发现不生效，可能是由于驼峰命名的原因。在uniapp中，scss变量的命名需要使用短横线（-）而不是驼峰命名法。例如，使用驼峰命名的背景颜色变量是不会生效的，而改成使用短横线的命名方式就可以解决这个问题。 如果你在引入uview-ui这个ui框架后遇到了问题，可以在项目根目录下的uni.scss文件中引入uview对应的样式文件来解决。具体的做法是在uni.scss中添加以下代码：@import "@/uni_modules/uview-ui/theme.scss"; 此外，如果你需要寻找其他可用的uni-app插件，你可以访问uni-app官方提供的插件地址https://ext.dcloud.net.cn/。在这个网站上你可以搜索到各种可用的插件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uniapp中背景颜色使用scss变量不生效](https://blog.csdn.net/weixin_41884808/article/details/128458511)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp引入uview-ui 报错：$u-badge-primary: $u-primary !default；](https://blog.csdn.net/weixin_42728767/article/details/129924800)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值