安装并搭建第一个vue工程 -- hello world（入门级）

    由于项目要用Vue框架，学习搭建了一个，发现vue框架是将html代码模板化，用很多个Template组合成一个页面。之前用过dojo，也是类似的方式。

    本文会讲一些使用vue的一些理解和感悟，如果有不对的请在评论中提醒我，话不多说开始吧！

    1.安装vue（使用NPM） 推荐

            

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack mypro
# 安装依赖，走你
$ cd my-project
$ npm install

    注意事项：期间会有很多选择，如：是否安装router(路由)、Eslint(vue代码校验工具)，推荐都选y，都蛮有用的

    非NPM请见：详细安装教程

    2.启动服务

当我们输入了：

$ cnpm run dev

会将工程启动，默认8080端口，在浏览器中可以查看到效果图。

    3.修改HelloWorld.vue文件

在*\mypro\src路径下，有这个工程的主要资源文件

assets里面存放的是一个大大的V(Vue的logo)图片

components中存放的是我们要修改的helloworld.vue文件

router里面存放的是index.js路由（后面也会讲作用）

进入components->打开helloworld.vue文件

我使用的编译器是WebStorm，在编译器中安装Vue插件和EsLint插件才可以编辑*.vue文件。

参考：各种编译器添加EsLint

 helloworld.vue里面我们可以看到，主要有三部分组成，template、script和style scoped

分别对应： HTML、script、css

将template修改成：

<template>
  <div class="hello">
    <h1>{{ msg }}World</h1>
  </div>
</template>

注意：{{  }}表示数据绑定，如果之前接触过Angular就会有所了解，查了下资料，Vue也可以双向绑定，使用v-model

将script修改成：

<script>
export default {
    name:'HelloWorld',
    data () {
      return {
        msg: 'Hello'
      }
    }
}
</script>

将style scoped 修改成：

<style scoped>
h1{
  font-weight: normal;
}
</style>

大功告成，这样打开浏览器看看你的杰作吧。

是的就是这么酷炫！

下面讲原理！重点来了！！！

点击这个神奇的传送门