vue应用目录结构与单文件组件的搭建

总结一下最近利用vue.js完成的一个单文件组件应用的项目。
首先说一下进行一个vuejs应用的开发需要准备哪些知识(本文基于Interlij IDEA开发)

• vue.js

(这不是废话的废话哈哈)，花一个下午的时间把官方文档看一遍是很有必要的(动手安装、实现一下小功能)，起码要对vuejs有一个整体的认识，明白它的运行机制以及生命周期。官方文档戳我

• ECMAScript 6

并不是说vuejs一定要用ES6才能写，但ES6某些函数能对你的开发速度起很大作用，建议边用边学。

• node、npm的安装使用

• ESLint插件

规范你的JavaScript代码 ESlint安装与规则

• vuetify

以下示例以此作为应用的UI组件 戳我

下面和大家分享一下我构建单文件组件的项目结构，以及运行流程

安装与配置

---

官方文档已经阐述得非常清楚了，详情参考官方文档戳我

具体的选项如下(仅代表个人观点)

vue安装选项

安装结束后,切换到项目所在目录，通过命令即可运行

cd 你的项目路径

npm run dev

ctrl + c 退出，终止批处理操作

看到以下界面即搭建成功了!!

项目层次结构

我们使用IDE打开我们刚刚构建的项目，这里使用Intellij IDEA

目录结构

我们先来分析一下项目的结构，主要关注config、src、static

config：

整个应用的配置文件，一般的话我们不需要修改，可以在index.js里配置代理，解决跨域问题(仅适用与开发模式)，详情可查阅 API Proxying

src：(每个文件夹中都包含index.js,因为默认index.js为入口)

资源文件存放的地方，为了项目结构更加清晰，继续分层

• api：统一管理后台api接口地址、调用api的方法
• components：应用中的公共组件，如顶部菜单栏
• pages：存放每一个单文件组件，具体的页面
• router：应用的路由文件
• service：应用的数据服务层，对单文件组件进行数据处理、业务处理
• store：vue的状态管理(vuex)，如用于登录用户信息
• App.vue：整个应用所有单文件组件的父组件
• main.js：整个应用的程序入口

static

静态文件存放位置，如图标、图片

单文件组件结构

命名：xx.vue
位置：位于pages文件夹下
一般来说，我们需要在单文件组件结构中定义那么几个标签

单组件文件内容

一个简单的示例

假如我现在要创建一个实时数据的单文件组件，那么我该如何去做呢？

1. 首先我们创建一个属于该模块的文件夹。
2. 所有的单文件组件都以.vue后缀结尾。
3. 假设我这个页面包含的组件为“选项框”、“列表”、“tip提示信息”，首先我定义一个父组件Current.vue，然后分别添加子组件CurrentControl.vue、CurrentTable.vue、CurrentTip.vue，注意首字母需要大写，对象的规范写法(个人建议把页面的所有组件拆分成不同的子组件来写代码，这样结构更加清晰，维护更加方便)

父组件Current.vue我们可以这样写：

  <div class="ma-3">
    <current-control class="mb-2"></current-control>
    <current-tip  class="mb-2"></current-tip>
    <current-table></current-table>
  </div>
</template>
<script>
  import CurrentControl from './CurrentControl';
  import CurrentTable from './CurrentTable';
  import CurrentTip from './CurrentTip';

  export default {
    components: {
      CurrentTip,
      CurrentTable,
      CurrentControl,
    },
    name: 'Current',
  };
</script>

CurrentTip子组件可以这样写(其他子组件类似):

<template>
  <v-card class="">
    <v-alert class="subheading" color="success" outline icon="mdi-alert-octagram" :value="true">
    </v-alert>
  </v-card>
</template>

<script>
  export default {
    name: 'CurrentTip',
  };
</script>

通过配置路由，配置父组件的对象名，就可以访问所定义的单文件组件了。
最后附上一个小示例，基于leaflet地图、vuejs的单文件组件

本文没具体涉及vuejs的具体细节实现，为大家提供了一个比较清晰的目录结构以及单文件组件的构成，日后有时间再进行补充，欢迎大家留言讨论交流~

如果你喜欢我的文章，谢谢你给我一个like~