為了實現微信小程序、原生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目錄：組件文件存放目錄