【零基础学会uniapp系列】8、 静态资源的引用

【零基础学会uniapp系列】8、 静态资源的引用

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