初始了解Vue

什么是Vue？

Vue.js是一套构建用户界面的渐进式框架。就从我理解的层面来看，它就是把HTML、CSS以及JavaScript合三为一的视图层。在Vue的官网里有一段对Vue进行详细解说的视频，我觉得对于初学者是很有帮助，能够让你快速入门。当然，官网还有很多文档，大家也可以去学习。
官网地址：https://cn.vuejs.org/

打开Vue的大门

最开始接触Vue的时候，我根本就不知道怎么入门，看了视频后，我就喜欢上了这个框架。
开始学习了！！！
我朋友就建议我下载idea，（这个软件，我在上一篇博客也阐述过）。接下来就是Vue的环境配置了，这个我也是在网上百度的，不得不说，百度真的强大。
我们最主要安装了npm后，还要下载一些style-loader等等。不然运行的时候会报各种各样的错误，我就是在这么崎岖的路上爬过来的。
等到大家配置完了各种环境后，界面应该是这样子的。

这个红框就是我们下载的依赖，里面的文件超级多。
然后，我在下面总结了一些小问题：
1、大家如果之前做什么项目，把端口号占用了，没关系，我们可以改端口号，打开我们的config的文件夹，点击index.js。将端口号改成你没有占用的端口，我朋友说改成10086，看你们自己吧。
2、我们图片中还有一个route的文件夹，有的小伙伴可能没有，不要疑惑，不要觉得你安装的npm是个坏的。在进行webpack安装项目的时候，就有一句话问你是否要安装路由，有的小伙伴可能看着教程做，没有安装route，直接选择了NO。所以也就没有了，不过我这篇博文是需要用到的哦！
3、route文件夹下面有一个index.js，这里怎么去写了？我们首先要了解什么是路由，简单的解释就是，你可以进行页面的跳转，你可以输入相应的地址跳转到相应的页面。如图：

敲黑板，划重点，这里要考的。import 是导入，你要将你写的Vue文件导入到这个路由里面来，这里就拿helloworld为例，from是文件所在的目录，一定不要写错，不然肯定报错，其次，在export default之后，你看routes是个数组，在里面有很多属性，分别解释一下：

• path，就是路径，你输入端口号之后紧跟着的那串东西，就是你要运行文件的Path。
• name，你就随便输入嘛，最好跟你项目同名，也方便书写代码。
• component，这里就是你导入时候写的那个单词，就是import后面的那个单词。

准备工作

哦嘞嘞，这么快就做项目了，啥都不懂。不害怕，我们首先在component的文件夹下面新建一个项目，一定要新建后缀名为vue的，所以，我们要在idea里面下载一个可以解析vue文件的小东西。点击file文件下的settings，再点击Plugins，然后点击第二个红框。如图：

在搜索框里面输入vue.js，然后点击install进行安装，重启idea。（注：我之前就安装过，所以没有安装的按钮）

好了，现在还不能正式开始，我们做这个项目的时候引入了elementUI，所以我们要下载他以及下载他所支持的css的文件，我们就在文件里面的terminal或者cmd里面输入npm i element-ui -s 可以安装elementUI，大家也可以去官网查看。
安装配置成功后，我们需要修改我们的src/main.js的文件，具体内容如下：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'

Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  components:{App},
  template:'<App/>'
});

ok ，准备工作，over！！！

To Do List

那我们就来玩玩项目吧，首先我们创建一个todolist.vue。具体路径是在component的文件夹下面，这个位置自己随意即可，只要调用路径正确，就不是问题。
todolist.vue

<template>
  <div>
  <el-input v-model="message" placeholder="请输入内容"  style="width: 120px"></el-input>
    <el-button round @click="clickme">添加</el-button>
    <div>
      <Doitem  v-for="(item,index) in items" :content="item" :index="index" @delete='deleteme(index)'>
      </Doitem>
    </div>

  </div>
</template>

<script>
  import Doitem from "./Doitem";
  export default {
    components: {Doitem},
    data() {
      return {
        message: '',
        items:[]
      }
    },
    methods:{
      clickme:function () {
        if(this.message==='') return;
        this.items.push(this.message);

        this.message=''
      },
      deleteme:function(index){

        this.items.splice(index,1)
      }
    }
  }
</script>

<style scoped>

</style>

注意文中出现了Doitem，这是啥啊？嘿嘿，这就是自己注册的组件，如图：你可以看见我们里面写的import语句，以及组件的调用。这里可以理解为Doitem也是一个vue的文件。

Doitem.vue

<template>
  <li>{{ content}}
    <i class="el-icon-delete"  @click='clicksubmit'></i>
  </li>
</template>

<script>
    export default {
      name: "Doitem",
      props:['content','index'],
      methods:{
        clicksubmit:function () {
          this.$emit('delete',this.index)
        }
      }
    }
</script>

<style scoped>

</style>

最后要注意route文件夹下的index.js文件里面要写导入文件以及他的路径：

import List from '@/components/todoList'
 {
      path: '/list',
      name: 'List',
      component:List
    },

OK，具体项目就是这样的了，大家运行时候要输入好地址，像我这样的话，运行就是：localhost：2048/#/list/list ,这样就可以直接运行这页面了。
prefect！！！
对于为什么要使用elementUI，因为超级好看啊，大家也可以去官网了解一下，具体地址: http://element-cn.eleme.io/#/zh-CN/component/quickstart
这个小项目里面还涉及了props传值，父子组件通信，所以大家一定要好好的去分析，有什么问题大家也可以问我。代码逻辑也很乱，也希望大家给我意见。（微笑.jpeg）