vue-cli前端项目代码结构

会者不难，难者不会，这里就对当前的项目所使用的框架进行一个记录说明

vue-cli

vue是一个渐进式框架，在其生态体系下又有很多官方所提供的插件和工具。其中我们在业务中接触比较多的主要是

• 路由Vue Router
• 全局状态管理

这两者直接由vue官方提供，并且成为了vue项目中的事实标准，这一点相当于react来说从学习体验上就显得更好。react在路由和全局状态管理方面社区提供了很多优秀的方案，是更多的把这一部分的权利交给了社区。

一般的单页应用都会建立在vue-cli的基础之上，对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

这些都只是框架层面的东西，而我们在实现业务的时候更多的需要好看的界面、跟手的体验。因此围绕着这些又有很多其它第三方页面组件库，比如antdv、elementUI等

这里我们现在选用的组件库是ant design规范体系下的vue组件库https://www.antdv.com/docs/vue/introduce-cn/

它由官方直接提供了一套前端模板https://pro.antdv.com/ ，ANTD PRO VUE，”开箱即用的中台前端/设计解决方案“。

ANTD PRO VUE

它不是一个从头开始的轮子，在开始使用一节中对结构本身已经说明的很清楚，通过以下功能页面提供一套基础的前端模板。立足于vue-cli基础之上，

- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表（项目/应用/文章）
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 帐户
  - 登录
  - 注册
  - 注册成功

代码结构是一个脚手架的身躯，身躯结构合理才能打好根基

├── public
│   └── logo.png             # LOGO
|   └── index.html           # Vue 入口模板
├── src
│   ├── api                  # Api ajax 等
│   ├── assets               # 本地静态资源
│   ├── config               # 项目基础配置，包含路由，全局设置
│   ├── components           # 业务通用组件
│   ├── core                 # 项目引导, 全局配置初始化，依赖包引入等
│   ├── layouts                 # 布局
│   ├── router               # Vue-Router
│   ├── store                # Vuex
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── views                # 业务页面入口和常用模板
│   ├── App.vue              # Vue 模板入口
│   └── main.js              # Vue 入口 JS
│   └── permission.js        # 路由守卫(路由权限控制)
│   └── global.less          # 全局样式
├── tests                    # 测试工具
├── README.md
└── package.json

要从头使用这个脚手架，可以从它的github地址克隆到本地，--depth=1表示只克隆最近一个版本；my-project是项目名，可以修改自定义。

$ git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
$ cd my-project
$ npm install
$ npm run serve

在业务中最关注的是views目录，外层布局是在layouts目录下。

layouts目录在官方文档的描述页面中没列上，可能是文档更新不及时，但其实这一项很早就有了

布局

在layouts目录下，存放着多个布局文件。

在示例页面中可以看出，主要有登录注册页、业务菜单操作页、个人中心页等布局，那么就可以把这些布局单独定义，在vue-router的体系下进行封装使用。

layouts目录下文件有：

BasicLayout.less
BasicLayout.vue             # 登陆后通用业务页面的布局
BlankLayout.vue             # 空白，只提供一个<router-view />
index.js             		# 将定义的layout暴露出来
PageView.vue             	# 基础布局，包含了面包屑，和中间内容区 (slot)
RouteView.vue             	# 封装一个RouteView的组件，适应多标签切换的场景
UserLayout.vue             	# 抽离出用于登陆注册页面的通用布局

这种分配方式还是比较合理的，在实际使用过程中可以根据需求再进行二次开发

布局的引用是通过vue-router所提供的路由机制进行生效的，只要在路由上配置为了上下级关系，那么当访问子级路径时，就会自动使用所有上层定义的布局。

这一点只需要对vue-router中入门一节的示例理解就能明白

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

页面

到页面层次就是具体的业务实现了，根据具体的业务在规范的layout布局之下排版具体的逻辑实现。

页面vue文件主要包含三部分：标签、脚本、样式

<template>
  <page-header-wrapper>
    <router-view />
  </page-header-wrapper>
</template>
<script>
export default {
  name: 'PageView'
}
</script>
<style lang="less" scoped>
</style>

常见的页面是增删改查