2 Star 4 Fork 0

songjian/卡柏洗衣

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

egg-vue-webpack-boilerplate

基于 Egg + Vue + Webpack4 单页面服务端渲染同构工程骨架项目.

版本

  • Egg 版本: ^2.x.x
  • Node 版本: Node ^8.x.x+, Node 6.x.x 版本请见 Egg 1.0 + Node6分支
  • Webpack 版本: ^4.x.x, 对应 easywebpack-vue 版本为 ^4.x.x
  • Vue 版本: ^2.5.0

文档

1.特性

  • 支持 server 和 client 端代码修改, webpack 时时编译和热更新, npm start 一键启动应用

  • 基于 vue + vuex + vue-router + axios 单页面服务器客户端同构实现

  • 支持开发环境, 测试环境,正式环境 webpack 编译

2.依赖

3. 使用

3.1 安装cli(非必需)

npm install easywebpack-cli -g

^3.5.0 开始, easywebpack-cli 已内置 devDependencies 中, 无需安装。如果你需要在命令行使用 easy 命令, 可以单独全局安装。

3.2 安装依赖

npm install

3.3 启动应用

本地开发启动应用
npm run dev

应用访问: http://127.0.0.1:7001

npm start启动

发布模式启动应用
  • 首先在本地或者ci构建好jsbundle文件
npm run build 
  • 然后,启动应用
npm start 

4. 功能实现

4.1 单页面前端实现

在app/web/page 目录下面创建app目录, app.vue, app.js 文件.

  • app.vue 编写界面逻辑, 根元素为layout(自定义组件, 全局注册, 统一的html, meta, header, body)
<template>
  <AppLayout>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </AppLayout>
</template>
<style lang="sass">

</style>
<script type="text/babel">
  export default {
    computed: {

    },
    mounted(){

    }
  }
</script>
  • app.js 页面调用入口
import { sync } from 'vuex-router-sync';
import store from 'store/app';
import router from 'component/app/router';
import app from App.vue;
import App from 'app';
import Layout from 'component/layout/app';

App.component(Layout.name, Layout);

sync(store, router);

export default App.init({
  base: '/app',
  ...app,
  router,
  store
});

4.2 单页面后端实现

  • 创建controller文件app.js
exports.index = function* (ctx) {
  yield ctx.render('app/app.js', { url: this.url.replace(/\/app/, '') });
};
  • 添加路由配置
  app.get('/app(/.+)?', app.controller.app.app.index);

5. 打包部署

http://hubcarl.github.io/easywebpack/vue/build/

6. 实现原理

6.1 本地npm start启动流程

本地启动流程

6.2 服务端渲染页面访问流程

服务端渲染页面访问流程

6.3 详细资料

License

MIT

The MIT License (MIT) Copyright (c) 2017 sky. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

卡柏在十六年沿革发展历程中,秉承德国先进的洗衣管理模式,以豪迈的气魄汇聚大批行业精英,引进和开发国际先进的干洗、水洗、湿洗等高新智能设备及高端洗涤技术和化料,致力于直营规划与特许经营并轨模式的研究和发展。 用户端公众号主要服务于有洗衣需求的用户群体,解决用户线上预约、查看订单等需求,为用户提供简单、便捷的下单方式,帮助用户更快、更舒心的洗衣。 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/c1v3t/cypress_laundry.git
git@gitee.com:c1v3t/cypress_laundry.git
c1v3t
cypress_laundry
卡柏洗衣
master

搜索帮助

Cb406eda 1850385 E526c682 1850385