Vue項目結構梳理

Vue項目結構圖：

簡單介紹目錄結構

build目錄是一些webpack的文件，配置參數什么的，一般不用動 
config是vue項目的基本配置文件 
node_modules是項目中安裝的依賴模塊 
src源碼文件夾，基本上文件都應該放在這里。 
　　—assets 資源文件夾，里面放一些靜態資源 
　　—components這里放的都是各個組件文件 
　　—App.vue App.vue組件 
　　—main.js入口文件 
static生成好的文件會放在這個目錄下。 
.babelrc babel編譯參數，vue開發需要babel編譯 
.editorconfig 看名字是編輯器配置文件，不曉得是哪款編輯器，沒有使用過。 
.gitignore 用來過濾一些版本控制的文件，比如node_modules文件夾 
index.html 主頁 
package.json 項目文件，記載着一些命令和依賴還有簡要的項目描述信息 
README.md 介紹自己這個項目的，想怎么寫怎么寫。不會寫就參照github上star多的項目，看人家怎么寫的

我混淆不清楚的幾個文件

1.index.html 
主頁我們可以像平時普通的html文件一樣引入文件和書寫基本信息，添加meta標簽等。

2.main.js 
這里是入口文件，主要作用是初始化vue實例並使用需要的插件。

import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

 

3.App.vue 
這是一個標准的vue組件，包含三個部分，一個是模板，一個是script，一個是樣式，這里需要了解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>

 

在webpack的配置文件里，設置了main.js是入口文件，我們的項目默認訪問index.html，這個文件里面<div id="app"></div>和App.vue組件里面的容器完美的重合了，也就是把組件掛載到了index頁面，然后我們只需要去建設其他組件就好了，在App組件中我們也可以引入，注冊，應用其他組件，后面我會介紹如何通過路由將其他組件渲染在App組件，這樣我們就只需要去關注每個組件的功能完善。

就是說vue的默認頁面是index.html，index中的<div id="app"></div>掛載了App.vue這個大組件，然后所有的其他子組件（hello.vue等）都歸屬在App.vue這個主組件下。

main.js 是入口文件，作用是初始化vue實例並使用需要的插件（router等）。