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

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

  • vue.js

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

  • ECMAScript 6

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

  • node、npm的安装使用
  • ESLint插件

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

  • vuetify

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

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

安装与配置

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

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

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

《vue应用目录结构与单文件组件的搭建》 vue安装选项

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

cd 你的项目路径
npm run dev
ctrl + c 退出,终止批处理操作

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

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

项目层次结构

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

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

我们先来分析一下项目的结构,主要关注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文件夹下
一般来说,我们需要在单文件组件结构中定义那么几个标签

《vue应用目录结构与单文件组件的搭建》 单组件文件内容

一个简单的示例

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

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

  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的单文件组件

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

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

如果你喜欢我的文章,谢谢你给我一个like~
    原文作者:LUNJINGJIE
    原文地址: https://www.jianshu.com/p/798b89e54b5d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞