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

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页面了

ITPub博客

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

1. 项目技术架构

2.项目结构

3. 示例：hello word

最新文章