目錄結構
用IJ打開vue_project,目錄結構如圖:
目錄詳解:
目錄/檔案 | 說明 |
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:
<!--展示模闆-->
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</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>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue.js真是極好的!'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
重新整理浏覽器:
參考:
【1】、
https://www.runoob.com/vue2/vue-directory-structure.html