基于Vue2+webpack2基础项目框架

基于Vue2+webpack2基础项目框架

Vue2 + Vuex + webpack2 + Yarn 基础项目框架

本项目使用yarn替换传统的npm对包进行管理，yarn可以默认对依赖包锁定初次安装时对版本，解决传统方式下js包默认升级造成对依赖包版本不兼容对问题

运行步骤

# 项目推荐使用yarn进行包管理，需要预先安装全局yarnnpm install yarn -g# 安装依赖yarn install# 开发环境启动npm run dev# 线上环境代码打包npm run build

目录结构

project ├─ build webpack各环境配置文件 ├─ config 环境配置 ├─ src 项目源码 │ ├─ api 接口封装 │ │ └─ user 用户模块相关接口 │ ├─ assets 静态资源，全局css、image │ ├─ base 基础类 │ │ └─ BaseComponent 组件基类 │ │ └─ BaseDialog 模态窗口基类 │ │ └─ BasePage 普通窗口基类 │ ├─ toolBus 工具模块 │ │ └─ Http http请求封装类 │ │ └─ Date 日期处理封装类 │ │ └─ ... │ ├─ components 独立组件 │ │ ├─ Alert 提示框 │ │ ├─ Confirm 确认框 │ │ ├─ Dialogs 模态窗口 │ │ ├─ Footer 底部 │ │ ├─ Header 头部 │ │ ├─ Loading 加载等待框 │ │ ├─ Log 日志组件 │ │ └─ ..... │ └─ config 基本配置文件 │ │ ├─ dev 开发环境配置 │ │ └─ index 入口 │ │ └─ prod 生产环境配置 │ └─ extends Vue扩展 │ │ ├─ directives 全局指令 │ │ └─ Filters 全局过滤器 │ │ └─ ... │ └─ router 路由 │ │ ├─ PageLoad 页面路由加载处理 │ │ └─ routers 路由配置 │ │ └─ ... │ └─ store vuex状态机 与 元数据 │ │ ├─ modules 各个模块相关的状态封装 │ │ └─ actions vuex actions │ │ └─ getters vuex getters │ │ └─ index vuex引用入口 │ │ └─ meta-data 全局元数据 │ │ └─ mutation-types vuex mutatuion types │ │ └─ mutations vuex mutatuion │ └─ views 业务模块 │ │ ├─ dialogs 默认存放弹框业务页面 │ │ └─ **.vue 业务模块页面 │ │ └─ ... │ └─ App.vue 根组件 │ └─ main.js 程序入口 ├─ .babelrc babel配置--编译es6 ├─ .editorconfig 管理不同开发者不同编辑器的编码规范 ├─ .eslintignore eslint代码规范忽略文件 ├─ .eslintrc.js eslint代码规范配置文件 ├─ .gitignore git忽略的文件 ├─ .index.html 单页应用程序入口页面 ├─ package.json 项目描述与依赖配置 ├─ README.md 项目使用描述 ├─ yarn.lock Yarn包管理版本锁定配置文件 ├─ yarn-error.log Yarn安装错误信息 ...

相关资料

Vue

vux组件库

Vue webpack

vue-loader

webpack

zepto

Yarn

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。