提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue.js 目录结构

VueJS 结构 目录
2023-09-14 09:14:12 时间

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

 

目录解析

目录/文件说明
build项目构建(webpack)相关代码
config配置目录，包括端口号等。我们初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块
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/，显示效果如下所示:

相关文章