Skip to content

Vue 2.0全家桶套餐,包含vue-router2.0和vuex2.0,集成express作为web server

Notifications You must be signed in to change notification settings

joneqian/vue2-express

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue2-express

Vue 2.0全家桶套餐,包含vue-router2.0和vuex2.0,集成express作为web server。 目前支持vue2.4和webpack3.0。

前言

该脚手架以express作为web server,集成了vue2.0、vue-router2.0和vuex2.0。 用于方便快速的创建工程,并实现生产环境的部署。

运行及构建

$ npm install -g vue-cli
$ vue init joneqian/vue2-express my-project
$ cd my-project
$ npm install
$ npm run dev //运行调试模式

如果你的8080端口被占用,请修改/config/index.js文件。

生产环境部署和运行

将代码clone到服务器,运行:

$ npm install
$ cd server
$ npm install
$ cd ..
$ npm run build

脚本将在server目录自动创建publicviews目录。 通过node server/bin/www启动项目(生产环境建议使用pm2)。

项目结构

├── README.md
├── build  // webpack build文件
│
├── config  // webpack 配置文件
│
├── server  // express(server端)
│   ├── bin
│   ├── config // server端配置项,包含api、oss、微信等
│   ├── logs // server端运行日志
│   ├── routes // express 路由
│   ├── app.js
│   ├── favicon.ico
│   ├── logger.js // 日志模块
│   ├── package.json
│   ├── public // 打包构建后的资源文件夹
│   └── views // 打包构建后的页面文件夹
│
├── src
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   ├── images
│   │   └── js // 前端js工具集
│   │
│   ├── components // vue组件
│   ├── directive // vue指令
│   ├── plugins // vue插件
│   ├── router // vue-router
│   ├── store // vuex store
│   ├── views // vue 页面
│   ├── main.js
│   └── App.vue
│
├── static // 静态资源(ui、html页面)
│
├── test 
│
├── index.html
└── package.json

页面跳转

我在mixins中加入了jump方法,用于支持原生的跳转和vue-router的跳转。 你可以查看src/main.js

import mixins from './mixins';
Vue.mixin(mixins);

jump方法有url和replace两个参数。 url代表跳转的路径,如果是一个object或者是一个不包含http的字符串,则使用vue-router跳转。如果url是一个带http的字符串则使用原生跳转。 replace代表是否替换当前页面,默认是false。

你可以直接在method中使用this.jump(url),或者在html上直接使用@click.prevent="jump('/url')"

发送 ajax 请求

由于我非常非常懒,并且觉得axios名字比较奇怪,因此利用VUX直接把axios封装成插件,你可以直接引用插件。

你可以查看src/main.js

import AjaxPlugin from './plugins/ajax';
Vue.use(AjaxPlugin);

然后你就可以愉快的偷懒了,使用this.$http进行调用了。

export default {
  name: 'hello',
  mounted () {
    this.$http(url, {})
        .then(data => {})
        .catch(error => {});
  }
};

由于我自己项目的需要,所以在src/plugins/ajax/http.js中对axios做了封装,你可以根据自己情况和喜好进行修改。

在dev中和express通讯

请在config/index.js的proxyTable中设置代理,比如

proxyTable: {
  '/customer': 'http://localhost:10091'
}

About

Vue 2.0全家桶套餐,包含vue-router2.0和vuex2.0,集成express作为web server

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 98.9%
  • Other 1.1%