探索、理解工程化 Vue 项目的 文件结构与内容：

说起来，像这样细致而规范地进行一次项目文件结构的探索，然后得到一些对项目架构的理解，还就是从我开始学前端开发开始的。

当我第一次用 Vue CLI 建立起一个项目的时候，面对着这么多我看不懂、甚至连后缀名都不认识的文件，我是一脸懵逼的，所以初学 Vue 的时候确实举步维艰 ...

所以，要想用好 Vue ，首先得知道为什么、和要怎样以大致就像初始化后这样的一个结构去规范开发。

注意！

同样的，由于我本人对整套笔记的初步设计... 在这里不会展开对 webpack 和 babel 配置文件的相关介绍... 留到后面再统一系统地总结。

我们的页面在哪里？

当我一步一步按照 Vue.js 的官方教程 第一次 npm run serve ，并在 localhost 8080 看到页面之后 ...

• 我点开了 Chrome 的 F12 调试台，看到在 div#app 中有细分下去的 DOM 树，
• 可是我在文件夹里找到的 index.html 的 div#app 标签里 什么也没有 ...
• 并且按照我们之前的学习，至少要有一个地方使用 new Vue( { ... } ) 挂载上一个 Vue 实例，我很疑惑，并不理解它是从哪个地方的 script 脚本里挂载的...
• 那时我也还不理解 “打包” 、“开发模式运行” 等概念 ...

不过，既然我翻开了文件夹，就一定能在 src 即 source 资源文件夹内看到几个 .vue 文件...

打开之后时这个样子的三块结构：

<template>
    <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
    ....
</script>

<style>
    ....
</style>

我觉得这和 HTML 很像 ... 因为都有 script 和 style 来定义页面的样式和一些脚本。但看到 template 的时候，我只想到了之前第一次课初探时用过的 Vue 实例中的 template ，我类比着思考，觉得这里一定就是挂载的那个 Vue 实例的页面DOM结构了...

哈，新发现！至少找到了一些 div#app 里的东西啦！

可是那个 router-link 是什么？它可不是什么 html 的原生标签吧！属性中的 to 和 " / " 斜杠符号 无不透露着它代表着某种 **路由指向 **... 可能是类似 a 标签的 href 链接吧 ？

如果说 router-link 是链接，那么 router-view 又是什么呢？ 路由视图？听上去怪怪的 ...

对这个 router 感觉还是一知半解 ... 那不如去看看 上一级文件夹里 也有个叫 router.js 的文件吧

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

虽然这篇代码里，我有好多东西都不懂，但是我这个人就是这样，哪怕看不懂的东西，我也会先捡着我看得懂的读，慢慢地思考、理解其他的陌生事物可能是什么 ...

• 那个 mode 显示是 history 模式，一定就是我们创建时选择的 用 历史模式 创建 Vue router 了。

• 接下来的 routes 是一个 Object 对象数组，既然这个单词 是复数形式，那么这里一定装的就是各个路由链接的属性信息了。

• path、name 指定了 某个路由链接对象的 路由 和 名称，这个 path 就是之后再浏览器中 " /#/ " 之后会访问的 url 路径地址。（ 如果你不采用 history 模式的话，就是传统的 /xxx 路由模式，就没有 # 号了。）

• 而这个 component 就很眼熟啦！我们不是才学过 TODO List 的组件化开发吗！

  我感觉一下子明白了，原来 .vue 文件 就是更完整、更复杂一些的 Vue.component( { template: ... } ) ，

• 所以其实 每一个 .vue 文件都将是我们开发过程中的一个组件：

  比如你需要做一个移动电商网站的底部导航栏，四个小按钮分别是“ 首页、 发现好物、 购物车、 我的信息 ”，

  它们本质上都差不多嘛！

  那么不如将单个按钮封装成一个 “ 底部导航栏单按钮组件 ”， 然后又新建一个 .vue 把这四个按钮放一起，再次封装成这样一整个 “ 底部导航栏 ”，就可以很随意很方便地在任何地方引入了！

• 当然 .vue 文件的组件内也可以引用组件呀！

  比如我们的初始化项目中展示了两个路由点： Home 和 About 页面，而 Hello 组件实质上包含了一个 HelloWorld.vue 文件，在 components 文件夹中 ...

  在代码中是这样引入的：

  <script>
  // @ is an alias to /src
  import HelloWorld from '@/components/HelloWorld.vue';
  
  export default {
    name: 'home',
    components: {
      HelloWorld,  // 将引入的组件注册进来...
    },
  };
  </script>
  

  • 我们可以看到，官方 Vue CLI 脚手架生成项目后的注释非常细致，它告诉了我们，@ 字符在路径中表达的就是我们的 src 文件夹目录，毕竟 src 文件夹是我们项目的总资源库，所有东西基本都在这里，所以这在之后我们会经常用到这个简写。

  • 当然光 import 也是不够的，就像我们在学习 Vue 单 html 页面实例挂载时一样，同样也需要将组建注册到这个 .vue 的组件中！

    你看这里也 export default 了一个对象，其实这也可以看做是一个 Vue 对象，因为最后你就是把这个 .vue 文件所代表的组件给导出了嘛 ...

多提一句 组件的引入与导出

其实当我看到 import 的时候还好，明白就是从某某文件中引入某个东西 ...

但是那个 export default 导出就让我有点看着面生了 ...

随着时代的发展 和 ECMAScript 的逐渐完善，ES6 开始可以让我们自由地将你这一个 js 文件中的 对象 导出，并可以由其他 js 文件 导入进行使用 ... 听上去和 python 的 from xxx import xxx 很类似 ，也就不难理解了...

组件化开发、工程化开发也必定是前端开发未来的大趋势。

既然我们还在说 router 路由，那么其实关于底部导航栏，还有更好的办法，那就是一并使用路由来管理 ... 因为底部 Tab bar 主要的功能 是切换页面呀！

说完了组件的配置 js 文件，那么进入 main.js

当我们运行 npm install --save 来安装某个工具包的时候，我们只是将它写进了 package.json ，并把它下载到了当前项目文件夹的 node-modules 里面。

而 main.js 是整个项目的总舵手，它会以 js 的方式装载各个引入的组件，这才是在项目中实际地把工具包引入进来哦！

// main.js 
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

我们终于找到啦！原来项目就是在这里 挂载的全局 Vue 实例 ！

这样我们和之前的 单页面单HTML文件 挂在 Vue 实例的方式一对比，就能很清晰明了地明白 ：

• 在 Router 工具包的帮助下，项目以各个 路由点 来作为 组件的开发基础目标；
• 以组件化化的方式，构建 .vue 文件来拼装整个项目；
• 通过 main.js 来定义、总领整个项目的 Vue 架构 ...
• 通过 ESLint 来规范项目的代码内容、通过 Webpack 、Babel 等工具来打包发布项目 ...

这不禁令我感叹，原来前端开发也大有学问、大有可为。

事实证明，在干任何事情之前，首先你得要有一个总体的把握和认识，一个清晰的思路。

“ 努力是好的，但也要努力对方向，不要让自己白费力气！” —— 看《青春有你》时听徐明浩说到的一句很有意义的话。