vue-cli4

vue-cli 4.4.0版本脚手架搭建vue+iview

vue+iview

• my-theme
  • index.js 更改项目主题色（iview组件库）
• public
  • 用于存放静态资源目录
  • index.html
    • 是一个模板文件，作用是生成项目的入口文件。浏览器访问项目的时候就会默认打开的是生成好的index.html
• src
  • 源码目录
  • api
    • 接口目录（根据业务模块新增对应接口js文件）
  • main.js
    • 入口js文件
  • ui.js
    • 项目UI文件（UI组件库引入等，最后整体引入到main.js文件）
  • app.vue
    • 根组件
  • components
    • 公共组件目录（根据个项目的业务进行公共组件封装）
  • assets
    • 静态资源目录，会被webpack打包
    • img
      • 图片目录
    • iconFont
      • 存放iconfont图标文件夹，在iconfont平台下载压缩文件至本地替换即可
    • css
      • 样式目录
      • common.css（含iconfont的unicode方式， 项目滚动条样式等）
      • public.less（项目公共样式文件）
    • js
      • 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
• .env
  • 开发环境变量配置
• .env.site
  • 测试环境变量
• .env.prod
  • 生产环境变量
• babel.config.js
  • 工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容（低版本ES）
• vue.config.js
  • 项目初始化的一些webpack基础配置
• package.json
  • npm包配置文件，里面定义了项目中的npm脚本，依赖包等信息
• README.md
  • 项目介绍
• .eslintrc.js
  • 管理和检测js代码风格的工具（eslint）