接下来我们来开始编程教程的必备入门实例，Hello world。

项目结构介绍

首先在开始我们的Hello world之旅之前，我们需要看下我们创建好的项目代码结构。

.
├── README.md 
├── .gitignore # git提交时候的过滤文件
├── .editorconfig # 编辑器的项目配置文件，VScode需安装插件《EditorConfig for VS Code》才可生效。
├── babel.config.js # 向后兼容ES语法
├── node_modules # 依赖目录
├── package-lock.json # 锁定安装时的依赖的版本
├── package.json # 名称、描述和版本之类的信息，以及运行、开发以及有选择地将项目发布到 NPM 所需的信息
├── public # 公共文件
│   ├── favicon.ico # 标签栏看到的小图标
│   └── index.html # 编译打包的模版文件
└── src # 项目的主文件目录
    ├── App.vue # 基础组件
    ├── assets # 存放静态资源，例如图标、图片等
    ├── components # 组件的存放路径
    ├── main.js # 项目入口文件
    ├── router # 路由文件存放的目录
    ├── store # 状态管理文件存放的目录
    └── views # 页面存放路径

Hello world

在 views 里创建 hello-world.vue 的文件

<template>
  <div>
    Hello world!!!
  </div>
</template>

在 router/index.js 中创建路由

然后启动程序（npm run serve），访问 http://localhost:8080/hello-world 即可访问到 Hello world 的页面