vue.js單文件組件入門(mén)筆記

<a href="#nodejs">nodeJs</a>
- <a href="#nodeJs安裝">nodeJs安裝</a>
- <a href="#nodeJs模塊">nodeJs模塊</a>
<a href="#npm介紹">npm介紹</a>
- <a href="#cnpm">cnpm</a>
- <a href="#npm常用指令介紹">npm常用指令介紹</a>
  - <a href="#npm-init">npm init</a>
    - <a href="#packagejson文件">package.json文件</a>
  - <a href="#npm-install">npm install</a>
- <a href="#webpack">webpack</a>
<a href="#Vuejs">Vue.js</a>
- <a href="#Vue-cli">Vue-cli</a>
- <a href="#vuejs基礎(chǔ)">vue.js基礎(chǔ)</a>
- <a href="#項(xiàng)目實(shí)戰(zhàn)">項(xiàng)目實(shí)戰(zhàn)</a>
  - <a href="#目錄分析">目錄分析</a>
- <a href="#vue-resource">vue-resource</a>
- <a href="#Vue-router">Vue-router</a>
- <a href="#vuex">vuex</a>
  - <a href="#Getters">Getters</a>
  - <a href="#Mutations">Mutations</a>
  - <a href="#Actions">Actions</a>
  - <a href="#Modules">Modules</a>

本文目的是介紹如何使用vue.js去構(gòu)建一個(gè)單頁(yè)面應(yīng)用。

nodeJs</a>

nodeJs安裝</a>

Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime)

nodejs內(nèi)置npm银萍。

node -v

npm -v

查看是否安裝成功以及查看版本號(hào)

nodeJs模塊</a>

教程：http://www.runoob.com/nodejs/nodejs-tutorial.html
demo：https://git.oschina.net/MRLH/nodeJsLearning.git
見(jiàn)work-07
了解一下export和import

npm介紹</a>

官網(wǎng)：https://www.npmjs.com/
官方文檔：https://docs.npmjs.com/getting-started/what-is-npm
簡(jiǎn)易漢化：http://www.reibang.com/nb/10645887

NPM的全稱(chēng)是Node Package Manager 变勇，是一個(gè)NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)砖顷。

我們要先配置npm的全局模塊的存放路徑以及cache的路徑贰锁。

npm config set prefix “D:\nodejs\node_global”

以及

npm config set cache “D:\nodejs\node_cache”

增加NODE_PATH(全局變量模塊存放位置)
打開(kāi)系統(tǒng)對(duì)話(huà)框，“我的電腦”右鍵“屬性”-“高級(jí)系統(tǒng)設(shè)置”-“高級(jí)”-“環(huán)境變量”滤蝠。
進(jìn)入環(huán)境變量對(duì)話(huà)框豌熄，在系統(tǒng)變量下新建”NODE_PATH”，輸入”D:\nodejs\node_global\node_modules”物咳。（ps：這一步相當(dāng)關(guān)鍵锣险。）

由于改變了module的默認(rèn)地址，所以上面的用戶(hù)變量都要跟著改變一下（用戶(hù)變量”P(pán)ATH”新增“%NODE_PATH%;”）览闰，要不使用module的時(shí)候會(huì)導(dǎo)致輸入命令出現(xiàn)“xxx不是內(nèi)部或外部命令芯肤，也不是可運(yùn)行的程序或批處理文件”這個(gè)錯(cuò)誤。

cnpm</a>

由于國(guó)內(nèi)有墻的原因压鉴，使用npm下載包相當(dāng)慢崖咨，有可能因?yàn)榫W(wǎng)速原因?qū)е孪螺d包失敗。所以推薦使用cnpm油吭，下載源為淘寶的鏡像击蹲。
http://npm.taobao.org/

支持 npm 除了 publish 之外的所有命令署拟。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

npm常用指令介紹</a>

下面的npm皆可用cnpm替代

npm init</a>

執(zhí)行該指令將會(huì)在當(dāng)前文件夾下生成一個(gè)package.json文件。這個(gè)文件類(lèi)似于maven的pom.xml文件歌豺。用于管理包推穷，以及記錄當(dāng)前項(xiàng)目的一些描述信息。

package.json文件</a>

dependencies里面放的是項(xiàng)目依賴(lài)的包类咧。如vue
devDependencies里面放的是開(kāi)發(fā)時(shí)編譯需要的包馒铃。如babel，[xx]-loader痕惋。

npm install</a>

安裝命令
簡(jiǎn)寫(xiě)：npm i

npm install

會(huì)安裝package.json文件中聲明的包区宇，會(huì)把包安裝到當(dāng)前文件夾的node_modules目錄中。

npm install packagename

安裝指定名字的包

npm install packagename -g

安裝指定名字的包到全局值戳，這個(gè)一般是用于安裝需要在命令行使用到的包萧锉，如webpack。

npm install packagename --save

安裝項(xiàng)目依賴(lài)的包述寡，也就是項(xiàng)目中會(huì)用到的包，如vue叶洞。同時(shí)在package.json文件的dependencies中添加該包的描述鲫凶。

npm i packagename --save-dev

安裝編譯時(shí)需要的包，如babel衩辟，[xx]-loader等等螟炫。同時(shí)在package.json文件的devDependencies中添加該包的描述。

npm uninstall packagename

用于卸載包

webpack</a>

用于打包的一個(gè)工具

一些樣例：
https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

babel</a>

用于把高版本的js語(yǔ)法轉(zhuǎn)換為低版本語(yǔ)法艺晴，讓項(xiàng)目中可以使用最新的js語(yǔ)法昼钻。

ECMAScript 6語(yǔ)法學(xué)習(xí)：http://es6.ruanyifeng.com/

eslint</a>

代碼質(zhì)量管理工具，用來(lái)避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格封寞，這個(gè)在項(xiàng)目中可以關(guān)閉然评。

Vue.js</a>

Vue 不支持 IE8 以及更低版本瀏覽器。

Vue-cli</a>

參考文檔：http://www.reibang.com/p/f8e21d87a572
專(zhuān)門(mén)用來(lái)下載項(xiàng)目模板的狈究，項(xiàng)目搭建好就不需要了碗淌。

npm i -g vue-cli

安裝vue-cli

vue -V

檢查是否安裝成功

vue init webpack my-project

初始化vue工程，或者說(shuō)是創(chuàng)建模板項(xiàng)目抖锥。
項(xiàng)目名為my-project

cd my-project
npm install

安裝項(xiàng)目依賴(lài)

npm run dev

運(yùn)行項(xiàng)目

npm run build

編譯打包項(xiàng)目亿眠，打包到dist目錄

vue.js基礎(chǔ)</a>

官方文檔：https://cn.vuejs.org/v2/guide/
一些demo: https://git.oschina.net/MRLH/vueLearning.git
個(gè)人見(jiàn)解：和el表達(dá)式很像，和anglarJs更像磅废。
注意事項(xiàng)：注意對(duì)象屬性的添加和數(shù)組中元素的添加纳像。
見(jiàn)：https://cn.vuejs.org/v2/guide/list.html#數(shù)組更新檢測(cè)
見(jiàn)：https://cn.vuejs.org/v2/guide/reactivity.html#變化檢測(cè)問(wèn)題

項(xiàng)目實(shí)戰(zhàn)</a>

demo地址：https://git.oschina.net/MRLH/vue-time-tracker.git
demo詳解: http://blog.csdn.net/sinat_17775997/article/details/55097003

目錄分析</a>

build，config拯勉，test放一些配置文件竟趾，一般不進(jìn)行修改憔购。
node_modules放置項(xiàng)目依賴(lài)的包文件。
dist目錄放置打包后生成的文件潭兽，發(fā)布時(shí)只需要dist文件夾
static放置靜態(tài)資源不會(huì)參與打包倦始，一般放置一些圖片資源，不要放樣式文件到這個(gè)里面山卦，shotcut文件放這個(gè)目錄里面鞋邑。
src目錄放置源碼
index.html一般不做修改。

assets目錄用來(lái)放置資源文件
components放置vue組件
router用于控制界面跳轉(zhuǎn)
store用于存儲(chǔ)數(shù)據(jù)账蓉，以及操作數(shù)據(jù)
views用于存放vue界面

views和components存放的東西是沒(méi)有區(qū)別的枚碗，都是vue組件，只是根據(jù)作用不同進(jìn)行區(qū)分的铸本。

vue-resource</a>

官方建議使用axios
main.js

import axios from 'axios'
Vue.prototype.$http = axios

其他地方使用的話(huà) 如同使用 vue-resource 一樣

this.$http.get(URL).then(response => {
    // success callback
}, response => {
    // error callback
})

Vue-router</a>

官方文檔：https://router.vuejs.org/zh-cn/
一個(gè)vue實(shí)例只有一個(gè)vue-router肮雨。
通常一個(gè)

router-link</a>

<router-link to="src">name</router-link>

用于頁(yè)面導(dǎo)航，效果約等于<a>標(biāo)簽

router-view</a>

<router-view></router-view>

路由匹配到的組件將渲染在這里

vuex</a>

官方文檔：https://vuex.vuejs.org/zh-cn/

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式箱玷。

state怨规，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
view锡足，以聲明方式將state映射到視圖波丰；
actions，響應(yīng)在view上的用戶(hù)輸入導(dǎo)致的狀態(tài)變化舶得。

以下是一個(gè)表示“單向數(shù)據(jù)流”理念的極簡(jiǎn)示意：

單向數(shù)據(jù)流

但是掰烟，當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡(jiǎn)潔性很容易被破壞：

多個(gè)視圖依賴(lài)于同一狀態(tài)沐批。
來(lái)自不同視圖的行為需要變更同一狀態(tài)纫骑。

Vuex 可以幫助我們管理共享狀態(tài)

vuex

State</a>

用于存放數(shù)據(jù)

取數(shù)據(jù)方法：

this.$store.state.xxx

Getters</a>

用于存放處理后的數(shù)據(jù)