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

原创于 2021-10-08 14:34:51 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了使用Vue、Webpack和Vant技术栈的项目结构，包括模块化开发、组件库、路由配置及关键文件位置。从HelloWorld示例到API接口、页面组件和资源管理，详解快速上手步骤。

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

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

// 模板模块
<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="../../assets/hello.png"/>
        <p>hello word</p>
    </div>
</template>

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

// 模板模块
<template>
    <div>
        <HelloComponent/>
        <img src="../../assets/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页面了