# vue-node

**Repository Path**: tha19/vue-node

## Basic Information

- **Project Name**: vue-node
- **Description**: 配置完成的vue-node项目 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-08-31
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##引用作者原文


目前，技术圈都流行前后端分离，服务端渲染。vuejs由于其友好的中文文档，相对于react容易上手。服务端,我喜欢使用nodejs搭配express 框架配合搭建提供一个API服务，以及服务端渲染,客户端则选择 vuejs 开发前端页面，vue-router做路由，vuex做状态管理 , axios 做ajax请求。

开发准备
1.全局安装 Vue-cli

npm i vue-cli -g
2.创建webpack 模板 项目文件，按照提示一直下一步，完成后按提示执行代码

vue init webpack vue-node
3.安装包依赖并运行

cd vue-node
npm install
npm run dev
tips: 如果npm卡住，可以使用 淘宝源 或者 安装 cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
4.修改文件结构

将 src 文件夹修改为 client
将 webpack.base.conf.js 内的 src 地址修改为 client
5.创建服务端

mkdir server
cd server/
touch app.js
6.安装express

npm install express --save
npm install body-parser --save
7.写后端启动文件 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...http://127.0.0.1:8081/');
});


打包并部署

npm run build
node server/app.js
在浏览器输入 http://127.0.0.1:8081/ 就能看到页面了