类别:uni-app文档

日期:2020-11-17 浏览:2366 评论:0

为了实现微信小程序、原生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目录:组件文件存放目录


本文标题:uni-app 开发规范及目录结构
本文链接:https://vtzw.com/post/439.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。