智汀家庭云-开发指南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的文件内容为

步骤2: 建完页面文件后，我们需要在router.js路由文件配置hello-world页面的路由

步骤3： 我想在hello-world页面上添加一张图片怎么办？我们可以把我们的图片资源丢到assets目录下，然后用相对路径引入就可以了
例：要引入名为hello.png的图片

步骤4： 我要用公用组件库的组件怎么办？我们可以在components目录下引入要使用的组件
例:

步骤5： 如果我们需要接口数据，我们可以在api文件夹下的http.js增加我们的接口

步骤6： 在浏览器输入localhost:8080/#/hello-world就可以看到我们的hello页面了