koa和vue專案前後端聯動啟動
阿新 • • 發佈:2018-12-29
最近學習前後端的全棧專案,頭大的要命,慢慢發現,自己越用功想研究一門技術,越發現不懂的慢慢越多,真是有點打擊信心。
好在,今天終於把前後端的基礎框架搭起來了,後續文章分享學習經驗。
今天分享是前後端聯動啟動
首先安裝concurrently
然後安裝vue專案
vue -V 我現在已經裝上3.0版本了。
vue create client
按照提示把vue-router vuex eslint sass等安裝好,自動安裝依賴包,稍等一會,裝好前端vue專案後,我們啟動一下,8080埠跑起來就ctrl+c退出前端
接下來,修改前端vue的package.json
{ "name": "client", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "start": "npm run serve" }, "dependencies": { "vue": "^2.5.17", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.1.1", "@vue/cli-plugin-eslint": "^3.1.1", "@vue/cli-service": "^3.1.1", "@vue/eslint-config-standard": "^4.0.0", "babel-eslint": "^10.0.1", "eslint": "^5.8.0", "eslint-plugin-vue": "^5.0.0-0", "node-sass": "^4.9.0", "sass-loader": "^7.0.1", "vue-template-compiler": "^2.5.17" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
注意,主要增加了start命令 npm run serve
接下來,修改後端koa的配置
也是同樣開啟package.json
{ "name": "resfulapi", "version": "1.0.0", "description": "resfulAPI", "main": "app.js", "scripts": { "client-install": "npm install --prefix client", "client": "npm start --prefix client", "start": "node app.js", "server": "nodemon app.js", "lint": "eslint --fix --ext .js,.vue", "dev": "concurrently \"npm run server\" \"npm run client\"" }, "author": "", "license": "ISC", "dependencies": { "art-template": "^4.13.2", "axios": "^0.18.0", "babel-eslint": "^10.0.1", "bcrypt": "^3.0.2", "concurrently": "^4.1.0", "eslint": "^4.15.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-config-standard": "^12.0.0", "eslint-plugin-html": "^5.0.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^4.0.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^4.7.1", "gravatar": "^1.8.0", "jsonwebtoken": "^8.4.0", "koa": "^2.6.2", "koa-art-template": "^1.1.1", "koa-bodyparser": "^4.2.1", "koa-json": "^2.0.2", "koa-jwt": "^3.5.1", "koa-passport": "^4.1.1", "koa-router": "^7.4.0", "koa-static": "^5.0.0", "mongoose": "^5.3.15", "passport": "^0.4.0", "passport-jwt": "^4.0.0", "passport-local": "^1.0.0", "vue": "^2.5.2", "vue-router": "^3.0.1" } }
注意,也是修改了啟動命令,主要是這三條
"client-install": "npm install --prefix client" 聯動啟動前,先安裝client目錄下的vue專案的npm包
"client": "npm start --prefix client", 聯動啟動前先啟動client目錄下npm start ,看package,json裡,我們已經配置了npm start
"dev": "concurrently \"npm run server\" \"npm run client\""
聯動啟動前後端專案
這樣,我們用concurrently來聯動啟動我們的前後端專案,npm run dev,快樂的啟動吧!
最近腦子感覺不夠用,一個人默默的啃程式碼,寫下來,防止以後再找資料