vue組件 · hdphp3.0 開源框架手冊

## 介紹開發中使用vue.js庫會為前端工作帶來很大便利，hdphp 內部集成vue.js框架，可以方便擴展前端組件加快開發速度。 [TOC] ## 安裝在項目目錄執行指令 ``` npm install ``` ## 監聽更新我們需要在組件開發中快速實現效果而不是人為每次編譯。 ``` npm run watch ``` ## 生成編譯文件編譯文件會生成 resource/css/app.css 與 resource/js/app.js 兩個文件，需要在頁面中引入這兩表文件才可以使用開發好的組件 ``` npm run build ``` ## 組件開發 vue.js項目文件在 resource/assets目錄中。組件開發在 resource/assets/components目錄中完成，使用和vue-cli方式一樣的。下面是一個 hello.vue 的示例 #### 定義組件 ``` <template> <div class="container"> <h2 class="red">{{msg}}</h2> </div> </template> <script> export default { data() { return { msg: 'Welcome to HDCMS!' } } } </script> <style scoped> .container { border: 1px solid #00f; } .red { color: yellow; } </style> ``` #### 視圖中使用視圖中使用方式如下 ``` <html> <body> <div id="app"> <h1> <hello></hello> </h1> </div> <link rel="stylesheet" href="resource/css/app.css"> <script src="./resource/js/app.js"></script> </body> </html> ```