vue-cli3+express开发环境配置

前言

终于，在六月快结束得时候迎来了我这个月得第一篇笔记。坎坷的六月，经历了生死将会更加珍惜，破财免灾大抵说的就是这样吧。颠倒得生活终于渐渐的回到了正轨，我的学习还是不能停止的，就是这样。

结束了简单的唠叨之后，说一说今天这篇记录的起因吧。最近事情比较多导致脑袋比较混沌，看了很久的nuxt感觉还是停滞不前的（虽然大家对他的评价是简单的），但还是没有什么成果，所以放弃了那个框架，改为自己来写vue和express的结合。

看到有人将二者分开使用，但是需要配置到跨域的问题，并且调试起来也不是很方便，最终选择了这种将二者结合开发环境来进行使用。借鉴了很多人的方法，我也找不到原作者是谁了，权当记录下来以供以后遗忘使用。

vue-cli3的安装

首先，你要有安装vue-cli这个包才可以，先面试安装命令：

npm install -g @vue/cli
#or
yarn golbal add @vue/cli

你可以在安装完之后检查一下版本：

vue --version

然后，是安装一些你需要的插件，这里列出我需要安装的基本插件：

vue add element-ui

安装的时候会有一些选项，按照自己的需求选就好啦，因为之前的项目用的是element-ui，所以这次移植版本还是延续了之前的ui框架，总体来说，主流的比较稳妥。

vue add router

vue add vuex

我想这两个插件用vue的应该不会布安装吧

最后，就是需要对整个结构进行一些简单的修改了。
1.将src文件夹名改为client。
2.创建vue.config.js文件，写入以下内容

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'client/main.js'
        }
    },
    chainWebpack: (config)=>{
        //修改文件引入自定义路径
        config.resolve.alias
            .set('@', resolve('client'))
    }
}

至此，vue-cli3的部分就已经调整完毕了
注意：安装插件已经要在修改文件夹名之前进行！

集成express

首先，在根目录创建文件夹server，在其内部创建app.js和routes文件夹
其次，安装express

npm install express --save

最后，在app.js中启动服务器，代码如下：

var express = require('express');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');

var app = express()；

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

// 访问静态资源
app.use(express.static(path.resolve(__dirname, '../dist')));

// 访问单页
app.get('*', function (req, res) {
  var html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
  res.send(html);
});

// 监听
app.listen(8081, function () {
  console.log('success listen...8081');
});

运行测试

npm run build
node server/app.js

如果想要修改服务端时自动重布的话，用nodemon命令启动app.js即可，当然需要自己安装一下nodemon啦。

暂时就是这样，刚刚把环境打起来，如果写的期间有什么问题，我再写上来吧。