【零基础学会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

home.php?mod=space&uid=70631 课件下载、更多教程、遇到问题或者进行交流，请到： https://125.confly.eu.org/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群：326576256

精易论坛