Watch 2 Star 0 Fork 0

鸿基梦 / Vue-FrameworkJavaScript

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
搭建实用的vue技术架构,包含webpack搭建指南与详解,会按照vue项目的不同通过分支搭建适应各种场景的vue技术框架,master分支将带你开启时间管理系统的奇妙之旅 spread retract

Clone or download
Loading...
README.md

Vue-Framework

介绍

搭建实用的vue技术架构,包含webpack搭建指南与详解

软件架构

.
├── build                            # 打包脚本
│   ├── lib                            # 提起打包静态资源(不改变的npm包提升打包效率)
│   ├── loader                         # loader文件
│   │   └── style-loader.js              # 样式处理
│   ├── webpack                        # webpack配置
│   │   ├── webpack.dll.conf.js          # 静态资源打包
│   │   ├── webpack.online.conf.js       # 上线环境配置(包括生产和测试)
│   │   ├── webpack.base.conf.js         # 基础配置
│   │   ├── webpack.dev.conf.js          # 本地开发
│   │   ├── webpack.prod.conf.js         # 生产环境
│   │   └── webpack.test.conf.js         # 测试环境
│   ├── paths.js                       # 路径处理
│   ├── utils.js                       # 打包工具库
│   └── build.js                       # 打包
├── config                           # 项目配置
│   ├── dev.js                         # 开发环境
│   ├── prod.js                        # 生产环境
│   ├── test.js                        # 测试环境
│   └── index.js                       # 配置入口
├── docs                             # 技术文档
├── public                          
├── src                              # 业务开发
|   ├── api                            # api方法
|   ├── assets                         # 本地静态资源
│   ├── components                     # 项目通用通用组件
│   ├── config                         # 业务配置文件
│   ├── directive                      # 自定义指令
│   ├── filters                        # 自定义过滤器
│   ├── plugins                        # 自定义插件
│   ├── routers                        # 路由入口
│   ├── services                       # 服务封装
│   ├── store                          # vuex存储
│   ├── views                          # 业务页面
│   ├── utils                          # 工具库,公共js文件
│   ├── styles                         # 公共样式
│   ├── main.js                        # 应用入口
│   ├── permission.js                  # 权限配置
│   └── App.vue                        # 路由入口
├── .babelrc.js                      # babel配置文件
├── .eslintignore                    # eslint排除处理文件
├── .eslintrc.js                     # eslint配置文件
├── .stylelintignore                 # stylelint排除处理文件
├── .stylelintrc.js                  # stylelint配置文件
├── .prettierrc.js                   # prettier配置文件
├── README.md                        # 项目说明文件
└── package.json           

安装教程

  1. 克隆项目到本地 git clone https://gitee.com/hjm100/Vue-Framework.git
  2. 进入项目根目录 cd Vue-Framework
  3. 安装包依赖 npm install
  4. 本项目路由设计风格为动态添加路由(如果不满足你的需求,可以自行设计)

使用说明


#------------- dll --------------#
# 开发环境生成dll
npm run dll:dev

# 测试环境生成dll
npm run dll:test

# 生产环境生成dll
npm run dll:dev

#------------- dev --------------#
# 启动开发环境
npm run dev

#------------- test --------------#
# 测试环境打包生成
npm run build:test

# 测试环境生成并本地调试
npm run build:test-preview

# 测试环境生成并开启性能检测
npm run build:test-report

#------------- prod --------------#
# 生产环境打包生成
npm run build:prod

# 生产环境生成并本地调试
npm run build:prod-preview

# 生产环境生成并开启性能检测
npm run build:prod-report

#------------- lint --------------#

# eslint检测
npm run lint:es

# eslint检测并修复
npm run lint:es-fix

# stylelint检测
npm run lint:style

# stylelint检测并修复
npm run lint:style-fix

# 同时eslint和stylelint检测并修复
npm run lint

#-------------------------------#
# prettier检测(代码格式化)
npm run format

分支说明

  1. master 默认分支
  2. develop 调试分支
framework/* 框架分支
  1. framework/asyncRouters

    1. 动态路由分支
    2. 一般在需要分配路由权限的项目中使用
    3. 部分路由为后段分配
  2. framework/webpack

    1. 脚手架分支
    2. 前端工程化建设
feature/* 项目分支
  1. feature/GTD
    1. 时间管理项目

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

Comments ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/hjmeng/Vue-Framework.git
git@gitee.com:hjmeng/Vue-Framework.git
hjmeng
Vue-Framework
Vue-Framework
master

Help Search