智汀家庭云-开发指南Web:项目架构

这里主要讲下项目的结构和技术架构,方便我们快速开始开发

1.项目架构

智汀家庭云-开发指南Web:项目架构_第1张图片

【1】项目技术架构

  • 本项目主要采用vue + webpack + vant
  • 项目主要用vue-cli3脚手架进行初始化,然后根据项目需求进行结构上的调整

vuejs特性

  • vuejs体积小
  • 学习成本低
  • 能快速提交开发效率
  • vuejs的生态完善

webpack特性

  • 模块化
  • 按需加载
  • 丰富的插件
  • 丰富的配置

vant特性

  • 提供 60 多个高质量组件,覆盖移动端各类场景
  • 性能极佳,组件平均体积不到 1kb(min+gzip)
  • 单元测试覆盖率 90%+,提供稳定性保障
  • 完善的中英文文档和示例
  • 支持 Vue 2 & Vue 3
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TypeScript
  • 支持 SSR

【2】项目结构

│  .browserslistrc 
│  .editorconfig
│  .eslintrc.js          // eslint配置文件
│  .gitignore            // git提交忽略配置
│  babel.config.js       // babel配置文件
│  package-lock.json     // 依赖缓存文件
│  package.json          // package配置文件
│  postcss.config.js     // postcss独立配置文件
│  README.md             // 说明文件
│  vue.config.js         // webpack相关配置文件
├──public                // 静态资源文件
├──plugins               // 插件集合
└─src
├─api
│   ├──http.js       // api请求文件,每个api请求都在这里
│   ├──instance.js   // api请求总入口,在这里可以做请求的统一处理
├─assets             // 资源文件夹
│
├─lang               // 多语言文件夹
│
├─bus                // 全局vue bus
│
├─components         // 通用组件库
│
├─router.js          // 路由文件
│
├─store.js           // store相关
│
├─App.vue           // 程序入口vue文件
│
├─main.js           // 程序入口文件
│
├─utils              // 相关工具的方法集合
│
└─views              // 页面文件

【3】示例:hello word

怎样添加一个hello word的页面?

步骤1: 在views文件夹新建一个hello-world的文件夹,然后在hello-world文件夹下新建一个index.vue的文件,index.vue的文件内容为
智汀家庭云-开发指南Web:项目架构_第2张图片
步骤2: 建完页面文件后,我们需要在router.js路由文件配置hello-world页面的路由
智汀家庭云-开发指南Web:项目架构_第3张图片

步骤3: 我想在hello-world页面上添加一张图片怎么办?我们可以把我们的图片资源丢到assets目录下,然后用相对路径引入就可以了
例:要引入名为hello.png的图片
智汀家庭云-开发指南Web:项目架构_第4张图片
步骤4: 我要用公用组件库的组件怎么办?我们可以在components目录下引入要使用的组件
例:
智汀家庭云-开发指南Web:项目架构_第5张图片
步骤5: 如果我们需要接口数据,我们可以在api文件夹下的http.js增加我们的接口
智汀家庭云-开发指南Web:项目架构_第6张图片
步骤6: 在浏览器输入localhost:8080/#/hello-world就可以看到我们的hello页面了

你可能感兴趣的