目錄解析

目錄/文件 說(shuō)明
build 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
config 配置目錄，包括端口號(hào)等。我們初學(xué)可以使用默認(rèn)的。
node_modules npm 加載的項(xiàng)目依賴(lài)模塊
src
這里是我們要開(kāi)發(fā)的目錄，基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件：

assets: 放置一些圖片，如logo等。
components: 目錄里面放了一個(gè)組件文件，可以不用。
App.vue: 項(xiàng)目入口文件，我們也可以直接將組件寫(xiě)這里，而不使用 components 目錄。
main.js: 項(xiàng)目的核心文件。
static 靜態(tài)資源目錄，如圖片、字體等。
test 初始測(cè)試目錄，可刪除
.xxxx文件 這些是一些配置文件，包括語(yǔ)法配置，git配置等。
index.html 首頁(yè)入口文件，你可以添加一些 meta 信息或統(tǒng)計(jì)代碼啥的。
package.json 項(xiàng)目配置文件。
README.md 項(xiàng)目的說(shuō)明文檔，markdown 格式
在前面我們打開(kāi) APP.vue 文件，代碼如下（解釋在注釋中）：
src/APP.vue

<!-- 展示模板 --> <template><div id="app"><img src="./assets/logo.png"><hello></hello></div> </template><script> // 導(dǎo)入組件 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>

接下來(lái)我們可以嘗試修改下初始化的項(xiàng)目，將 Hello.vue 修改為以下代碼：
src/components/Hello.vue

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

重新打開(kāi)頁(yè)面 http://localhost:8080/，一般修改后會(huì)自動(dòng)刷新，顯示效果如下所示:

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。