VUE-CLI腳手架的搭建過程

1、安裝node js

　　下載地址：http://nodejs.cn/download/
2、安裝完成后運行Node.js command prompt（node -v查看安裝版本）

　　
3、安裝npm（由於現在版本的nodejs已經集成npm所以無需安裝，可以用npm -v 查看版本）

　　
4、注冊cnpm來代替npm
　　使用命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

　　如果你發現你安裝成功了，使用cnpm卻發現找不到命令，那么就是你的環境變量有問題，在環境變量里面的path添加你node的安裝路徑就行，比如";C:\Program Files\nodejs\node_modules"

5、安裝vue腳手架vue-cli
　　命令：cnpm install -g vue-cli

　　安裝成功后可以用 vue -V 查看vue版本
6、cd到對應的目錄下初始化vue項目
　　命令：vue init webpack my-project
　　　　　　Project name 項目名 
　　　　　　Project description 項目名描述 
　　　　　　Author 作者郵箱 
　　　　　　Use ESLint to lint your code? 是否需要ESlist語法檢查 
　　　　　　Setup unit tests with Karma + Mocha? 是否需要單元測試 
　　　　　　Setup e2e tests with Nightwatch? Yes是否需要e2e測試 
7、package.json為項目依賴資源，如果要運行這個項目需要使用cnpm install 安裝依賴項（直接在項目文件夾路徑下執行）
8、使用命令cnpm run dev啟動項目，瀏覽器會打開 http://localhost:8080/#/ 看到以下效果

      

　　開發時屬於熱部署狀態，代碼保存后瀏覽器會自動刷新，錯誤提示也非常友好。

 

9、編譯打包 cnpm run build

　　會編譯打包到項目dist文件夾下，然后我們就可以部署到服務器上（注意：如果你直接打開index.html，可能頁面會是一片空白，這是由於你引用的js路徑有問題）

     

10、安裝axios插件　

　　cnpm install axios//生產環境

　　npm install --save axios vue-axios//測試環境
　　兩者都下載
　　在 main.js 中寫入以下內容：

　　import Vue from 'vue'
　　import axios from 'axios'
　　import VueAxios from 'vue-axios' 

　　Vue.use(VueAxios, axios)
　　在頁面中的用法：

　　Vue.axios.get(api).then((response) => {
  　　console.log(response.data)
　　})
　　this.axios.get(api).then((response) => {
  　　console.log(response.data)
　　}) 
　　this.$http.get(api).then((response) => {
  　　console.log(response.data)
　　})

　　或者在 main.js 中寫入以下內容：

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

　　使用頁面

　　this.$axios.get(api).then((response) => {
  　　console.log(response.data)
　　})

11、安裝jquery依賴

　　npm install jquery --save

　　在 main.js 中寫入以下內容：
　　　　import $ from 'jquery' 
12、腳手架目錄介紹