Vue 项目通过 npm 及 vue 创建后，我们可以在 IDE（VSCode、IDEA、Eclipse、Atom 等） 中打开项目，下面详细介绍目录文件结构。
目录文件结构
| 目录/文件 | 类型 | 说明 |
|---|---|---|
| build | 目录 | 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。 |
| config | 目录 | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | 目录 | npm 加载的项目依赖模块，这里面有很多很多内容，不过高兴的是，我们也不用管。 |
| src | 目录 |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 目录 | 存放静态资源的目录，如图片、字体等。 |
| test | 目录 | 初始测试目录，如果想做单元测试等，可在该目录进行；除此之外，该目录基本可以删除。 |
| .xxxx 文件 | 文件 | 这些是一些配置文件，包括语法配置，git 配置等；基本不用管，放着就是了。 |
| index.html | 文件 | 首页入口文件，基本不用管，如果是开发移动端项目，可以在 head 区域加上你合适的 meta 头。 |
| package-lock.json | 文件 |
在 其实 package-lock 就是锁定安装时的包版本号，需要上传到 git 上，以保证其他人在 install 时候，大家的依赖版本相同。 |
| package.json | 文件 | 项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。 |
| README.md | 文件 | 项目的说明文档，markdown 格式。 |
示例
打开 APP.vue 文件，代码如下（解释在注释中）：
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// 导入组件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 样式代码 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
接下来我们可以尝试修改下初始化的项目，将 HelloWorld.vue 修改为以下代码：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '欢迎来到 knowledgedict！'
}
}
}
</script>