搭建一個VUE+Express先後端分離的開發環境

前置條件 請確保安裝了node。window+R打開cmd，輸入 node -v  查看node版本。 建議使用淘寶鏡像代替npm，確保安裝速度，接下來都會使用cnpm 1、搭建後臺Express環境 一、安裝環境 新建一個Express文件夾，以後的操做都在這個文件夾裏操做，確保能找到你的項目 在此使用shift+鼠標右鍵打開cmd 全局安裝Express cnpm install express --save   安裝Express應用程序生成器 cnpm install express-generator -g   建立一個名稱爲 myapp 的 Express 應用 express --view=pug myapp   成功的例子： 以後在你的Express文件夾中會有一個myapp的文件夾，這就是咱們的express項目文件 進入myapp安裝依賴   cd myapp   cnpm install   啓動應用 set DEBUG=myapp:* & npm start   成功： 在瀏覽器中輸入 http://localhost:3000/ 以下圖，成功建立了一個express應用 二、發送GET請求 在你的編輯器中打開myapp 目錄：（由於我已經有一個myapp了，因此叫myapp2） 在routes新建一個produce.js   var express = require('express');   var router = express.Router();   /* GET home page. */   router.get('/', function(req, res, next) {   var data={   code:0,   data:{name:'aaa',pwd:'123'},   isSuccess:true,   msg:"請求成功"   }   //將product視圖與指定的對象渲染後輸出到客戶端   res.json(data);   });       module.exports = router;   app.js中添加   var productRouter = require('./routes/product');       app.use('/product', productRouter);   重啓一下應用，瀏覽器輸入 http://localhost:3000/product ，能夠看到請求成功。 2、搭建VUE環境並接受請求 在這裏我使用vue-cli搭建vue環境 打開cmd，安裝vue-vli cnpm install vue-cli -g   進入剛纔建立的Express文件夾，在文件夾用shift+鼠標右鍵或者cd 進入 建立本身的vue項目 vue init webpack vueProject   接下來會讓你選擇，在這裏很少作解釋。一直回車Y便可。 建立成功： myapp是咱們的後端express項目，vueProject是咱們的前端vue項目。大致的框架已經搭建完成了，接下來須要把先後端鏈接起來。 進入vueProject，啓動項目 npm run dev   啓動成功，在瀏覽器輸入 http://localhost:8080/ 安裝axios cnpm install axios   在main.js中引入併發送請求   import axios from 'axios'   var url="http://localhost:3000"   axios.get(url+'/product')   .then(function (response) {   console.log(response);   })   .catch(function (error) {   console.log(error);   });   打開f12能夠看到請求接收成功