为了实现微信小程序、原生App的跨端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范： ## 页面规范 - Vue 单文件组件 (SFC) 规范 .vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块` <template>、<script> 和 <style>`，还允许添加可选的自定义块： ``` <template> <div>{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style> <custom1> This could be e.g. documentation for the component. </custom1> ``` vue-loader 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。 vue-loader 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式： ``` <style> /* write Sass! */ </style> ``` 更多细节可以在使用预处理器中找到。 ## 语言块 ## 模板 **每个 .vue 文件最多包含一个 `<template>` 块。** 内容将被提取并传递给 vue-template-compiler 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从 `<script> `导出的组件中。 ## 脚本 ## 每个 .vue 文件最多包含一个 `<script> `块。 这个脚本会作为一个 ES Module 来执行。 它的默认导出应该是一个 Vue.js 的组件选项对象。也可以导出由 Vue.extend() 创建的扩展对象，但是普通对象是更好的选择。 任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 `<script> `块的内容中。 ## 样式 默认匹配：/\.css$/。 **一个 .vue 文件可以包含多个 `<style>` 标签。** `<style>` 标签可以有 scoped 或者 module 属性 (查看 scoped CSS和 CSS Modules) 以帮助你将样式封装到当前组件。具有不同封装模式的多个 `<style>` 标签可以在同一个组件中混合使用。 任何匹配 .css 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 `<style> `块的内容中。 # 自定义块 可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求，例如 `<docs>` 块。vue-loader 将会使用标签名来查找对应的 webpack loader 来应用在对应的块上。webpack loader 需要在 vue-loader 的选项 loaders 中指定。 更多细节，查看自定义块。 # Src 导入 如果喜欢把 .vue 文件分隔到多个文件中，你可以通过 src 属性导入外部文件： ``` <template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script> ``` 需要注意的是 src 导入遵循和 webpack 模块请求相同的路径解析规则，这意味着： 相对路径需要以 ./ 开始 你可以从 NPM 依赖中导入资源： ``` <!-- import a file from the installed "todomvc-app-css" npm package --> <style src="todomvc-app-css/index.css"> 在自定义块上同样支持 src 导入，例如： <unit-test src="./unit-test.js"> </unit-test> ``` **组件标签靠近微信小程序规范** 详见uni-app 组件规范，注意：不能使用标准HTML标签，也不能用js对dom进行操作 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范 数据绑定及事件处理靠近 Vue.js 规范，同时补充了App及页面的生命周期 为兼容多端运行，建议使用flex布局进行开发 （flex 布局教程 http://www.hcoder.net/tutorials/info_183.html）。 **目录结构** 一个uni-app工程，默认包含如下目录及文件： pages.json：配置页面路由、导航条、选项卡等页面类信息，详见。 manifest.json：配置应用名称、appid、logo、版本等打包信息，详见。 App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期。 main.js：Vue初始化入口文件 static目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此 pages目录：业务页面文件存放目录 components目录：组件文件存放目录