Vue 2.5 从零开始学习 - 探索、理解工程化 Vue 项目
探索、理解工程化 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 等工具来打包发布项目 ...
这不禁令我感叹，原来前端开发也大有学问、大有可为。
事实证明，在干任何事情之前，首先你得要有一个总体的把握和认识，一个清晰的思路。
“ 努力是好的，但也要努力对方向，不要让自己白费力气！” —— 看《青春有你》时听徐明浩说到的一句很有意义的话。
