智汀云盘-开发指南web:项目架构

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

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的文件内容为

// 模板模块

// 逻辑模块

// 样式模块