当我们初始化一个项目后目录结构是这样的：

 

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

在前面我们打开 APP.vue 文件，代码如下（解释在注释中）：

src/APP.vue

1. <!-- 展示模板 -->
2. <template>
3. <div id="app">
4. <img src="./assets/logo.png">
5. <HelloWorld/>
6. </div>
7. </template>
9. <script>
10. import HelloWorld from './components/HelloWorld'
12. export default {
13. name: 'App',
14. components: {
15. HelloWorld
16. }
17. }
18. </script>
20. <style>
21. #app {
22. font-family: 'Avenir', Helvetica, Arial, sans-serif;
23. -webkit-font-smoothing: antialiased;
24. -moz-osx-font-smoothing: grayscale;
25. text-align: center;
26. color: #2c3e50;
27. margin-top: 60px;
28. }
29. </style>

src/components/Hello.vue

1. <template>
2. <div class="hello">
3. <h1>{{ msg }}</h1>
4. <h2>Essential Links</h2>
5. <ul>
6. <li>
7. <a
8. href="https://vuejs.org"
9. target="_blank"
10. >
11. Core Docs
12. </a>
13. </li>
14. <li>
15. <a
16. href="https://forum.vuejs.org"
17. target="_blank"
18. >
19. Forum
20. </a>
21. </li>
22. <li>
23. <a
24. href="https://chat.vuejs.org"
25. target="_blank"
26. >
27. Community Chat
28. </a>
29. </li>
30. <li>
31. <a
32. href="https://twitter.com/vuejs"
33. target="_blank"
34. >
35. Twitter
36. </a>
37. </li>
38. <br>
39. <li>
40. <a
41. href="http://vuejs-templates.github.io/webpack/"
42. target="_blank"
43. >
44. Docs for This Template
45. </a>
46. </li>
47. </ul>
48. <h2>Ecosystem</h2>
49. <ul>
50. <li>
51. <a
52. href="http://router.vuejs.org/"
53. target="_blank"
54. >
55. vue-router
56. </a>
57. </li>
58. <li>
59. <a
60. href="http://vuex.vuejs.org/"
61. target="_blank"
62. >
63. vuex
64. </a>
65. </li>
66. <li>
67. <a
68. href="http://vue-loader.vuejs.org/"
69. target="_blank"
70. >
71. vue-loader
72. </a>
73. </li>
74. <li>
75. <a
76. href="https://github.com/vuejs/awesome-vue"
77. target="_blank"
78. >
79. awesome-vue
80. </a>
81. </li>
82. </ul>
83. </div>
84. </template>
86. <script>
87. export default {
88. name: 'HelloWorld',
89. data () {
90. return {
91. msg: '云 Vue.js 教程'
92. }
93. }
94. }
95. </script>
97. <!-- Add "scoped" attribute to limit CSS to this component only -->
98. <style scoped>
99. h1, h2 {
100. font-weight: normal;
101. }
102. ul {
103. list-style-type: none;
104. padding: 0;
105. }
106. li {
107. display: inline-block;
108. margin: 0 10px;
109. }
110. a {
111. color: #42b983;
112. }
113. </style>

打开页面 http://localhost:8080/，显示效果如下所示: