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> ```