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目录自动创建public和views目录。 通过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')"。
由于我非常非常懒,并且觉得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做了封装,你可以根据自己情况和喜好进行修改。
请在config/index.js的proxyTable中设置代理,比如
proxyTable: { '/customer': 'http://localhost:10091' }