前言

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

结束了简单的唠叨之后,说一说今天这篇记录的起因吧。最近事情比较多导致脑袋比较混沌,看了很久的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啦。

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

Logo

前往低代码交流专区

更多推荐