Vue学习（第一天）

Vue.js的第一天，但愿能够坚持学完吧。昨天已经把Vue安装上了，安装的步骤并不难，搜索一下就可以找到。

Vue项目结构

下面的图片是一个Vue项目的目录结构。

 

粗略介绍一下文件夹都是干什么的：

1. build文件夹，项目构建相关代码。
2. config：配置目录，端口号什么的。
3. node_modules:依赖包和模块
4. src：开发目录，包括assets（存放logo），components（没有卵用），App.vue（项目入口），main.js（项目核心文件).
5. static：静态资源目录，图片字体啥。
6. test：初始测试目录，没卵用。
7. .xx文件：基本都是配置文件。
8. index.html:首页入口。
9. package.json：项目配置文件。
10. readme：说明文档。

根据学习博客的内容我尝试写了一个helloworld类的程序，也就是修改src/components目录下的helloworld.vue内容，改完是这样的<template>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'welcome to my first app！'
    }
  }
}
</script>

　　

template里面是展示模版内容，script导入组件。然后用cnpm run dev命令跑项目，结果报错了。搜了搜原来是在用记事本打开编写这个helloworld文件的时候末尾一定要加上换行符，也就是回车一行。

跑起来了。

接着想继续试试其他的代码，可是不知道从项目的哪里开始写，从helloworld里写了几句竟然报了一对错。看起来，还是要往后退两步在继续学：先去下载一个编辑器吧。

经知乎上有人推荐，下载一个vs code+vetur插件的组合似乎非常适合用来开发vue.js。下载一个看看。

 

 以前还真没用过vs code，这种界面简直让人舒服的不行。改完中文设置后，准备下载插件。感觉就是这个东西了：

 

 在别的帖子中看到emmet插件也是十分不错的，可以对html5代码进行补齐，节省开发时间，我们也下载下来。搜索之后下载就可以了，是这个东西：

 

 下载之后需要在设置中用代码进行关联，整了半天也没有出发这个emmet的效果。不过补全似乎是有的，先这样把，配置插件和环境真的让人头大。

不过还有几个非常好用的补全的插件：auto close tag 和 auto rename tag 两个插件。

换了一个例子程序，查了查资料终于知道这个恶心人的报错是什么鬼了：

Component template should contain exactly one root element. If you are using v-if on multiple elemen

这个东西是说只能有一个根元素，所有的组件应该被包含在里面。意思是一定要有个<div>把里面的元素包裹起来

<template>
    <div>
        <div class = "home">home</div>
        <router-link to="list">列表页</router-link>
    </div>
</template>

　效果：

 

 一查果然很多人都发现了写Vue代码的时候可能突然就爆出了几十个错误，让人大吃一斤。在其他人的博客那里看到这样的一句话总结了Vue编程的特点：

 

 

总结是模版替换挂载元素的内容，总而言之看起来Vue开发的学习不是很顺利，但愿明天的学习能简单一些，本来就菜可别报错了= =、