目錄解析

目錄/文件 說明
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

<!-- 展示模板 --> <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>

接下來我們可以嘗試修改下初始化的項目，將 Hello.vue 修改為以下代碼：
src/components/Hello.vue

<template><div class="hello"><h1>{{ msg }}</h1></div> </template><script> export default {name: 'hello',data () {return {msg: '歡迎來到菜鳥教程！'}} } </script>

重新打開頁面 http://localhost:8080/，一般修改后會自動刷新，顯示效果如下所示:

總結

以上是生活随笔為你收集整理的Vue.js 目录结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。