一、vue-cli2

1. 全局安装

npm install vue-cli -g

 

1. 局部安装项目

vue init webpack 项目名称

例如：vue init webpack demo1

 

二、express-generator

1.全局安装

npm install express-generator -g

2.express --view=ejs 项目名称

例如：express --view =ejs server

3.安装数据库

npm install mysql

三、server部署步骤

注意：先下载mysql，开启

【1.进入前端目录根目录安装server】

【2.创建db文件夹-> 创建sql.js】

var mysql   =  require('mysql')
// 连接数据库
var connection = mysql.createConnection({host: 'localhost',user: 'miao',password: 'miao',database: 'myemployees'
})module.exports = connection;

【3.server->routes->index.js】

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js')router.get('/api/userInfo', function(req, res, next) {connection.query("select * from departments",function(error,results,fields){console.log(results)res.json(results)})
});router.get('/api/info', function(req, res, next) {res.json([{name:"小明",age:20,address:'北京'},{name:"小敏",age:23,address:'上海'}]);
});module.exports = route

 

 

 

四、前端vue部署步骤

跨域需改代理

【1.该代理：vue前端目录->config->index.js】

// 代理proxyTable: {'/api': {target: 'http://localhost:3000',  // 目标地址changeOrigin:true, // 是否跨域 默认falsePathRewrite: {   // 重写路径'^/api': ''   // 此处为问题原因，正确写法应为：   '^/api': '/api'}}},

【2.安装axios】

cnpm i axios -v
[main.js全局引用]
import axios from 'axios'
Vue.prototype.$axios =axios // 全局注册，使用方法为：this.$axios

【3.组件引用】

 mounted(){this.$axios.get('/api/userInfo').then ((res) => {console.log(res)})}