掌握我说的这些，vue还只能算入门

原创

brzhang

修改于 2019-07-11 14:33:31

8180

修改于 2019-07-11 14:33:31

文章被收录于专栏：玩转全栈玩转全栈

闲的蛋疼，突然想做点h5开发了，对比了一下react和vue，果断选择了vue作为学习框架，一来是因为之前做小程序，比较熟悉vue这套模式，二来因为vue的的确确上手比react要轻松很多。

vue页面的框架结构

<template>
    <div>书本详情</div>
</template>

<script>
    export default {
        name: "bookDetail"
    }
</script>

<style scoped>

</style>

template作为设计师给你的h5模板，理论上你应该放在这个里面，但是却不一定要全部放在里面，实际操作上我们可以把需要变动的那部分抠出来放进去。

script毫无疑问就是我们主要的代码部分，如果要和template发生点什么关系，我们可以简单的理解为，template里面预备了一些坑位，而坑位里面需要一些数据，就是从script里面生成出来的，因为，我们进一步理解，script里面的一些属性啊，计算属性啊，方法啊，其实全部都是为了数据，数据，数据，包括后面要讲到的vuex，本质上也是处理数据。数据变了，template就跟着变了，嗯，这既是MVVM了。

style作为设计师给到你的css，你可以放在这里面，当然，我了解到有些团队的设计师并不会给一块块的css，那么实际上你也没有必要放到这里了，当然，这改变不了这里是放样式的这样一个事实。

vue中的路由vue-route

单页面的应用几乎是不可能玩得转的，现在哪个业务没有十来个页面的，而vue中的路由就是为了维护这么写个角色嗯，页面之间的闪亮登场的，但我说页面可能并不对，说准确点应该是组件，但我说组件可能有不大好理解了，那么还是姑且称之为页面块吧。

要玩会路由，至少需要了解两个api，

router-link

router-link让我们可以导向那个页面，当然高级点的玩法是可以带点参数的，当然更加高级点的玩法是可以做点转场动画的。

router-view

router-view没有什么我只想说，他就是一个装路由的盒子而已，你配置好的页面块集合，是的，其实就是那个路由表，将会和这个关联起来，通常加载的第一个页面就是那个path=='/'的那个页面，然后结合上面的router-link，似乎就可以转起来了。

那么问题来了，你觉得你的业务仅仅只有一层路由吗？很显然，同学，你可能严重低估了产品同学的创造挖坑能力，当然即便这个锅不给产品同学来背，我们也有可能给自己来挖一个，因为，我们需要组件化。没错，没有那个大型的项目是不这么做的，不做么做的通常都在沙滩上，那么，什么是组件化。

嗯哼，不要告诉我蓝色方块中的每一个tab页不是一个组件，那既然他是一个组件，那么这里一个是不是也需要放一个router-view来管理这些个tab对应的页面块呢？

vue中的全局数据共享

为什么需要数据全局共享，其实这是一个哲学问题，因为需要所以存在，而并不是因为存在所以我们需要它，vuex的出现实际上是为了解决跨页面数据互通而诞生的一个强大的刚需插件，你可能说，我并不需要他，我只需要在window对象上挂一个全局变量就可以了，哈哈，其实不好意的说，我一开始也是这么想的，也是很无耻的坚持了一段时间，实在是坚持不下去了，因为实际上这种数据并没有交给vue来管理，因此，需要我们自己管理，因此出现了一些隐藏的很深的bug。使用vuex之后，世界终于清静了。

那么，怎么玩Vuex呢？

要完会vuex，你需要理解两个概念：

vuex把数据放在store中，你可以直接取里面的数据，这些数据是vue维护的，也就是说，是响应式的。数据的改变需要commit mutation，嗯，提交变更，这就想数据库一样，你要修改数据库记录，你需要执行update xxx from t where ...，嗯，姑且这么理解，反正就是不能直接修改，直接修改，有些过程就触发不了，自然而然，响应式就是一纸空谈了。

export defalut的坑与import xxx from yyy 的坑

嗯，这里是一个小插曲，表示个人对js语法的一点卑微的抗议吧，首先，我不知道

export default router 和 export default {router}居然不是一个意思，而且export default只能有一个,不需要写{}，export语法可以写多个，但是要带上{}。
import Main from './Main.vue'与import Main from './main.vue'其实是一个意思，【what's your problem】，这让我肯困惑啊，同时，vue可省去，但是省掉同样会出现一点小问题。
import Main from './Main'`实际上会指向maim.js文件，并没有指向Main.vue，呵呵，有点受够了这种不严谨的语法了~~

我敢说，只要弄清楚以上的一些事情，使用vue做h5开发你才算入门了，当然入门是不够的，如果需要玩得很6，至少需要有一下几个方面的意识：

webpack的了解。
自动化测试，mocha和nightwatchjs

你一定不想在每个迭代之后把所有功能都人工回归一遍，太浪费时间了，修改一个函数，你能保证你不影响其他用到这个函数的功能，哪里来的自信呢？嗯，用自动化测试，就是这么自信。

响应式原理了解

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染

混入-复用

把他想象为组合优于继承

如何做一个插件

vue-loader是插件，vue-router也是插件，vuex也是插件，插件从某种角度上来讲简化了我们的工作，减少了代码，促进了工程化，自己从事的项目或多或少会有一些比较特殊的重复的工作，那么可以尝试用插件来简化。

VUE3.0解决跨域调试的问题

使用vue3.0脚手架生成的项目，你是看不到webpack相关配置文件的，甚至vue.config.js文件也没有，这样做其实是为了隐藏细节，对开发者更加透明，专注于自己的业务，好了，闲话也不用多说了，这里的重点是怎么解决跨域调试的问题。那么问题来了，我们遇到了这样一个问题：

嗯，典型的跨域了，这里不懂跨域的同学可以去搜一下什么是跨域，那么，怎么解决跨域呢？

首先，我们得在项目工程先新建一个vue.config.js文件，如果你的项目已经有了，那么忽略，继续下一步。
在里面配置一个

这个配置的意思是像这样的一些请求，比如

'api/getlist/full'会被转发到'https://xxx.com/getlist/full'请注意前面那个请求可没有什么http的头部。

然后需要修改一下axios配置，这一点很重要，因为我们要为调试环境构造一个以'api'开头的请求url。

   let protocol = window.location.protocol

   let host = window.location.host //主机

   let reg = /^localhost+/

   if (reg.test(host)) {
        //若本地项目调试使用
       axios.defaults.baseURL = '/api'
   } else {
        //动态请求地址
       axios.defaults.baseURL = `${protocol}//xxx.com`
   }

然后一切就ok了，你现在可以happy的在本地调试了，再也不用打包好脚本，上传到服务器，然后开始调试，开发效率直接上升1000%。