首先理解uni-app文件结构

components	uni-app组件目录，放可复用的组件
pages	业务页面文件存放的目录
static	存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
App.vue	应用配置，用来配置App全局样式以及监听 应用生命周期
main.js	Vue初始化入口文件，详见
mainfest.json	配置应用名称、appid、logo、版本等打包信息，详见
pages.json	配置页面路由、导航条、选项卡等页面类信息，详见
package.json	增加uni-app扩展节点，可实现自定义条件编译平台，详见
uni.scss	为了方便整体控制应用的风格。如按钮颜色、边框风格，详见
vue.config.js	一个可选的配置文件，详见

什么是*.vue文件

首先，用 vue-cli 脚手架搭建的项目，已经遇到了很多，如 index.vue 或者 App.vue 这一的文件了。如果是初次接触 vue 开发的同学，可能之前没有见过这个东西。*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。

其中 <template> 和 <style> 是支持用预编译语言来写的。

在项目的开发中都使用scss 预编译

以上就是一个简单的 *.vue 文件的基本结构。

template 部分

*.vue 也称为 vue 组件。首先，一个 vue 组件， template 则代表它的 html 结构，需要注意的是 必须在里面方置一个 html 标签来包裹所有的代码。

style部分

这里比较简单，就是针对 template 里内容出现的 html 元素写一些样式。这里使用@import的形式。

script部分

还会出现如上的引用，其中orderItem是指在其他地方写好的组件，from是组件的位置

我们要把引用的组件给申明到 components 里面去，如图这样就可以在template中使用

其中需要注意的是data中的list，给一个 list 的空数组数据。在 template 中，可以使用 this.list 来使用数据

onLoad 表示组件加载完成时，需要执行的内容。比如这里，让组件在加载完成时，我们可以让其执行一个函数，只需要使用this.handleGoOrder()即可。另外onLoad是vuejs中的勾子函数之一。

methods是这个组件的方法，也可以说是函数。比如，上面的代码就表示，组件自定义了一个叫 handleGoOrder() 的方法函数。

我们可以使用<orderItem></orderItem>的方式引用组件

Vue props用法详解

组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为：

props down, events up

父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。

发现一篇好的介绍props的文章：https://blog.csdn.net/qingyulove/article/details/81613319

vue中还有许多参数如：

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择（图中有体现）

mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

在vue转换成uni-app中的注意事项，也是在uni-app中的注意事项

标签代码处理

• div 改成 view
• span、font 改成 text
• a 改成 navigator
• img 改成 image
• select 改成 picker
• iframe 改成 web-view
• ul、li没有了，都用view替代

js代码处理

在uni-app中需要使用特定的api

css代码处理

• 不支持 *选择器
• 没有body元素选择器，改用page元素选择器。（编译到非H5时，编译器会自动处理。所以不改也行）
• div等元素选择器改为view、span和font改为text、a改为navigator、img改为image...（编译到非H5时，编译器会自动处理。所以不改也行）
• 不同端的浏览器兼容性仍然存在，避免使用太新的css语法，否则发布为App时，Android低端机（Android 4.4、5.x），会有样式错误。当然在App端也可以引用x5浏览器内核来抹平浏览器差异。