零基础小白的vue前端框架实战学习笔记！

写在前面：

这里是上海某高校软件工程专业在读研究生一枚。我本科时基础比较薄弱，对于前端的了解也仅限于html+css+jsp，因此在这个格外漫长的寒假，我在b站上跟着学习了vue+elementUI的实战教程。基本可以说是零基础的我很幸运的遇到了保姆级教程，但是光跟着敲代码似乎也不行，因此决定写一篇博文将自己学习到的一部分内容记录下来。这篇博文并不是完整的教程，只是对我自己有所帮助的地方。如果这篇博文有幸被其他同样是小白的人看到，你们可以通过点击下方的链接直接去b站跟着学习，真的很详细；如果有幸被大佬们看到了，希望能获得一些批评指正。谢谢！（磕头

一些链接：

首先放上视频链接：视频教程点击这边
然后放上最后完成的样式：成品点击这边
最后是前端完整代码的码云地址：完整代码点击这边

正文开始：

一、使用vue脚手架
首先先通过npm安装vue，最后输入vue -V的时候如果出现如下图所示，就代表安装成功了。具体的步骤可以参考：菜鸟教程的Vue.js安装
总之最后在终端输入vue -V的时候出现如下信息就代表安装成功啦！

vue-cli3以上会提供ui界面（通过vue ui命令进入），对于我们生成项目，安装插件依赖以及后续的编译等都会提供很大的便利。
安装完vue之后，通过ui界面可以创建出脚手架，ui界面的导航条如下图所示。

这边使用ui确实很方便，比如说接下来要安装elementUI插件，就可以直接在插件里进行搜索并安装；需要运行的时候也不需要在终端输入npm run serve命令，可以直接在任务中的编译里进行编译并在编译没有问题的时候进行启动。

二、elementUI框架
在学习这个之前，我使用的比较多的是Bootstrap框架（ 因为这个框架比较简单 ），这也是我第一次接触到elementui框架，真的很好用！它应该是专门搭配vue来用的吧，总之比较好上手，而且官方文档非常的详细，对新手小白（我）非常友好。
官方文档点这里
之前说到在vue ui界面安装了elementui插件，还要在生成的vue项目中的main.js文件中导入一下。

import './plugins/element.js'

接下来就可以愉快地使用文档中提供的各个组件啦～

三、vue组件
vue的样式是写在组件里的，在component文件夹下建立一个个*.vue文件，然后在vue文件中写样式，方法等。每个vue文件的基础由三个部分构成。

<template>
    <div>
        <!--这里写的是ui-->
    </div>
</template>

<script>
// 这里是方法和数据等
export default {
  data () {
    return {}
  },
  methods: {}
}
</script>

<style>
</style>

然后每写完一个组件，需要在router文件夹下的index.js中引入并注册一下，不然是无法显示的。同样的，当使用了elementui的组件时，需要在plugin文件夹下的element.js文件中引入并注册，不然样式无法出来。（因为这边我们使用的是按需导入）

写在最后：

写到这边发现因为我已经把项目做完了，所以很多东西在这个时候已经不知道应该怎么表述出来了，所以显得这篇博文非常的虎头蛇尾。这也是我第一次发博文，希望以后能有进步吧哈哈哈哈，以后要一边做项目一边写～
但我仍然非常推荐像我这样零基础的小白去看这个视频教程，至少现在我对vue已经有了一个大致的了解，并且知道接下来应该去学习什么，怎么学习之类的。
想到学vue是因为最近在看招聘软件，发现前端招聘的都需要对vue框架有了解。一边学习的时候一边懊恼自己本科的时候真的是有点划水，技术真的有点薄弱，希望能在接下来的两年多时间有所提升，成为一名合格的码农吧～（再次磕头！