uni静态资源引入及css图片图标引用规范

1、页面组件引入

单页面中的组件引入需经过导入——注册——使用三个步骤；

<template>
	<view>
		<!-- 3.使用组件 -->
		<uni-rate text="1"></uni-rate>
	</view>
</template>
<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>复制

2、js的引入

相对路径和绝对路径两种方式，建议使用@的绝对路径引入方式；
公共自用封装js

//绝对路径
import add from '@/common/util.js';
//相对路径
import add from '../../common/util.js';复制

npm引入，以jquery为例

npm install jquery --save
//安装指定版本
npm install jquery@3.0.0 --save复制

注意：js不支持使用斜杠/开头的方式引入
备注：可在npm官网中查找包名

3、静态资源的引入

图片的引入，推荐使用@的绝对路径引入方式，可适配h5，app，小程序

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>复制

注意事项：

• @开头的绝对路径以及相对路径会经过 base64 转换规则校验
• 引入的静态资源在非 web 平台，均不转为 base64。
• web 平台，小于 4kb 的资源会被转换成 base64，其余不转
• 自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
• App 平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
• 支付宝小程序组件内 image 标签不可使用相对路径

css引入，推荐使用@的绝对路径引入

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');复制

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);复制

本地图片，推荐使用@开头的绝对路径，或~@开头的绝对路径

/*本地图片*/
.test2 {
	background-image: url('~@/static/logo.png');
}复制

备注：

• 自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式
• 微信小程序不支持相对路径

字体图标的引入

推荐使用~@开头的绝对路径

@font-face {
	font-family: test1-icon;
	src: url('~@/static/iconfont.ttf');
}复制

1111

文章涉及内容官网参考

npm官网
互相引入uni官网参考
背景图片引入uni官网参考