vue-cli搭建項目及代理路由設置

vue-cli 是vue.js 項目腳手架，使用 vue-cli 可以快速創建 vue 項目，GitHub地址是：https://github.com/vuejs/vue-cli

一、 安裝 node.js

　　1. 安裝node環境，可以直接到中文官網http://nodejs.cn/下載安裝包。

　　最好安裝偶數版本,比如8.9.3V,不要安裝奇數版本,比如9.4.0

　　偶數版本是穩定版本,會長期更新維護,而奇數版本是測試激進版本,不穩定

　　2. 安裝好后,先在window配置node.exe全局環境,詳情百度或:http://blog.csdn.net/pengpegv5yaya/article/details/51885829(網上找的一篇文章)

　　3.全局環境配置好后在cmd命令輸入

　　npm -v  

　　node -v

　　可以查看是否安裝好了node和npm的版本

　　4. 最好安裝一個cnpm的國內鏡像,這個是淘寶的鏡像,可以快速安裝一些npm包

　　在cmd輸入

npm i -g cnpm

 

二、全局安裝 vue-cli和webpack

　在cmd下使用cnpm安裝,會比npm安裝快些,npm是請求的國外服務器安裝npm包

cnpm install -g vue-cli

cnpm install -g webpack

三、生成項目

　　創建一個新的文件夾,在該文件夾下運行cmd,輸入以下代碼

　

vue init webpack project

配置完成后，可以看到目錄下多出了一個項目文件夾，里面就是 vue-cli 創建的一個基於 webpack 的 vue.js 項目

然后進入項目目錄（cd project），使用 cnpm i 安裝依賴

最總的文件目錄結構如下圖

　

四、代理路由設置

　　作為一個前端,可能需要模擬數據接口,發送請求,如果希望發送相對路徑的請求,可以設置代理路由,在發送以'/api'開頭的請求時,跳轉到模擬api接口的url

　　在config文件夾下的index.js文件中,修改dev對象中的proxyTable這個屬性

　　注意:這里還是針對上面已經創建好的vue項目,也可以不用修改,直接請求絕對路徑,或是后台做好的真實api接口

proxyTable: {
      '/api': {
        target: 'http://localhost:8081', // 數據的接口路徑
        changeOrigin: true, // 跨域
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    },