快速了解vue（2）

前言

要学会一门技术，必须要上手写代码，读代码，所以，我就把vue-admin-template作为我们的研究对象。

第一步自然是先把项目给clone下来，要克隆这个极简的vue-admin-template，而不是vue-element-admin。接下来就是按照教程进行傻瓜式的下载，安装，启动。这个过程人家作者已经写得很详细了。

目录结构

项目构建成功之后，就是如下图所示的结构：

我们可以看到，这里面的文件夹和各种配置文件还是挺多的，我们就一个个大概的说一说，比如这个src文件，我们都能猜到，这必然就是我们主要写代码的地方，其他地方很少动，页面啊，交互啊都在这里面写。

还有这个build文件夹，一看这个文件夹名字就应该猜到，这是跟项目构建有关的配置。

这个mock是个好东西，模拟数据用的，比如你需要一些数据填充到页面，它恰好能模拟数据，只要向它发送请求就行。

接下来就是public文件夹，这个大家就更容易明白了，我们写的组件就是往这个html里面填充的，这个东西没什么代码，放在这里就行，完全不用改动。

src说过了。然后test文件也不用说，一看就是测试代码用的。

配置文件

下面那一堆都是配置文件，我们先看这个package.json文件，这里面就是一些项目信息，以及一些依赖。这样的形式让我联想到有点类似于Java的构建工具Maven里的pom文件，不过更像gradle，同样都是项目构建工具，maven是用标签，而gradle就是用的json格式。然后是挨着的package-lock.json文件，这两个确实有联系，package.json里的依赖信息有明确的版本号，但是啊，真下载下来却不一定就是写的那个版本，所以，又出现一个package-lock.json来记录真实的版本号，大致就是这么个意思。

然后，readme.md就不说了，继续说这个vue.config.js文件，这个看名字就知道是有关vue的配置文件。我们来看看里面都配置了什么东西。看代码说话：

第一句就是‘use strict’，表示在严格模式下运行，其实这句话，写不写都会在严格模式下运行。还要多嘴一句，这里面写代码居然不用分号，真优秀，跟Python似的。

然后是导入了path模块，这个模块有一些工具函数，一般是用来处理文件与目录的路径。接着导入了src文件下的settings.js文件，看这名字就知道是设置什么东西。打开这个settings.js文件，我们看啊，上来就是 module.exports = {...}，意思就是要把等号后边的这个对象暴露出去，让别的地方可以用，别的地方怎么用呢，我们继续回过头来看这个vue.config.js，它是用require引用的。这种方式就叫CommonJS规范。

然后，我们看看这个settings.js里都设置了什么东西，这里面太简单了，title，明显就是html里的title标签嘛,设置网页的标题，下面两个还都有注释：是否规定了头部header，是否显示侧边栏logo。这也没什么嘛，接着回去看vue.config.js。

一个resolve函数，参数dir肯定是一个路径，这个函数肯定是用来获取绝对路径的。放在这里说明肯定有地方会用到。

接下来的写法就很神奇了，我第一次见：const name = defaultSettings.title || 'vue Admin Template'，这行代码让我很是疑惑，这像布尔值又不像的，真让人头大。不过呢，这也很简单，一查就知道，这是个神奇的用法，例如：expr1 || expr2 ，如果expr1是真值，就返回expr1，否则返回expr2。那么什么是真值呢？就是有意义的数字啊，字符串啊啥的都可以是真值；null，NaN，空字符串，0，undefined就不是真值了。

唉，这就是没有系统学过的痛点，每一句都有新知识！！！

然后就是 const port = process.env.port || process.env.npm_config_port || 9528 ，又是这种用法。process是一个全局变量，也不用特殊引用，不管在哪里，直接就能用，代表当前Node.js进程。它有一个属性叫env，一看就是英语中环境的缩写，肯定就是当前的环境变量，里面保存的就是当前项目运行环境的信息，比如这里就获取了port(端口号)，我们点开进去，看这个源码里面的env发现是空的，就是一个空对象，那这个port在哪呢？

我们来看这一句上边的英文注释就明白了。意思是说啊，如果你想要设置端口号，你可以使用管理员权限执行命令行来设置，比如，npm run dev --port = 9528  这样在项目启动的时候就设置好了端口号，项目一启动，这个env对象肯定就把这个端口号给保存下来了。

上面两行都是定义一个常量，接下来module.exports里面的才是真正的相关设置，相关的属性，vue-cli官方文档配置那一栏解释的非常详细。而且，作者也说了 All configuration item explanations can be find in https://cli.vuejs.org/config/   所有的配置属性的解释说明都能在官方网站找到。所以这里也就不再啰嗦了，也没啥。

我们看看这个configureWebpack里的属性，作者也是写了注释的，我们说说这个alias，我觉得这就是个别名，你看啊，第五行的resolve函数这不就是用上了。用@符号来代替src文件路径。我们随便打开一个比如src下的main.js文件，我们就能看到，导入其他文件的时候用的就是@符号。

然后还有个chainWebapck，这看起来也是关于webpack的配置，可能更高级，比如刚开始这两行就直接删除了preload和prefetch，这两个有什么作用呢？经过我的一番搜索，这两个就是预加载，预获取什么的，比如我们项目需要的css啊、js啊之类的，统统先加载过来，用不用再说。为什么删除这两个呢，后边有这个注释：need test。光看这两个词确实有点模糊，经过我的一番查找啊，可能是因为我们项目启动，访问的时候，所有的资源被加载，我们测试的时候不好判断到底是哪里出了问题。所以，去除这两个之后，只有刷新路由的时候才会请求资源，这样方便测试问题的所在，当然纯属个人猜测。

好了，这个配置就说到这里吧，更详细的可以自行百度，配置文件一般写好就很少动了，我们还是研究一下如何快速的使用vue来完成毕业设计。

src文件

所以我们就直接打开src吧。入口文件就是main.js，这就有点像我们C或者C++的main函数，都是入口，代码就是从这里开始的。不管是写Java也好还是C或者Python，我们在写代码的过程中肯定是要引入一些工具包，一些其他资源的。所以main.js文件中刚开始的这些import语句都是用来引入资源的，不必多说，我们直接看不是import的代码。

呵，import下边第一段就是关于mock-server的，这个东西呢是自己模拟数据的，看注释就知道，项目上线之前要把它移除，所以我们先忽略它，往下看，ElementUI，这个啊我感觉就跟bootstrap，layui之类的东西差不多，没什么说的，复制粘贴的玩意儿。

Vue.config.productionTip = false ，这句话也没什么特殊的意思，就是少显示两行日志，可以先不用管。接下来才是最关键的，说了这么多，才终于说到关键地方了。

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

我们看到啊，整个项目，就只有这里new Vue了，这里是一切的根，其他都是子组件，一切的一切都是从这里开始。我们看这个第一行，el我猜是element的缩写，不知道大家以前写js的时候有没有写过document.getElementById()这个东西。所以这个el肯定就是一个id选择器，这个地方肯定是指id为app的标签。这个app在哪呢，在public文件夹里，index.html中。我们可以看到，在body里有一个id是app的div。

那么，接下来的router和store是什么东西呢，我们就往上翻，看第12,13行，这是引入的两个东西，这里就涉及到一个知识点：看这个写法，引入的是src文件夹里边的store文件夹，那么为什么这里只写这个目录名字呢？store文件夹里边好几个文件，到底引入的是哪个？其实，它引入的是store文件夹里边的index.js文件，只要写目录名，它就会自动引入该目录下边的index.js文件，如果你想引入别的文件，那么这个文件名就必须要写全了。只有这个index.js才能这样简写。router也是同样的道理。我们要把每一个js文件都当作一个对象，每次引入js文件都要给这个文件起一个对象名字，通过这个对象名字，就可以调用这个文件里写的属性啊，方法啊之类的东西。等我们见的多了就会发现，万事万物皆对象，文件是对象，类也是一个对象，方法是一个对象，属性也是一个对象，反正就是啥都是对象，面向对象。

然后我们接着说这个Vue里为什么把对象名一写就完事呢，那自然是有原因的，以前我们在对象里写属性都是，一个key，一个值这样的方式，比如这个el就是key，‘#app’就是值。理论上我们应该这样写：

new Vue({
  el: '#app',
  router: router,
  store: store,
  render: h => h(App)
})

这样大家都看懂了，所以呢，这也是一个新的写法，假如只单独写一个对象名的话，那么js就会自动的将这个对象的名称作为key。

还有这个render，这是一个函数，这种箭头函数，相信大家看看教程就明白了，我就不说啥了，这个render有什么作用呢？这叫渲染，这个render让我想到了PHP里边的render，还真有点类似。为什么用h？官方说用h，咱就这么写就完事，至于里面更深层的缘由，有兴趣可以自行查资料，时间紧迫，我们还是赶紧进行下一步。这一句的作用就是把App组件渲染到id为app的这个div里面。这个App组件是啥呢。我们看11行，这里引入的是src文件里边的App.vue文件，那么为什么只需要写‘./App’而不用写后缀名.vue呢？这又是一个神奇的写法，我记得有个配置，能省略后缀，但是这个新的vue-cli追求0配置，可能已经帮我们配置好了。

结语

大家尽量有时间就系统的学一学，不能像我这样东一榔头西一棒槌。

今天就说这么多，我已经与百度，谷歌，必应达成了战略合作，有什么问题问他们就行，报我名很好使。明天我们就说说这个.vue文件还有这个store和router是啥。