关于web:智汀云盘开发指南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 的文件内容为

// 模板模块
<template>
<div>hello word</div>
</template>
// 逻辑模块
<script>
</script>
// 款式模块
<style scoped>
</styple>

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

// 引入页面文件
import HelloWorld from './views/hello-world/index.vue'

// 配置路由文件
export default new Router({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/hello-world',
      name: 'device',
      component: HelloWorld
    }
  ]
})

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

<template>
    <div>
        <img src=".././img/hello.png" />
        <p>hello word</p>
    </div>
</template>

• 步骤 4：我要用专用组件库的组件怎么办？咱们能够在 components 目录下引入要应用的组件
例:// 模板模块

// 模板模块
<template>
    <div>
        <HelloComponent/>
        <img src=".././img/hello.png" />
        <p>hello word</p>
    </div>
</template>
// 引入组件
<script>
import HelloComponent from '@/components/HelloComponent.vue'
export default {
    // 在页面注册组件
    compoents: {HelloComponent}
}
</script>

• 步骤 5：如果咱们须要接口数据，咱们能够在 api 文件夹下的 http.js 减少咱们的接口

/**
* 申请列子
*/
export const example = params => http.g(`${apiHeader}/examle`,
  params
)

• 步骤 6：在浏览器输出 <localhost:8080/#/hello-world> 就能够看到咱们的 hello 页面了