vuejs 自定義了一種.vue文件，可以把html, css, js 寫到一個文件中，從而實現了對一個組件的封裝， 一個.vue 文件就是一個單獨的組件。由于.vue文件是自定義的，瀏覽器不認識，所以需要對該文件進行解析。 在webpack構建中，需要安裝vue-loader 對.vue文件進行解析。在 sumlime 編輯器中，我們 書寫.vue 文件，可以安裝vue syntax highlight 插件，增加對文件的支持。

環境搭建完畢，利用vue-router實現了頁面跳轉，那么現在要處理的就是頁面的內容了。

一個頁面可以看作是由各種各樣的組件組成的，大至一個頁面，小至一個按鈕都可以作為一個組件，頁面的組件化可以大大提高代碼的重用性，免除了很多重復性的勞動。vue允許把用戶組件寫成單個的文件，尾綴為.vue，然后再以模塊的方式引入,下面是我的例子：

入口文件：

import Vue from 'vue';import VueRouter from 'vue-router' import Main from'./components/main.vue'import Login from'./components/login.vue'import Content from'./components/content.vue'Vue.use(VueRouter); const routes=[  {path:'/login',component:Login},  {path:'/main',component:Main},  {path:'/main/content',component:Content},  {path:'/',redirect:'/login'}];const router=new VueRouter({    routes  });var app=new Vue({  router,  el:'#app',  template:'<router-view></router-view>'});

這是其中的一個組件content：

<template>  <p class="demo-title">{{msg}}</p></template><script>  export default{    data:function(){      return{msg:"hello"}    }  }</script><style>  .demo-title{color:red;}</style>

這里用上了ES6的模塊加載功能：export和import，在組件中使用export，可以把組件定義為一個模塊，import則可以把已定義的組件，這樣就能方便處理模塊間的依賴關系。

一個vue文件一般來說有三個元素：template（html模板），script，style，我們在script中編寫組件所需要的依賴和交互代碼，并用export將整個組件以模塊的方式定義。在script中，組件的編寫方法與在vue對象中的編寫組件的方法并無二致，所以也可以把template寫進script里面。

一個組件對應一個文件，這樣子就可以在組件內部處理組件自身的內容，css也可以只針對組件生效，十分方便。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。