青岛低价网站建设,化妆品网站栏目设计,海南建设局相关网站,h5制作官网关于SCSS
uview-plus依赖SCSS#xff0c;您必须要安装此插件#xff0c;否则无法正常运行。
如果您的项目是由HBuilder X创建的#xff0c;相信已经安装scss插件#xff0c;如果没有#xff0c;请在HX菜单的 工具-插件安装中找到scss/sass编译插件进行安…关于SCSS
uview-plus依赖SCSS您必须要安装此插件否则无法正常运行。
如果您的项目是由HBuilder X创建的相信已经安装scss插件如果没有请在HX菜单的 工具-插件安装中找到scss/sass编译插件进行安装 如不生效重启HX即可如果您的项目是由vue-cli创建的请通过以下命令安装对sass(scss)的支持如果已安装请略过。上面是官网的描述意思就是你用HBuilder X创建的项目的话你就去看一下有没有安装这个这个插件只需要安装一次安装之后后面再创建的项目里面都会被配置到里面。没有的话用npm安装就行了注意版本号高版本的有的不适用建议适用低点的版本
// 安装sass
npm i sass1.63.2 -D// 安装sass-loader
npm i sass-loader10.4.1 -D#准备工作
在进行配置之前请确保您已经根据安装中的步骤对uview-plus进行了下载安装如果没有请先下载安装。
这个uview-plus适用npm安装也行用uni_modules的方式安装也行建议适用uni_modules的方式
在插件市场找到uview的插件 将其导入到对应的项目导入成功之后在项目的uni_modules里面可以看到这个就是导入成功了
#配置步骤
#引入uview-plus主JS库
在项目根目录中的main.js中引入并使用uview-plus的JS库注意这两行要放在const app createSSRApp(App)之后。
// main.js
import uviewPlus from /uni_modules/uview-plus// #ifdef VUE3
import { createSSRApp } from vue
export function createApp() {const app createSSRApp(App)app.use(uviewPlus)return {app}
}
// #endif#在引入uview-plus的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
import /uni_modules/uview-plus/theme.scss;#引入uview-plus基础样式
注意
在App.vue中首行的位置引入注意给style标签加入langscss属性
style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import /uni_modules/uview-plus/index.scss;
/style#配置manifest
在项目的manifest.json中增加mergeVirtualHostAttributes配置
mp-weixin : {appid : ,...mergeVirtualHostAttributes : true
},
mp-toutiao : {appid : ,...mergeVirtualHostAttributes : true
}#安装依赖库
一定要记得安装依赖库要不然会报很多找不到文件的错误我就是没有安装这两个依赖库导致搞了半天。
npm i dayjs
npm i clipboard#配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
温馨提示
uni-app为了调试性能的原因修改easycom规则不会实时生效配置完后您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。请确保您的pages.json中只有一个easycom字段否则请自行合并多个引入规则。
uview-plus3.x配置
// pages.json
{easycom: {autoscan: true,// 注意一定要放在custom里否则无效https://ask.dcloud.net.cn/question/131175custom: {^u--(.*): /uni_modules/uview-plus/components/u-$1/u-$1.vue,^up-(.*): /uni_modules/uview-plus/components/u-$1/u-$1.vue,^u-([^-].*): /uni_modules/uview-plus/components/u-$1/u-$1.vue}},// 此为本身已有的内容pages: [// ......]
}uview-plus4.x配置尚未发布
// pages.json
{easycom: {autoscan: true,// 注意一定要放在custom里否则无效https://ask.dcloud.net.cn/question/131175custom: {^up-(.*): /uni_modules/uview-plus/components/up-$1/up-$1.vue,^u-().*): /uni_modules/uview-plus/components/up-$1/up-$1.vue}},// 此为本身已有的内容pages: [// ......]
}#typescript支持
在tsconfig.json中参考如下配置增加uni-modules/uview-plus/types
{compilerOptions: {sourceMap: true,baseUrl: .,paths: {/*: [./src/*]},lib: [esnext, dom],types: [dcloudio/types,uni-modules/uview-plus/types]},include: [src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue]
}
