使用 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 目录下创建文件夹区分模块,如图:

使用 vue 模块化开发_第1张图片

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

你可能感兴趣的:(使用 vue 模块化开发)