《Vue.js 2.x + Express 4.x + Mongodb》探索：（一）快速搭建項目

第一節:快速搭建項目

1.建立Vue

這裏咱們直接使用vue-cli

$ npm install --global vue-cli // 全局安裝 vue-cli
$ vue init webpack my-project // 建立一個基於 webpack 模板的新項目
$ cd my-project
$ npm run dev

---

2.建立Express

經過應用生成器工具 express 能夠快速建立一個應用的骨架

$ npm install express-generator -g

---

3.從新設置端口及合併package.json

Vue及Express項目生成完成以後，我是這樣作的：

1. 將express目錄移動至Vue-cli生成的項目下，重命名爲server
2. 將sever的package.json中的dependencies所有複製粘貼至vue-cli的dependencies中
3. 修改最外層目錄下的package.json的script

"scripts": {
    "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
    "client": "npm run dev",
    "server": "node ./server/bin/www",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
}

注意：因爲以後會建立Api，咱們會給dev-server加入代理proxTable。而且爲了便於修改，會將server的端口配置，及mongodb的配置寫在config/index.js中，逐漸完善。

---

4.啓動項目

下載依賴

npm install

啓動網頁

npm run client

啓動服務

npm run server

github源碼
項目快速搭建目前就是這樣，因爲沒接觸事後臺在業務邏輯上須要花費時間在網上學習一下，但願在下一章完成登錄和註冊，歡迎提出問題，而且共同窗習 ^_^。