使用淘寶映象cnpm安裝Vue.js

簡介：

Vue.js是前端一個比較火的MVVM框架，是一套構建使用者介面的漸進式框架。

Vue 只關注檢視層， 採用自底向上增量開發的設計。

Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件

安裝方式：

第一種：使用npm，比較適合比較大型的應用，由於npm是國外的，使用起來比較慢；

第二種：使用淘寶的cnpm映象來安裝vue；

步驟：

首先我們需要下載npm,安裝好了node.js，就安裝了npm。然後，再利用npm安裝淘寶映象的cnpm。

1、開啟cmd，輸入命令

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

安裝Vue需要npm的版本大於3，所以我們先升級一下npm，輸入命令

cnpminstall cnpm -g

安裝vue，輸入命令

cnpminstall vue

安裝vue-cli，輸入命令

cnpm install--global vue-cli

這時，環境已經搭建好了。

2、指定存放專案的路徑，執行命令

vue init webpack"專案名稱"

進入專案所在的目錄，執行命令

cd"專案所在資料夾“

然後依次執行下面的命令

cnpm install

cnpm run dev

中間省略部分截圖。。。。

成功後我們進入瀏覽器，輸入localhost:8080會展示下面的頁面。

專案目錄：

（1） build // 專案構建(webpack)相關程式碼
　　build.js // 生產環境構建程式碼
　　check-versions.js // 檢查node&npm等版本
　　dev-client.js // 熱載入相關
　　dev-server.js // 構建本地伺服器
　　utils.js // 構建配置公用工具
　　vue-loader.conf.js // vue載入器
　　webpack.base.conf.js // webpack基礎環境配置
　　webpack.dev.conf.js // webpack開發環境配置
　　webpack.prod.conf.js // webpack生產環境配置
（2）config// 專案開發環境配置相關程式碼
　　dev.env.js // 開發環境變數
　　index.js //專案一些配置變數
　　prod.env.js // 生產環境變數
（3）node_modules// 專案依賴的模組
（4）src// 原始碼目錄
　　assets// 資源目錄 logo.png
　　components// vue公共元件 Hello.vue
　　router// 前端路由 index.js// 路由配置檔案
　　App.vue// 頁面入口檔案（根元件）
　　main.js// 程式入口檔案（入口js檔案）
（5）static// 靜態檔案，比如一些圖片，json資料等
　　.gitkeep
（6）剩餘
　　.babelrc// ES6語法編譯配置
　　.editorconfig// 定義程式碼格式
　　.gitignore// git上傳需要忽略的檔案格式
　　index.html// 入口頁面
　　package.json// 專案基本資訊
　　README.md// 專案說明

備註：這是我邊學習邊總結，如果有錯誤，歡迎大家指出，我會及時改正，謝謝！