用vue-cli脚手架工具创建一个基于webpack的Vue项目

安装node

node官网地址：https://nodejs.org/en/
直接选择对应的版本安装就可以了。

查看是否安装成功

node -v
npm -v
cnpm -v

安装cnpm

使用npm安装依赖模块可能会很慢，建议换成[cnpm]

<!-- -g表示全局安装 -->
npm install -g cnpm --registry=http://registry.npm.taobao.org

安装vue-cli脚手架工具

sudo npm install -g vue-cli

创建一个项目文件夹，进入项目目录执行：

<!--my-project是项目名-->
vue init webpack my-project 

生成my-project项目目录

安装vue-resource依赖

一种安装方式先在 package.json 中对应地方添加，然后执行npm install

"dependencies": {
    "vue": "^2.1.10",
    "vue-router": "^2.2.0",
    "vue-resource": "^1.0.3"
},

安装完成后执行,安装依赖(cnpm install 速度比npm快)

npm install

执行如下，进行开发时调试

npm run dev

npm的常用命令

• npm -v #显示版本，检查npm 是否正确安装。
• npm install express #安装express模块
• npm install -g express #全局安装express模块
• npm list #列出已安装模块
• npm show express #显示模块详情
• npm update #升级当前目录下的项目的所有模块
• npm update express #升级当前目录下的项目的指定模块
• npm update -g express #升级全局安装的express模块
• npm uninstall express #删除指定的模块

添加 Express 服务端目录

在项目根文件夹下创建一个 server 文件夹。然后里面创建下面三个文件；
和api目录，api里面建一个文件

db.js——用来添加 mysql 配置

根据mysql的IP，端口，用户名，密码，数据库名称自行修改

代码如下：

// 数据库连接配置
module.exports = {
    mysql: {
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'wxd',
        port: '3307'
    }
}

index.js——Express 服务器入口文件

// node 后端服务器

const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 后端api路由
app.use('/api/user', userApi);

// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');

sqlMap.js——SQL 语句映射文件，供 API 调用

// sql语句
var sqlMap = {
    // 用户
    user: {
        add: 'insert into user(id, name, age) values (0, ?, ?)'
    }
}
    
module.exports = sqlMap;

api/userApi.js —— 测试用 API 示例

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');

// 连接数据库
var conn = mysql.createConnection(models.mysql);

conn.connect();
var jsonWrite = function(res, ret) {
    if(typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操作失败'
        });
    } else {
        res.json(ret);
    }
};
    
// 增加用户接口
router.post('/addUser', (req, res) => {
    var sql = $sql.user.add;    
    var params = req.body;    
    console.log(params);
    conn.query(sql, [params.username, params.age], function(err, result) {    
        if (err) {       
            console.log(err);
        }        
        if (result) {
            jsonWrite(res, result);
        }
    })
});
module.exports = router;

在项目根目录下安装依赖

npm install express mysql body-parser

此时在 server 文件夹下执行node index（这里也可以加载 package.json 中，然后使用 npm 执行）看到 success listen at port:3000……即服务端启动成功。

编写 vue

Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="text" name="username" v-model="userName"> <br>
      <input type="text" name="age" v-model="age"> <br>
      <a href="javascript:;" @click="addUser">提交</a>
    </form>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      userName: '',
      age: ''
    }
  },
  methods: {
    addUser() {
      var name = this.userName;
      var age = this.age;
      this.$http.post('/api/user/addUser', {
        username: name,
        age: age
      },{}).then((response) => {
        console.log(response);
      })
    }
  }
}
</script>

这里注意，如果没有引用vue-resource，this.$http.post是不生效的，还会报错
报错信息：

Uncaught TypeError: Cannot read property 'post' of undefined

解决方案：在main.js中引入vue-resource

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

// 此处需要use后，this.$http.get或者this.$http.post才可以
Vue.use(VueRouter)
Vue.use(VueResource)

整个项目结构:

这时候项目已经基本完成，执行cnpm install命令安装依赖

cnpm install 

执行如下命令，进行开发调试

npm run dev

调试过程中出现问题，可以重新编译代码

npm run build

这里，如果执行npm run dev后，报eslint的错误，可以在build目录的webpack.base.conf.js文件中，把eslint的代码注释掉,重新执行npm run dev就不会报错了：

ESLint是一个QA工具，用来避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：

• 在注释中配置：使用JavaScript注释直接把配置嵌入到文件中。
• 配置文件：使用一个JSON或YAML文件来为全部的目录和它的子目录指定配置信息。

注释的代码如下：

   // 去掉eslint验证，注释掉下面的代码
   // {
   //   test: /\.(js|vue)$/,
   //   loader: 'eslint-loader',
   //   enforce: "pre",
   //   include: [resolve('src'), resolve('test')],
   //   options: {
   //     formatter: require('eslint-friendly-formatter')
   //   }
   // },

执行npm run dev,打开一个页面，然后输入一组数据，点击保存，你会发现会报一个错误：

vue-resource.common.js?e289:1071 POST http://localhost:8080/api/user/addUser 404 (Not Found).

这是由于直接访问8080端口，是访问不到的，这里需要设置一下代理转发。

设置代理与跨域

vue-cli 的 config 目录的index.js文件中有一个proxyTable参数，用来设置地址映射表，可以添加到开发时配置（dev）中

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {        
        '/api': {
            target: 'http://localhost:3000/api/',
            changeOrigin: true,
            pathRewrite: {                
                '^/api': ''
            }
        }
    },
    cssSourceMap: false
  }
}

即请求/api时就代表‘http://localhost:3000/api/’，
changeOrigin参数接收一个布尔值，如果为true，这样就不会有跨域问题了。

经过如上一系列操作后，打开页面输入用户名，年龄，直接点击提交。数据入库。~搞定！效果如下：

最后，奉上数据库user表建表语句：

DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` varchar(50) NOT NULL,
  `name` varchar(255) DEFAULT NULL,
  `age` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;