vue.js初識（一）

vue.js安裝

官網：http://cn.vuejs.org/

官方安裝介紹：http://cn.vuejs.org/v2/guide/installation.html

MVVM框架：View、ViewModel、Model

npm安裝參考文章：http://www.cnblogs.com/shhnwangjian/p/6559732.html

基於網絡緣由，建議將 npm 的註冊表源設置爲國內的鏡像，能夠大幅提高安裝速度。

本文使用淘寶鏡像，使用 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm

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

安裝vue-cli命令行工具

# 全局安裝 vue-cli
$ cnpm install --global vue-cli
# 建立一個基於 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ cnpm install
$ cnpm run dev

• 代碼風格檢查：eslint
• 構建工具：webpack
• 前端路由：vue-router
• 狀態管理：vuex
• 服務端通信：vue-resource

項目my-project目錄中package.json文件記錄項目的詳細信息，包含它的依賴以及開發者的依賴，這些依賴是下載webpack模板使用到的。

經過cnpm install命令，會將全部的依賴放到項目的node_modules目錄下。

經過cnpm run dev命令啓動項目，它實際上也是用的package.json文件中scripts這段內容。

 

yarn

官網：https://yarnpkg.com/en/docs/install#windows-tab

windows下npm安裝方式

npm install -g yarn

yarn 原倉庫 包下載不 穩定，須要設置倉庫爲 tnpm 或在 cnpm

yarn config set registry 「https://registry.npm.taobao.org」

 

vue頁面

 

 

核心思想

數據驅動和組件化

一、數據驅動

二、組件化

組件設計原則：

• 頁面上每一個獨立的可視\可交互區域視爲一個組件；
• 每一個組件對應一個工程目錄，組件所須要的各類資源在這個目錄下就近維護；
• 頁面不過是組件的容器，組件能夠嵌套自由組合造成完整的頁面。

 

Vue-cli介紹

Vue-cli是Vue的腳手架工具。