最近在構建vue項目，整體已經完成，今天來總結總結。
1.項目搭建
由於是vue+node項目，所以本機必須裝有nodejs 以及npm。開發環境的搭建呢網上教程一大堆，不會的同學可以自己去看看。這里我想強調一下的是，在安裝過程中有一個jslint選項（JavaScript驗證工具），我的建議是選擇NO，如果你有非常專業的js代碼風格，可以使用，當然新手還是算了吧。
2.項目結構
項目構建完了以后的結構就是這個樣子
*不包括dist文件夾（項目使用webpack打包后的文件夾，構建的項目中不包括此文件夾）
其中的index.html文件是這個前端的頁面入口（單頁面應用）
接下來主要的開發工作都是在src目錄下
src目錄結構如上圖
1.assets是項目的所有圖片文件
2.components是所有的模塊化組件，common為公共組件
3.jsdao下為公用的js方法
4.router為vue-router文件
5.vuex為狀態管理的文件夾
6.App.vue是頁面最外層的頂層組件
7.main.js主要是new一個vue對象
好的，接下來我們一一細說
1.assets文件沒有什么可說的了
2.components也就是組件
分為以下幾個部分
2.1組件的創建
新建一個.vue文件，新建完的文件包括三個部分：<template>(組件的html結構)，<script>(組件的js文件)，<style>（組件的樣式文件）
*在<template>標簽內只能有一個父級標簽，<style>標簽有一個屬性 scoped設置這個標簽可以使<style>內部定義的樣式只在該組件內部有效
最核心的東西來了就是script標簽
一般情況下script內部的格式比較固定，如下
export default{
name:"puductInfo",
props:['model'],
filters: {
turnTime: function(date){
return new Date(+date).Format("yyyy-MM-dd");
},
retimgUrl: function(url){
return "../../static/images/" + url;
}
},
data () {
return{
imgdata:"puduct.jpg"
}
},
methods:{
addpuduct: function(mod){
this.$store.commit("setModal", mod);
this.$store.commit("setShow", true);
}
}
}
這種寫法屬於ES6的語法，當然了作為一個熱愛新技術的前端，我推薦大家這么做，其中的參數我來做詳細解釋
name:為該組件的名字（在組件內部調用自己本身時有用）；
props:父子通信的媒介（參數為數組）；
filters:過濾器常用作處理數據格式，圖片路徑等，用法：是在filters內定義一個處理的函數，如上面代碼中的turnTime，調用方式為{{model.lasttime | turnTime(model.lasttime)}}或者<img :src= "imgdata | retimgUrl(imgdata)" alt="商品圖片"/>
data:為組件的數據 *注意寫法
methods：為組建的方法
其中還有以下這些參數比較常用：
components：定義子組件
寫法如下：
import myTree from './common/treeMenu.vue'
import userList from './common/userList.vue'
import puductInfo from './common/puductInfo.vue'
components: {
myTree,userList,puductInfo
}
然后就可以把components內定義的組件當做標簽來使用
mounted：el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子，其實就是該模塊加載完成以后調用
watch：監聽數據對象或者方法的值的變化*如果數據為對象的話要監聽其鍵值對的變化需要添加deep屬性
好了，今天介紹完了整體以及組件內部的結構，后期我會分別介紹，vuex, vue-resouce,以及組件之間的通信等