uni-app 介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
通过Hbuilder X创建uniapp项目
运行到微信小程序
菜单：运行->运行到小程序模拟器->微信开发者工具
运行成功后，会自动打开微信开发者工具，并显示小程序
安装uView UI框架
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
安装uView ui 框架
# 如果您的项目是 HBuilderX 创建的，根目录又没有 package.json 文件的话，请先执行如下命令：
# npm init -y
# 安装
npm i uview-ui@2.0.20配置 uView ui 框架
引入uView主JS库
在项目根目录中的
main.js中，引入并使用 uView 的 JS 库，注意这两行要放在import Vue之后。// 引入并使用 uView 的 JS 库 import uView from "uview-ui"; Vue.use(uView);引入uView的全局SCSS主题文件
在项目根目录的
uni.scss中引入此文件。/* 引入uView的全局SCSS主题文件 */ @import 'uview-ui/theme.scss';引入uView基础样式
在App.vue中首行的位置引入，注意给style标签 加入lang="scss"属性<style lang="scss"> /* 引入uView基础样式,注意要写在第一行，同时给style标签加入lang="scss"属性 */ @import "uview-ui/index.scss"; </style>配置easycom组件模式
此配置需要在项目根目录的
pages.json中进行。{ "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] }
使用 uView ui 框架
将pages/index/index.vue的内容替换如下：
<template>
<view>
<u-button type="success">
<text>{{title}} 框架真好</text>
<u-icon name="thumb-up-fill" color="#ffffff" size="28"></u-icon>
</u-button>
</view>
</template>
<script>
// 因为使用了easycom，这里不用import引入，也不需要在components内注册u-button组件。template里就可以直接用
export default {
data() {
return {
title: 'uView ui'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="scss">
</style>使用 uView ui 框架 后，首页效果如下：
课后脑补知识点（uni-app 项目结构,easycom）
uni-app 项目结构
easycom
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构,就可以不用引用、注册，直接在页面中使用。
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。
