vux+koa2+mongodb 项目的环境搭建

vux+koa2+mongodb 项目的环境搭建

一. 搭建vux脚手架

1. 准备

1.安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，
node -v//显示node版本
npm -v //显示npm版本号
2.nmp镜像
Cmd命令行中输入
通过npm使用
npm config set registry https://registry.npm.taobao.org
通过cnpm使用
npm install -g cnpm –registry=https://registry.npm.taobao.org
3.安装vue脚手架工具vue-cli
npm install -g vue-cli
vue –version //显示版本

2. 搭建

在所工作的目录下，搭建项目
vue init airyland/vux2 项目名称

cd 项目名称
npm i
npm run dev
访问地址 localhost:8080

3. 访问后台请求

安装 axios
npm i axios

4.使用store

安装vuex
npm i vuex
（项目已经安装过了）
并创建文件
store文件夹，store.js

1. main.js添加

//引入vuex文件
import store from './store/store.js'//注意文件路径

2. store文件夹下的store.js

//引入我们的vue和vuex。
import Vue from 'vue'
import Vuex from 'vuex'
//使用我们vuex，引入之后用Vue.use进行引用
Vue.use(Vuex);

二. 搭建koa2

1. 快速搭建

安装koa-generator
在终端输入：
$ npm install -g koa-generator
在你的工作目录下，输入：
$ koa2 项目名称
$ cd 项目名称
$ npm install
1.3 启动项目
$ npm start
访问地址 localhost:3000

2.解决前后端跨域问题

因为前端框架端口是8080，后端是3000，所以请求需要跨域。
安装koa2-cors
npm i koa2-cors

app.js 文件添加

var cors = require('koa2-cors');
app.use(cors());

3.mongoose安装

为了使用mongodb数据库
npm i mongoose
app.js写入

//数据结构表存入数据库
require('./lib/dbHelper')
//连接数据库
mongoose.connect(
  `mongodb://localhost:27017/hr`
);
mongoose.connection.on('open', function () {
  console.log('数据库连接成功!');
});

三. 搭建mongodb

正常下载安装mongodb，官网链接
配置环境变量。
新建一个文件夹，放数据库表等信息 如 D:\My_DB。
启动mongodb
mongod --dbpath D:\My_DB