uni-app快速上手顺序

最新推荐文章于 2024-07-19 17:05:06 发布

不想想了

最新推荐文章于 2024-07-19 17:05:06 发布

阅读量3k

点赞数 1

分类专栏： web前端文章标签：经验分享其他 python

本文链接：https://blog.csdn.net/weixin_45627194/article/details/123743143

版权

本文介绍了uni-app，一个基于Vue.js的前端框架，用于跨多端应用开发。通过官方文档，学习基础和扩展组件的使用，以及vue.js、接口、CSS3的语法。在HBuilder中创建项目，了解目录结构和全局配置，并模拟运行。文章还涉及了如何调用原生API和打包发行，包括HBuilder云打包和微信开发者工具的使用。

摘要由CSDN通过智能技术生成

白话：uni-app是用前端都熟系的技术合成的用于一套代码跨多端（14个平台）的前端应用开发框架。具有一定前端基础可以看官网快速上手。

1，官方文档

uni-app官网 (dcloud.net.cn)/uni-app开发框架教程-学习视频教程-腾讯课堂 (qq.com)

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台。

1.1组件——>模板层（分基础组件和扩展组件/外部插件）

1.1.1基础组件内置直接引用：

在官网直接查看或者由官网示例小程序感受
uni组件快捷键编写：u+组件首字母
在这里插入图片描述

1.1.2扩展组件/外部插件

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

自定义easycom配置的示例
如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-