vue-iview

vue-iview框架目录结构

vue+iview框架目录

• build
  • 构建脚本目录
  • build.js
    • 构建生产环境脚本
  • dev-client.js
    • 开发服务器的热重载,主要用来实现开发阶段的页面自动刷新
  • dev-server,js
    • 构建本地服务
  • check-versions.js
    • node, npm版本检测
  • utils.js
    • 构建相关工具方法
  • vue-loader.conf.js
    • css加载器配置
  • webpack.base.conf.js
    • webpack基础配置
  • webpack.dev.conf.js
    • webpack开发环境配置
  • webpack.prod.conf.js
    • webpacl生产环境配置
• config
  • 项目配置目录
  • index.js
    • 项目配置文件（包含监听端口，打包路径等）
  • dev.env.js
    • 开发环境变量
  • sit.env.js
    • 测试环境变量
  • prod.env.js
    • 生产环境变量
• mock
  • mock数据目录
• my-theme
  • index.js 更改项目主题色（iview组件库）
• src
  • 源码目录
  • api
    • 接口目录（根据业务模块新增对应接口js文件）
  • main.js
    • 入口js文件
  • ui.js
    • 项目UI文件（UI组件库引入等，最后整体引入到main.js文件）
  • app.vue
    • 根组件
  • components
    • 公共组件目录（根据个项目的业务进行公共组件封装）
  • assets
    • 静态资源目录，会被webpack打包
    • img
    • css
    • js
  • router
    • 前端路由目录
    • index.js
  • utils
    • 项目全局公用方法目录
    • request.js
      • axios接口请求实例封装（与后端约定code状态码后，对应退出登录等页面跳转封装）
    • validate.js
      • 项目中内容校验文件（例如邮箱格式校验，手机号校验等）
    • bus.js
      • vue eventBus文件
    • mixins.js
      • vue mixins混入
  • views
    • 项目所有页面目录
    • login.vue
      • 登录页
    • framework.vue
      • 项目框架页面（layout），部分公共样式也可写这里面
    • 根据各业务新建页面
  • store
    • vuex 全局store管理
    • index.js
• static
  • 纯静态资源，不会被webpack打包
  • img
  • css
    • common.css（含iconfont的unicode方式， 项目滚动条样式等）
    • public.less（项目公共样式文件）
  • iconFont
    • 存放iconfont图标文件夹，在iconfont平台下载压缩文件至本地替换即可
  • js
    • jquery.min.js
• babelrc
  • babel编译参数，vue开发需要用到babel编译
• index.html
  • 入口页面
• package.json
  • npm包配置文件，里面定义了项目中的npm脚本，依赖包等信息
• README.md
  • 项目介绍