使用 vue 模块化开发

一、使用 vue/cli 脚手架搭建项目

之前的博客有简介

二、了解单文件组件

使用 vue/cli 脚手架搭建项目之后就可以使用 .vue 后缀的文件，我们称它为单文件组件。

单文件组件的优点

1.可以在 vscode 中安装 vetur 插件解决 Vue.componen 没有代码高亮的问题，在HTML编辑多行的时候不方便的缺点。
2. 可以实现作用域样式，只需要在单文件组件的 style 标签上设置 scoped 属性。
3. 可以使用现代化的 ESM 模块化更好的进行模块化开发。

一个单文件组件的组成

<template>
  <div>
    组件的html
  </div>
</template>

<script>
组件的js 并且暴露组件
export default {
  name: 'home'
};
</script>

<style>
组件的样式
</style>

1. 一个单文件组件，必须要有 template 。其余两个可有可无
2. 如果 script 中暴露组件的选项配置对象时没有设置 name 选项，文件名就是当前的组件名
3. style 标签可以有多个,还可以去配置使用 less 或 sass

三、模块化管理

在 src 目录下创建文件夹区分模块，如图：

• api 存放一些 ajax 的请求 api 方法文件
  
• asset 存放公用的css样式和图片、iconfont之类的文件
  
• components 存放一些页面公用的组件
  
• router 存放 vue 的路由文件
  
• store 存放 vuex 仓库数据文件
  store 数据多的时候也可以拆分模块
  
• utils 存放小工具文件 比如二次封装 axios 之类的一些文件
  
• views 存放页面组件文件
  一个页面组件也可以分成多个单文件组件
  
• App.vue 项目的万年老二组件，主要是放置路由坑和一些路由跳转动画
  
• main 整个项目的入口js文件 ，构建工具打包生成js文件的起点就是它。
  
  以上是我的个人习惯，实际情况可以根据自己项目的需求开发