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官网参考