vue單文件組件的構建

　　在很多Vue項目中，我們使用 Vue.component 來定義全局組件，這種方式在很多中小規模的項目中運作的很好。

　　但當在更復雜的項目中，就有了很大的弊端。

　　我們就可以用文件擴展名 .vue的單文件組件來解決這些問題。

　　我們建議你參考 webpack-simple ，只要遵循指示，你就能很快的運行一個用到 .vue 組件 。

 

　　

      這是vue-cli的項目模板。

　　 npm install -g vue-cli
　　 vue init webpack-simple my-project
　　 cd my-project 　　 npm install 　　 npm run dev
　

• npm run dev：Webpack + vue-loader與適當的配置源地圖和熱重新加載。

• npm run build：使用HTML / CSS / JS進行構建。

 

　　在App.vue中引入你項目的頁面（import）

　　

　　export default{

　　　　components:{

　　　　　　"home":Home,
　　　　　　"goods":Goods,
　　　　　　"shopcar":Shopcar
　　}

　　在component中  引用以上組件

　　}

 

　　在項目頁面組件中的結構如下：

　　

 

　　同樣在export default中

　　　　data:fuction(){

　　　　},

　　　　methods:{

　　　　}

　　　　這里要注意一點的是data是一個方法   就這個特殊

　　　　完成后   npm run build  完成打包  代碼會自動壓縮

　　　　index.html    dist文件夾

　　　　這兩個一起拿出來 就可以上線了

　　　　

　　　　以上就是vue單頁面組件的構建