VueJS搭建簡單後臺管理系統框架(一)環境搭建

作這份筆記的時候，Vue.js仍是1.0，10月份Vue已經升級到2.0，這邊也進行相應的更新，用Vue2.0進行一個簡單的環境搭建
餓了麼也恰好開源了其基於Vue.js的UI框架element-ui

傳送門

• Node
• npm | nrm
• Vue | Guide
  
• Vue-router | Documentation
• Vue-resource
• element-ui | Documentation
• Bootstrap | Font Awesome & documentation
• CNode社區 | Node入門

1. 環境搭建

因爲辦公環境是在Windows下開發，因此仍是選擇在Windows進行Vue.js的開發，使用NodeJS環境進行編譯，打包等

1.1 NodeJS及NPM安裝

1.1.1 NodeJS下載

在NodeJS官網中下載對應的NodeJS版本https://nodejs.org/en/
下載完成後進行安裝，NodeJS安裝完成後，對應的NPM也會安裝完成，安裝完成後須要設置NodeJS到環境變量中，在CMD命令行鍵入如下代碼，驗證NodeJS及NPM是否安裝正確 目前最新版本4.6.0對應npm版本2.15.9，能夠手動升級到最新版本npm

> node -v
v4.6.0
> npm -v
v2.15.9

npm升級到最新版本的方法：
切換路徑到nodejs安裝目錄下（如：c:\program files\nodejs）,執行如下命令:
npm install npm@latest -g

1.1.2 安裝nrm

因爲npm的鏡像資源在國外，訪問速度慢，能夠使用npm安裝nrm，來管理npm的鏡像資源

> npm install -g nrm

使用nrm ls命令查看可用的資源

使用 nrm use ***選擇要使用的鏡像，如nrm use taobao

1.1.3 安裝打包工具webpack

使用

npm install -g webpack

安裝webpack

1.2 使用Vue的官方命令行工具搭建一個簡單的VueJS應用

1.2.1 安裝vue-cli

使用命令

npm install -g vue-cli

安裝Vue的官方命令行工具vue-cli

1.2.2 用vue-cli搭建一個基本的工程

使用如下命令,建立一個名爲vue-test的前端項目

vue init webpack vue-test

此致環境的搭建基本完成