第一次接触VueCLI

---

前言

接近期末收到老师安排下来的项目，要求前端用Vue写，但那时忙着课程大作业，对vue学习就一直拖延到现在。寒假放假拖延症更加严重了，一直懒懒散散的在B站看教程（众所周知B站是学习网站哈哈哈~）。后面组长的催促开始硬着头皮开敲！

一、接触VueCLI

入门基础首选看官方文档（https://cn.vuejs.org/v2/guide/）。但我在什么都不会的时候看不进去官方文档，所以我选择了学习网站——B站！在B站搜索Vue，就有很多教程视频选了时间比较短的（毕竟要赶着开工了/(ㄒoㄒ)/）。这个教程老师讲得很基础结合了实例，懵懂的明白了Vue框架的浅层
（ps：白嫖党这次投币了哈哈哈）

了解了表层后，发现VueCli还是不清楚，我还是比较蠢再搜索了其他视频没有找到适合我这种没基础智商又比较低的/(ㄒoㄒ)/。
想起这个学期选修的Nodejs老师还教Vue（可惜课程冲撞了没去蹭课）赶紧去把课件下载下来了。
可能适应了老师讲课模式所以课件看得很舒服哈哈哈，但还是不太懂/(ㄒoㄒ)/。

---

这里附上课件： [提取码：jjma](https://pan.baidu.com/s/1n_nbAygFRGYCcO04G9o7Aw)

课件前面主要还是基础，但涉及组件、自定义、生命函数…。后面有VueCli介绍，还有Vuex等等，发现太多东西了，自己目前了解到的只是冰山一角。决定开始上手！边学边写！（因为再不动手写越了解越难越难越想放弃哈哈哈）

二、开始上手

1.环境配置

因为Node课程的学习所以环境配置已经配好了，面向百度编程，对于环境配置也不难。（课件8.1）

使用element框架（本来想用bootstrap但组长说直接用element方便，而我的内心OS：vuecli都不是很会又得新接触一个UI）

附上官网：(https://element.eleme.cn/#/zh-CN/component/installation）
直接参考官网提供的组件案例就能很快上手！

2.创建项目

参考课件9.1老师的代码，先运行，然后模仿写出项目的大致，加上UI

对于路由、组件这块还是很模糊，但敲起来就会越敲越清晰，所以代码还是得多敲呐！

3.发现的小神奇

1. 路由篇

• 关于多个路由代码分离
  根据课件12.2的代码，发现路由有个神奇之处
  
  
  将路由分开.js写，在index.js引用，这样方便简洁又清晰好多！下面开始“抄袭”！
  
  针不戳！！！
• 关于地址的#
  据组长提醒：
  才发现原来有#，然后面向百度编程说是路由在默认的hash模式下才有#
  除去#：在router目录下index.js中加入

// An highlighted block
const router = new VueRouter({
    mode: 'history',
    routes
});

2. element篇

• 关于响应式布局
  使用element提供的Layout 布局（跟bootstrap很像！）结合原生响应式的样式设置就很完美！
• 关于导航根据当前路由显示当前选中
  发现了小问题就是导航不会根据路由进行选中状态，然后面向百度编程，找到了解决方法
  在导航组件el-menu中添加方法：
  

:default-active="activedMenu()"

添加方法

//根据导航index属性定义的路由名称添加对应的值
methods: {
    /**根据路由动态选中导航 */
    activedMenu() {
      if (this.$route.path.indexOf("/index") == 0) {
        return "/index";
      } else if (this.$route.path.indexOf("/base/findJob") == 0) {
        return "/base/findJob";
      }  else if (this.$route.path.indexOf("/base/baseDetail") == 0) {
        return "/base/baseDetail";
      }
    },
  },

//对应的导航栏
    <el-menu-item index="/index">首页</el-menu-item>
    <el-submenu index="/base">
      <template slot="title">实习基地</template>
      <el-menu-item index="/base/findJob">招聘信息</el-menu-item>
      <el-menu-item index="/base/baseDetail">实习基地信息</el-menu-item>
    </el-submenu>

3. 图片篇
   因为跟另外一个人合作写，然后把大致需要的框架（路由什么的配置好，然后只要往里面添加内容就可以了）写完发给他，他说他的图片不显示，我就纳闷了，然后面向百度，在App.vue里需要引用图片（ps：我这里是可以正确显示了，但他那里还是不行不知道为什么了…）
   

总结

一时兴起想着把这次的学习记录下来，以上是大前天的事情了，具体还踩了好多小坑，但面向百度从坑里出来了，感谢百度里的大佬们的分享！好人一生平安！！还有还有越敲会越发觉得自己了解只是冰山一角罢了.../(ㄒoㄒ)/

---

要坚持记录！（如果懒癌没有发作的话哈哈哈）好好学习，天天向上！面向百度编程，一起加油呐！