# vue2cli

**Repository Path**: jojowwbb/vue2cli

## Basic Information

- **Project Name**: vue2cli
- **Description**: 基于vue2的WEB端项目脚手架
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-08-14
- **Last Updated**: 2021-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##
Vue2Cli端项目脚手架
---
2017年8月14日17:33:40

### 说明

架构思想：

    -- 数据解耦
    -- 数据流程管理
    -- 组件化
        -- 抽象
            -- 组件原型划分
            -- mixins
        -- 转换
            -- props、event
        -- 复用
            -- slot




基于以下依赖搭建的开发环境：

-    Vue 2.x
-    Less
-    ES6
-    vue-router
-    Babel 6.x
-    Webpack 2.x

`注意`:目前不知道整个应用中的模块之间的数据交换流程、所以暂时不使用Vuex、如果有需要、后续集成

实现目标：

+ +[x] 1、项目工程化
+ +[x] 2、SPA模型配置
+ +[x] 3、编译Less预处理文件
+ +[x] 4、独立打包CSS文件
+ +[x] 5、抽取图片、字体资源、独立存放
+ +[x] 6、抽取公共包：vue、moment、第三方UI库
+ +[x] 7、异步加载路由、优化项目启动速度
+ +[x] 8、区分开发、生产环境、提高构建速度、和生产环境的文件缓存优化
+ +[x] 9、采用缓存进行增量rebuild、提高build速度
+ +[x] 10、采用module-source-map减少应用层代码打包体积
+ +[x] 11、提供前后端分离的数据访问、提供Proxy配置、进行请求转发
+ +[x] 12、路由管理
+ +[ ] 13、vuex 数据管理
+ +[ ] 14、视图基础组件抽象
+ +[ ] 15、业务路由定义
+ +[ ] 16、业务组件抽象

### 目录

    -- dist // 项目打包目标路径

    -- docs // 部分JS类文档生成路径

    -- src //项目源代码

    -- test //添加单元测试的用例

       * babelrc //babel编译配置文件

       * before.build.js //项目构建之前执行的脚本

       * package.json

       * readme.md

       * stats.json

       * template.html

       * webpack.config.js // webpack配置文件


### 使用

下载：

    $ git clone

进入到根目录、安装依赖

    $ npm install

运行：

    //开发环境

    $ npm run dev

    //打包、构建项目

    $ npm run build //编译前会自动清空编译目录

其他命令说明：

    $ npm run doc //生成js文档、详细参考documentation.js

    $ npm run mocha `测试脚本` //单元测试

    $ npm run clean //清空编译目录

    $ npm run build:override //覆盖编译、不清空编译目录

    $ npm run build:profile //带性能分析文件的编译构建


### 集成环境

#### 第三方工具

已经集成以下第三方服务、工具、类库

    moment //时间处理库

    axios //fetch处理库

    rmiaf //基于node的目录处理插件

#### 业务封装库

在`src/common`目录下、封装了俩个通用库

    mj //通用JS函数、方法

    service //基于axios封装的、应用于当前项目开发的数据接口调用类


#### Proxy

集成Proxy代理、便于mock数据测试、和后续的服务端接口集成测试、默认转发规则：

`注意`：112.74.74.189是我自己部署的一套`Mock数据服务`

    http://bing.wang/mock/test --> http://112.74.74.189/mock/test

    http://bing.wang/mock/api/test --> http://112.74.74.189/mock/test

详情查看：`webpack.config.js --> proxy`配置

#### MockData

`MockData`:大家可以查看([MockData](https://www.oschina.net/p/mockdata))

推荐大家使用!

#### Route

路由配置、路由全局事件处理模块

    src/router

`注意`：目前采用webpack的懒加载模式来动态加载、提高首页加载效率!

详情查看:`src/router/index.js`



### 模块代码结构

请按照以下结构进行模块开发

    -- moduleName

        -- components

        -- styles //放置当前模块通用样式表

        -- images //放置当前模块需要用的图片资源

        *  index.vue //模块入口路由模块