# 开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

main.js

main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。

首先引入了Vue库和App.vue，创建了一个vue实例，并且挂载vue实例。

使用Vue.use引用插件，使用Vue.prototype添加全局变量，使用Vue.component注册全局组件。

可以引用vuex，因涉及多个文件，此处没有提供示例，详见hello uni-app示例工程。

无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在[插件市场]找到转换插件。注意

nvue 暂不支持在 main.js 注册全局组件

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

uni-app 官方扩展插件（uni ui）及插件市场上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略 注意：

如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；
使用时需要在 style 节点上加上 lang="scss"。

3. pages.json不支持scss，原生导航栏和tabbar的动态修改只能使用js api
以下是 uni.scss 的相关变量：

vite.config

vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项

启用压缩的方法：

HBuilderX 创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
cli 创建的项目可以在package.json中添加参数--minify

互相引用

引用组件

传统vue项目开发，引用组件需要导入 - 注册 - 使用三个步骤，如下：

Vue 3.x增加了script setup特性，将三步优化为两步，无需注册步骤，更为简洁：

uni-app的easycom机制，将组件引用进一步优化，开发者只管使用，无需考虑导入和注册，更为高效：

在 uni-app 项目中，页面引用组件和组件引用组件的方式都是一样的（可以理解为：页面是一种特殊的组件），均支持通过 easycom 方式直接引用。
easycom将其精简为一步。只要组件安装在项目根目录或uni_modules的components目录下，并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用

引用js

js文件或script标签内（包括 renderjs 等）引入js文件时，可以使用相对路径和绝对路径，形式如下

注意

js 文件不支持使用/开头的方式引入，必须用@

NPM支持

uni-app支持使用npm安装第三方包。
初始化npm工程

若项目之前未使用npm管理依赖（项目根目录下无package.json文件），先在项目根目录执行命令初始化npm工程

cli项目默认已经有package.json了。HBuilderX创建的项目默认没有，需要通过初始化命令来创建。 安装依赖

在项目根目录执行命令安装npm包：

使用

安装完即可使用npm包，js中引入npm包：

注意

为多端兼容考虑，建议优先从 [uni-app插件市场]（官方网站上）获取插件。直接从 npm 下载库很容易只兼容H5端。
非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 [API]（兼容小程序 API），比如：支持[高德地图微信小程序 SDK]。类似[jQuery]等库只能用于H5端。
node_modules 目录必须在项目根目录下。不管是cli项目还是HBuilderX创建的项目。
关于ui库的获取，详见[多端UI库]

引入css

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

引入静态资源

template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

注意

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

css 引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6

注意

自HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。>

Tips

引入字体图标请参考，字体图标
@开头的绝对路径以及相对路径会经过 base64 转换规则校验
不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
其余平台不会转 base64

引用原生插件

uni-app在App侧的原生扩展插件，支持使用java、object-c等原生语言编写。

从HBuilderX 3.6起，新增支持了使用uts来开发原生插件。

为了和uts插件区别，之前的App原生插件

uni.requireNativePlugin(PluginName)

引入 App 原生语言插件。

平台差异说明：App

自 HBuilderX 1.4 版本起，uni-app 支持引入原生插件，使用方式如下：

不管是vue文件还是nvue文件，都是这个API。

#内置原生插件

内置原生插件,uni-app已默认集成，支持直接在内置基座运行。

仅在nvue页面，支持引入BindingX，animation， DOM.addRule等。

在vue页面，支持引入clipboard，storage，stream，deviceInfo等。

使用方式：可通过uni.requireNativePlugin直接使用。

示例

uni-app互相引用