Vue手把手搭建简单项目☞【组件及路由的使用】

       博主是一个纯后端的开发人员，学习前端也是基于兴趣，技术只会一种的话，对于我这种人来说是一件很枯燥的事情，从我的博客中就可以看出来，我在技术上有颗躁动的心；写过python、写过scala，写过hadoop和spark等，当然主要的还是以java为主，作为一个程序猿，一个后端开发工程师来说，不懂前端的技术就无法开发出更好的后端程序，当然不是让我们大家成为一个前后端都通吃的开发人员啊；技术呢，专一项即可，一项精了后，在学其他的技术就不在话下了，你想想，你都可以精通一门技术了，何愁没有能力精通第二门、第三门、第四门呢？当然呢，博主我呢，现在还没有达到精通一门技术的境界，不过我会不断地给自己充电，多接触一些当下比较流行的技术，所谓技多不压身，挺充实的；

                                                                                                                              -- 2018年11月3日08:36:29 Appleyk

       

 

 

一、工具【sublime text3】

 

 

下载地址： https://pan.baidu.com/s/1k0-Xc-nkVaS24vJwov36Cg

 

效果：

 

 

 

 

二、Vue官网起步教程

 

地址：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

 

 

三、安装Vue脚手架，并创建第一个Vue项目

 

（1）检查node.js是否安装【node -v】

 

 

如果没安装，参考：Node.JS安装配置

 

（2）node.js装成功后，会自带npm（nodejs包管理和分发工具）

 

 

（3）建议安装cnpm【淘宝镜像】，下载依赖的模块速度快

 

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

 

（4）安装vue脚手架

 

 npm install vue-cli -g

 

 

 

（5）一切就绪，创建我们的第一个vue项目

 

vue init webpack vue-demo

 

 

 

构建完成后，项目结构图如下：

 

 

 

 

安装所需模块

 

cnpm install

 

 

具体搭建参考：vue环境搭建详细步骤

 

 

 

四、Sublime Text 打开Vue_demo项目

 

 

（1）清除HelloWorld.vue中对我们没什么用的标签及内容

 

 

 

 

（2）查看README.md文件

 

 

 

 

（3）启动项目

 

cnpm run dev

 

 

 

 

 

 

 

 

（4）整理出一个干净的App.vue

 

如果项目没有装路由的，记得安装一下：

 

 

cnpm install vue-router

 

 

 

 

 

router-view:路由--视图，如果不指定该标签，路由映射的网页将无偿呈现【占位符】

 

默认跳转到"/"，即映射到了HelloWorld组件所展示的内容，路由配置在router目录下的index.js中

 

 

 

 

这里注意一点，routes里面的组件是单数形式，不是components，切记切记，如果你随着IDE提示写成了复数形式，那么，恭喜你，你会很郁闷的

 

 

 

 

因为一个url mapping就对应一个vue组件，也就是一个html页面；你想想，如果你在浏览器栏中输入www.baidu.com，跳转的不是百度的首页而是百度旗下的其他子页面，或是你再刷新一下，咦，首页又出来了，那你作为用户，是不是觉得很反感，一个url居然对应不同的页面，你以为选双色球啊，靠运气啊；话又说回来，那我可不可以在vue里面写1：N的路由映射呢，可以，当然可以，我没有规定你不可以写多个，但是我Vue会告诉你，你尽管写，我只匹配第一个我遇到的【这话博主说的哈！哈哈】

 

 

我们再添加一个组件，起名叫，HelloWorld1

 

 

 

 

 

有了新组件后，我们唯一要做的就是去router目录下的index.js中配置路由mapping，如下

 

 

 

 

由于HelloWorld1组件排在了前面，因此，页面显示的就是HelloWorld1组件对应的内容了

 

 

 

 

反之，则是HelloWorld组件对应的内容

 

 

 

 

 

我们正常点，修改组件HelloWorld1路由映射的url值为"/hello"  == 和Java Web 中的Url RequestMapping类似

 

 

 

 

 

 

补充一下，如何消除浏览器地址栏中的#号

 

 

 

 

 

 

 

 

 

 

 

（5）全局入口页面 --- index.html 

 

 

 

 

 

Vue生命周期钩子函数【hook函数】：

 

（1）beforeCreate ： vue实例创建前

（2）created：vue实例创建，可以在实例创建的时候，去请求数据

（3）beforeMount：vue挂载数据，主要用于将vue对象挂载到指定的DOM上

     --- el：'#app'

      --.$mount('#app')

 

 

（4）mounted：数据已挂载到DOM上，页面显示

（5）beforeUpdate：DOM更新之前，页面内容还未发生变化，可以在更新前做数据验证

（6）updated：DOM更新后，页面内容改变

（7）beforeDestory：vue实例销毁前

（8）destoryed：vue实例销毁后

 

具体可参考：详解vue生命周期

 

 

 

 

（6）全局vue实例JS入口，main.js

 

 

 

 

如果注释掉router，会是什么情况呢，大家可以试试。

 

 

 

 

 

 

 

（8）页面是怎么样一步步呈现在我们眼前的？

 

 

      博主刚开始写完玩意的时候，很是费劲，感觉文件是真TM多啊，绕来绕去的，一会App.vue，一会是main.js，一会又是什么index.js，再加上几个组件，愣是把我看萌了，没错，是萌，哈哈

      其实现在明白了后，发现，也就那么回事，我不懂专业术语，所以，让我以自己特有的语言来描述一下，一个简单的vue项目，内部是如何协调工作，最终将页面呈给我们的

      首先，入口index.html，这个是最基本的吧，每个项目都有一个index.html，其body体内就一个div标签，它可不是什么普通的div，它可是有特殊标记的 id = "app"的div，当然你也可以改它，比如改成007，哈哈，但是建议新手不要这样做，别给自己招麻烦

 

 

 

      其次，我们来到main.js这个文件，这个文件干了好几件事，注意是好几件事

 

 

 首先把全局vue对象挂载到id等于app的这个DOM上，即index.html中的div标签上

 其次是使用我们定义好的路由【这个在router目录下的index.js文件中配置路由地址映射】

       

      然后是注册我们的App组件，因为你要显示数据啊，光绑定el，你没有数据你搞么事啊，数据哪来的，待会我们说App.vue

最后，最后，最后，牛逼的事情说三遍，狸猫换太子，使用template，将index.html中id等于app的div标签替换成我们的vue组件标签，而"<App/>"这个名字可不是随便起的，它是组件的名字，但是此组件的名字不同于你在组件内部定义的name，而是由import后面跟的组件名字决定的，就像路由中的name一样，可有可无，你也可以将App.vue中的name注释掉或者改名，但是请在main.js中保持组件的名字统一一致

 

 

 

 

 

 

 

 

 

但是，建议不要这么做，最好是App.vue中组件的name和main.js中引入组件的名称保持一致，为什么呢，请看官方API文档解释

 

 

 

 

 

 

 

main.js的功能就这些了，当然本篇讲的是简单项目，简单的也就这了，接下来，我们讲讲路由

 

       再然后就是router目录下的index.js文件，它会帮助我们引入和使用路由，然后我就可以在里面配置我们整个项目的url路由映射了，其实就是页面跳转，以前是a标签跳转到一个html页面，现在是一个router跳转到一个对应的的vue文件

 

 

 

 

配了路由后，我们就可以根据url值实现vue文件的跳来跳去，因此，接下来，我们讲讲App.vue

 

App.vue是一个全局根组件，为什么这样说呢，因为这个组件特殊啊，直接与项目的index.html挂钩啊，惹不起啊惹不起啊

这个文件里面，说没干什么事情看着也像，但是却干了一件大事，那就是将页面中所有路由跳转的结果放在了这个App.vue中进行显示，不信，你把"<router-view/>"这个标签拿掉试试，哈哈

 

 

 

最后的最后，那就是显示内容的组件Helloworld.vue了。前面都是再讲怎么用，怎么串联，但是缺少一个最重要的环节，就是数据来自于哪？对，没错，就是数据在哪！

你说你index.html，你牛气，不绑定在我App.vue组件上，你能行吗？

你说你App.vue嘚瑟啥，没有我main.js管束者你，你知道自己要被挂载到哪吗？

嘿，说你呢，main.js，没有我index.js声明路由和配置映射，有你什么事啊，你倒是自己想办法实现页面跳转啊？

大家都别逼逼了，你们都牛逼好吧，我看没有我HelloWorld.vue给你们创建数据模板，你们能干啥，看我的

 

 

 

 

      于是乎，有了HelloWorld.vue这个组件，最终整个项目就运转起来了，所以，你不要看浏览器输出个 "Welcome to My Vue.js App"很简单，其实，后台做了很多事情，很多事情，很多事情，你要做的，就是知道这些事情都是干嘛的，知道都是干嘛的后，你才可以继续你的vue学习之旅，否则的话，是很难进行下去的

 

 

 

 

 

 

（9）组件的注册和使用

 

【组件可以减轻重复的工作，类似于Java中的common工具包】

 

  接下来我们添加三个组件，一个组件是网站的头部，比如导航栏，一个是网站的底部，比如网站备案信息等，另一个就是网页的内容，

 

这三个组件我们分别叫做:

网站头部：Header.vue

网站内容：User.vue  【引入Header和Footer组件】

网站底部：Footer.vue

 

我们不扯什么css样式，我们也不整什么复杂的导航栏，我们只介绍如何创建一个vue组件，如何注册和使用它，因此内容可能比较简陋，但是原理都一样，简单的会了，复杂的只是时间问题，好了，我们开始创建我们自己的第一个组件

 

Header.vue

 

 

 

 

有了组件后，我们干的第一件事情就是配置路由，给当前组件指定一个url，因此index.js走一波

 

 

 

 

随后，浏览器查看效果

 

 

 

 

 

当然我们也可以给这个组件添加一个点击事件，看看我们是怎么来做到的

 

 

 

 

如果你在写demo的时候，不小心写错了，如下面

 

 

 

你一眼可能发现不了问题，但是没关系，浏览器会告诉你错在哪的【其实function我们拼错了，少了一个c】

 

 

 

改正后，最终效果如下

 

 

 

Footer.vue

 

这个和Header.vue组件的注册使用方式一样，我就不多说了，直接看效果

 

 

 

 

 

User.vue

 

       上面说的两个组件都是单独的组件，拿不出手，你总不可能把网页的头部和底部单独拿出来给别人展示吧，怎么办，我们可是要复用这两个组件的，因为一个网站的布局，万晨不变的就是头部和底部了，而经常变的就是头部和底部之间的部分了，因此，接下来，我们再定义一个组件，这个组件我们就把它当做是一个html页面，这个页面呢，要复用刚才创建的两个组件header和footer，为了节省时间，我就简单在这个组件里面放一些内容，关键看如何进行组件的局部注册和使用

 

 

 

 

有了数据和组件后，我们在当前页面的根标签下，引入我们的相应的组件标签和数据

 

 

 

 

CSS样式比较简单，就是设置两个颜色

 

 

 

 

同理，有了新组件后，我们要第一时间去router目录下的index.js文件中看一看，是否需要添加新的路由地址映射

 

 

 

 

 

保存后，页面显示效果如下：

 

 

 

 

 

点击后，显示效果如下

 

 

 

 

 

点击hello跳转到

 

 

 

 

其余内容不再细讲，可以去我的GitHub上下载本篇的完整demo，另外，推荐一个JSON API 测试网址：

 

 http://jsonplaceholder.typicode.com/

 

 

 

 

 

 

 

 

五、GitHub代码地址

 

 

手把手搭建简单Vue项目