vue-koa 应用脚手架

简介: 支持多语言 支持多页应用 支持多种MOCK

项目地址: github.com/xxx-fe/mall…

mall-app

vue koa 应用脚手架

支持多语言
支持多页应用
支持多种MOCK

Architecture

  • 样式:scss.
  • 库管理:npm,bower(npm有的,bower不需要,但比如boostrap,npm方式比较麻烦,看情况).
  • 框架:vue2,koa2.
  • 模板引擎:handlebars4.
  • 打包:webpack4

运行环境中Nodejs的版本至少是7

目录结构

.
├── build                                       // 使用 vue-cli 2.9.3(有修正)
├── config                                      // 使用 vue-cli 2.9.3(有修正)
├── server                                      // 服务端(koa,nodejs)
│    ├── lib                                    //     库
│    ├── controller                             //     控制器
│    ├── router                                 //     路由(koa-router,或者在前端用vue-router)
│    ├── service                                //     数据(api)
│    ├── view                                   //     视图
│    ├── server.js                              //     服务器入口
├── dist                                        // 生产目录
├── mock                                        // 模拟数据目录
├── public                                      // 公共资源
│    ├── images                                 //     图片
│    └── vendor                                 //     第三方插件
├── web                                         // 前端(vue,js,css...)
│    ├── component                              //     组件
│    ├── lib                                    //     库
│    ├── locale                                 //     多语言文件
│    ├── page                                   //     页面(目录下的每个文件夹都应是一个应用)
│    ├── style                                  //     样式(应用样式)
│    ├── webpack.entry.conf.js                  //     webpack入口配置文件
│    ├── webpack.dev.conf.js                    //     webpack开发模式配置文件
│    └── webpack.pord.conf.js                   //     webpack生产模式配置文件
│   config.yml                                  //     通用配置文件,整个脚手架很多功能都与它有关

安装


npm install    //安装npm
bower install  //安装bower

命令


npm run dev    //启动开发模式
npm run build  //构建项目
npm run prod   //启动生产模式

example

1.新建应用路由

  • /server/router/example/example.js

  • const exampleCtrl = require('../../controller/example/example');
    module.exports.default = module.exports = [
        {path: '', ctrl: exampleCtrl.index},
        {path: 'example', ctrl: exampleCtrl.index},
        {path: 'example/list', ctrl: exampleCtrl.list, method: 'post'}
    ];
    
    

    2.新建应用控制器

    • /server/controller/example/example.js


import exampleService from '../../service/example/example';

const index = async (ctx, _next) => {
    let locals = {
        title: 'example'
    };
    //appName开发模式下不会加载生产后的css
    ctx.state.appName = 'example';
    await ctx.render('page/example', locals);
};

const list = async (ctx, _next) => {
    const service = new exampleService(ctx);
    let locals = {
        list: service.getList()
    };
    ctx.body = locals;
};

module.exports = {
    index,
    list
};



3.新建应用视图


  • /server/view/page/example.hbs
  • {{#extend "layout-example"}}         //使用layout-example布局
        {{#content "head"}}
            {{{parseUrl 'example.css'}}} //exmaple应用的css,直接引用
        {{/content}}                     //不需要新建,build时会抽取vue的style成独立的文件.否则生产模式看不到样式.
        {{#content "body"}}
            <div id="app"></div>
            {{{parseUrl 'example.js'}}}  //exmaple应用的js(相应webpack.entry)
        {{/content}}
    {{/extend}}
    
    

    /server/view/layout/**.hbs 以文件名注册为handlebars partial.

    引用:

  • handlebars(模板引擎)

handlebars-layouts(模板引擎布局helpers)

parseUrl

解析url, handlebars自定义helpers.根据当前开发环境返回正确的url.



{{{parseUrl 'example.css' 'example.js'}}}

结果:

//dev
<link href="/dist/static/css/example.[chunkhash].css" type="text/css" rel="stylesheet">//如果build过,则加载
<script web="example.js"></script>
//prod
<link href="/dist/static/css/example.[chunkhash].css" type="text/css" rel="stylesheet">
<script web="/dist/static/js/example.[chunkhash].js"></script>


如果没有build过,dev模式不会加载example.css,一般情况只加载example.js.即使加载build过的css也不影响dev模式下的样式应用.

4.新建应用页面

  • /web/page/example/example.vue


...
<script>
    export default {
        data () {
            return {
                list: ''
            }
        },
        mounted(){
            this.$http.post('/example/list').then(response => {
                console.log(response);
                this.list = response.data.list
            }, response => {
                console.log(response);
            })
        }
    }
</script>
...


5.新建应用入口

  • /web/page/example/index.js

import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$http = axios;
import exampleApp from './example.vue';
//公共资源样式
import '../../../public/style/common.scss';
$(document).ready(function(){
    new Vue({
        el: '#app',
        template: '<exampleApp/>',
        components: {exampleApp}
    });
});


浏览: http://localhost:3333/example

配置文件

  • /webpack.entry.conf.js

任何模式都引用的配置文件

作为全局通用的入口文件,处在不同位置.在开发,生产模式webapck构建时自动合并引入webpack.entry.(不做其他属性合并).一般情况不作修改.



module.exports ={
    header: './web/lib/header/index.js', //全局头部通用文件
    footer: './web/lib/footer/index.js', //全局底部通用文件
};

header/index.js:不支持删除,在生产模式时,紧接着插入manifest.js,vendor.js.

footer/index.js:支持删除.

  • /webpack.dev.conf.js

开发模式时所引用的配置文件,构建会合并所有属性.


module.exports ={
    entry: {
        example: './web/page/example/index.js'
    },
    //devtool: '#cheap-module-eval-source-map'
    ...
};


  • /webpack.prod.conf.js

生产模式时所引用的配置文件,构建会合并所有属性.


module.exports ={
    ...
    new ManifestPlugin({
        publicPath: 'http://localhost:3333/example'
    })
    ...
};

多语言(locales)

1.配置参数

  • /config.yml
...
#多语言路由前缀
locales: ['zh', 'en'[,.]]
#webpack构建路径(entry)
buildPath:
     -
       name: './web/locale'
...

缺一不可

路由则支持

  • http://localhost:3333/example
  • http://localhost:3333/zh/example
  • http://localhost:3333/en/example

2.创建多语言文件

  • /web/locale/zh.js


window.locale = {
    'desc': 'vue koa 多页应用脚手架'
};

  • /web/locale/en.js


window.locale = {
    'desc': 'vue koa scaffold'
};

多语言文件会在header.js之前插入.

3.调用getLocale全局方法

  • /web/lib/utils/locale.js
getLocale('desc')

mock

  • /config.yml
...
# 是否使用模拟数据api(production模式无效)
isMockAPI : true
# apiServer api服务器
apiServer : 'http://localhost:3334'
...

1.不拦截Ajax方式

1.1 编写/mock/**/.json文件.

  • /mock/example/list.json

现在请求 /example/list

isMockAPI:true

服务端返回 /mock/example/list.json.

isMockAPI:false

服务端返回 http://localhost:3334/example/list.

2.拦截Ajax方式

2.1 编写/public/mock.js文件.

引用:

isMockAPI:true

在页面渲染时紧接着/header/index.js前插入/public/vender/mock-min.js,/public/mock.js.



<script src="/public/vendor/mockjs/dist/mock-min.js"></script><script src="/public/mock.js"></script><script src="header.js"></script>



  • /public/mock.js

这是个全局受影响的mock文件.


Mock.mock('/example/list', 'post', function () {
    return Mock.mock({
        "list|1-10": [{
            'name': '@cname',
            'imageUrl': 'https://placeholdit.imgix.net/~text?txtsize=50&bg=323232&txtclr=ffffff&txt=150%C3%97300&w=300&h=150',
            'description': '@cname'
        }
        ]
    });
});

如果注释该文件则以不拦截AJAX方式发出请求.

isMockAPI:false

不会插入mock-min.js,mock.js.

打包

  • /config.yml
...
#webpack构建路径(entry)
buildPath:
    # name 路径
    # isIndexEntry 是否使用index.js作为webpack.entry.
    # isIndexEntry = true
    # './web/page/example/index.js'  --> /dist/static/js/example[chunkhash].js
    # 使用index.js上一级目录名作为打包文件名(example.js).

    # isIndexEntry = false
    # './web/locale/zh.js'           --> /dist/static/js/zh[chunkhash].js
    # 使用当前文件作为打包文件名(zh.js).
     -
       name: './web/page'
       isIndexEntry : 'ture'
     -
       name: './web/locale'
...

一般情况每一个应用都建立在 /web/page/**/index.js,以index.js作为打包入口.

否则,如果有/web/page/example1/index.js,/web/page/example2/index.js,/web/page/example3/index.js.就会最终构建出以排序最后的index.js.

所以,/web/page/**,只要目录不重名,并且以index.js作为入口.就不会冲突.



原文发布时间为:2018年06月22日
本文作者: 小文酱
本文来源:掘金  如需转载请联系原作者
相关文章
|
1月前
|
JSON JavaScript 前端开发
国际化:实现Vue应用的多语言支持
【4月更文挑战第23天】本文阐述了在Vue应用中实现多语言支持的重要性及步骤。使用vue-i18n插件,结合明确的语言需求和资源管理,实现文本翻译。配置路由和语言检测以支持用户切换,动态加载语言包以优化性能。同时考虑日期和货币格式化,确保全面的国际化体验。经过测试和持续维护,打造尊重文化多样性的全球化应用。
|
1月前
|
缓存 监控 JavaScript
优化策略:提升Vue应用的性能和加载速度
【4月更文挑战第23天】本文探讨了优化Vue应用的策略,包括代码层面(精简代码、组件拆分、计算属性和侦听器)、路由懒加载、数据懒加载与防抖节流、图片和资源压缩及CDN、缓存机制的利用,以及使用Vue Devtools和性能分析工具进行监控与调试。通过这些方法,可以提升Vue应用的性能和加载速度,确保用户获得流畅体验。
|
1月前
|
JavaScript
使用Vue.js做一个简单的计时器应用,好玩实在哦
使用Vue.js做一个简单的计时器应用,好玩实在哦
|
1月前
|
JavaScript 前端开发 持续交付
【专栏】Vue.js和Node.js如何结合构建现代Web应用
【4月更文挑战第27天】本文探讨了Vue.js和Node.js如何结合构建现代Web应用。Vue.js作为轻量级前端框架,以其简洁易懂、组件化开发、双向数据绑定和虚拟DOM等特点受到青睐;而Node.js是高性能后端平台,具备事件驱动、非阻塞I/O、丰富生态系统和跨平台优势。两者结合实现前后端分离,高效通信,并支持热更新、持续集成、跨平台和多端适配,为开发高性能、易维护的Web应用提供强有力的支持。
|
10天前
|
Java 测试技术 数据安全/隐私保护
基于ssm+vue.js+uniapp小程序的《数据库原理及应用》课程平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的《数据库原理及应用》课程平台附带文章和源代码部署视频讲解等
9 0
基于ssm+vue.js+uniapp小程序的《数据库原理及应用》课程平台附带文章和源代码部署视频讲解等
|
10天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
156 21
|
12天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的服装品牌的推广及应用网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的服装品牌的推广及应用网站附带文章和源代码部署视频讲解等
25 4
|
16天前
|
JavaScript Java 测试技术
基于ssm+vue.js的绿色农产品推广应用网站附带文章和源代码设计说明文档ppt
基于ssm+vue.js的绿色农产品推广应用网站附带文章和源代码设计说明文档ppt
31 4
|
16天前
|
JavaScript Java 测试技术
基于springboot+vue.js的电商应用系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的电商应用系统附带文章和源代码设计说明文档ppt
16 0
|
18天前
|
JavaScript Java 测试技术
基于springboot+vue.js的英语知识应用网站附带文章和源代码设计说明文档ppt
基于springboot+vue.js的英语知识应用网站附带文章和源代码设计说明文档ppt
16 0