今天我们来谈一谈Vue的相关事宜。
环境的搭建，网上教程很多，而且也很方便，我就不细说了。
然后我们新建一个文件夹作为它的工作环境——workspace。之后控制台进入到这个文件夹里面，然后执行下面代码来创建我的第一个项目。
vue init webpack 项目名
创建好了之后，就会有这样一个文件夹，里面的文件分布如下所示：
我们简单的来说一说这些文件夹：
build：项目构建的相关代码。
config：配置目录，包括端口号等。
node_modules：npm加载的项目依赖模块。
src：开发目录。
- asserts：放置了一些图片，如logo等。
- components：目录里面放了一个组件文件，可以不用。
- App.vue：项目入口文件。
- main.js：项目的核心文件。
static：静态资源目录，如图片，字体等
index.html：首页入口文件，可以添加一些meta信息或统计代码。
package.json：项目配置文件。
README.md：项目的说明文档，markdown格式。
之后我们进入在控制台上这个文件夹中
cd mytest
然后运行下面这段代码开启项目
npm run dev
用浏览器打开：
结束项目的命令行为
ctrl + C 然后选择y
下面我们就要来修改页面了。
App.vue是整个网页的首页面，然后它又引用了HelloWorld.vue。
<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><ahref="https://vuejs.org"target="_blank">Core Docs</a></li><li><ahref="https://forum.vuejs.org"target="_blank">Forum</a></li><li><ahref="https://chat.vuejs.org"target="_blank">Community Chat</a></li><li><ahref="https://twitter.com/vuejs"target="_blank">Twitter</a></li><br><li><ahref="http://vuejs-templates.github.io/webpack/"target="_blank">Docs for This Template</a></li></ul><h2>Ecosystem</h2><ul><li><ahref="http://router.vuejs.org/"target="_blank">vue-router</a></li><li><ahref="http://vuex.vuejs.org/"target="_blank">vuex</a></li><li><ahref="http://vue-loader.vuejs.org/"target="_blank">vue-loader</a></li><li><ahref="https://github.com/vuejs/awesome-vue"target="_blank">awesome-vue</a></li></ul></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>我们可以修改data中的msg的内容来改变页面内容，比如我设置msg为“Hello World”，则最后页面呈现为：
