8、 静态资源的引用, 通用js的引用,npm包的使用
静态资源,指的是程序中用到的图片、图标、字体等内容,这些内容应该存储于:static文件夹下
可直接在代码中进行引用:
例如:我们在前面tabbar的课程中也有介绍过引用static下面的图片文件。
"tabBar": {
"color": "#8A8A8A",
"selectedColor": "#0081ff",
"borderStyle": "#EEEEEE",
"backgroundColor": "#F8F8F8",
"list": [ {
"pagePath": "pages/index/index",
"iconPath": "static/index.png",
"selectedIconPath": "static/index_select.png",
"text": "概况"
},
{
"pagePath": "pages/user/user",
"iconPath": "static/user.png",
"selectedIconPath": "static/user_select.png",
"text": "用户"
}
],
"midButton": {
"height": "60px",
"iconPath": "static/add.png",
"text": "添加"
}
}
通用js文件:
在项目的编写中,经常会用到一些公共、重复的函数,这时候,就可将函数独立写入到一个js文件中,然后在用到的地方进行引用,就不用重复写同一段代码了,同时也能让程序看起来更加的美观。
一般的,可以将通用的js文件写入到项目下的common目录中,或者写入到utiljs目录中,当然这些名字都是自己起的。
引入其他文件:
可以引入的文件类型: vue/nvue、js、css
路径中的@
符号,代表的是项目的根目录。可直接使用:
<script>
import setTabBar from '@/components/api-set-tabbar.nvue';
import provinceData from '@/common/city-data/province.js';
</script>
<style>
@import '@/common/index.css';
</style>
使用npm下载包:
有些时候,在打开他人的工程进行学习时,会无法正常编译,或者会提示缺少某个js文件。
这一般是由于缺少npm包导致的,这个时候我们就需要手动去下载npm包。
安装某个模块:
npm install <Module Name>
卸载某个模块:
npm uninstall <Module Name>
尝试在项目中安装一个npm包,然后引用他。
注意事项:
- 为多端兼容考虑,建议优先从 uni-app插件市场 获取插件。直接从 npm 下载库很容易只兼容H5端。
- 非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块,安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API(兼容小程序 API),比如:支持高德地图微信小程序 SDK。类似jQuery 等库只能用于H5端。
- node_modules 目录必须在项目根目录下。不管是cli项目还是HBuilderX创建的项目。
- 支持安装 mpvue 组件,但npm方式不支持小程序自定义组件(如 wxml格式的vant-weapp),使用小程序自定义组件请参考:小程序组件支持。
- 关于ui库的获取,详见多端UI库
本课参考资料:
https://uniapp.dcloud.io/frame?id=npm%E6%94%AF%E6%8C%81
https://ask.dcloud.net.cn/article/19727
home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流
加QQ群:326576256