專案結構

build

構建工具相關的目錄

config

配置目錄

dist

通過工具打包生成的最終需要上線的目錄

node_modules

存放本地開發所有的依賴包的目錄

src

原始碼目錄

static

存放圖片等靜態資源的目錄

.babelrc

babel是把新的ES語法，編譯成瀏覽器相容的語法的編譯器，而它需要配置檔案.babelrc來配置預設的規範

.editorconfig

定義和維護一致的編碼風格。用於語法與程式設計規範檢查

.eslintignore

你可以通過在專案根目錄建立一個 .eslintignore 檔案告訴 ESLint 去忽略特定的檔案和目錄。eslintignore 檔案是一個純文字檔案，其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。以下將忽略所有的 JavaScript 檔案：

**/*.js

當 ESLint 執行時，在確定哪些檔案要檢測之前，它會在當前工作目錄中查詢一個 .eslintignore 檔案。如果發現了這個檔案，當遍歷目錄時，將會應用這些偏好設定。一次只有一個 .eslintignore 檔案會被使用，所以，不是當前工作目錄下的 .eslintignore 檔案將不會被用到。
 

.eslintrc.js

eslint用來規範自己的程式碼風格，減少程式出錯的概率
.eslintrc.js就是一種eslint檢測規範的配置檔案

ESLint 支援幾種格式的配置檔案，如果同一個目錄下有多個配置檔案，ESLint 只會使用一個。優先順序順序如下：

JavaScript - 使用 .eslintrc.js 然後輸出一個配置物件。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
JSON -使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 檔案允許 JavaScript 風格的註釋。
Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
package.json - 在 package.json 裡建立一個 eslintConfig屬性，在那裡定義你的配置。
 

.gitignore

提交到github遠端庫時被忽略檔案或目錄的配置檔案

.postcssrc.js

PostCSS也是規範程式碼風格，可以幫助我們提高CSS程式碼質量。
.postcssrc.js就是檢查css程式碼規範的配置檔案

index.html

主頁

package-lock.json

package-lock.json是當 node_modules 或 package.json 發生變化時自動生成的檔案。這個檔案主要功能是確定當前安裝的包的依賴，以便後續重新安裝的時候生成相同的依賴，而忽略專案開發過程中有些依賴已經發生的更新。類似與yarn.lock

package.json

包管理工具通過package.json管理依賴包，package.json是一個包管理的配置檔案

README.md

專案的說明檔案

. yarn.lock

類似於package-lock.json

重點了解一下src目錄

main.js

// node_modules中引入vue模組。
import Vue from 'vue'
// 當前目錄的app.vue檔案
import App from './App'
// 引入router.js
import router from './router'

// 設定為 false 以阻止 vue 在啟動時生成生產提示。
Vue.config.productionTip = false

// eslint規範，/* eslint-disable no-new */不寫就蹦了，為什麼？
// 因為js中new 一個物件的時候，規範的寫法是賦值給某個變數，這裡設定eslint-disable，就是為了檢測時跳過接下來這行程式碼
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //根元件的模板
  template: '<App/>',
  //子元件
  components: { App }
})

App.vue

這是一個單檔案元件，而且是根元件，是在main.js中渲染的模板和子元件

它和之前的寫法不一樣，但是道理是一樣的，之前的<div id="app"></div>作為根元件模板是直接寫在html中，現在是通過模板的形式渲染到頁面

template：
模板中的根元素只能有一個，它會被渲染成元件的根元素，

script：
元件的資料，方法，通過export.default匯出

style：
css部分

router.js

路由配置

路由肯定是要匯出的

export default new Router({
  routes: []
})

開始配置路由:

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home'
      // 它的元件是home元件
      component: home
    },
    {
      path: '/about',
      name: 'about',
      // 它的元件是about
      component: about
    }
  ]
})

這裡用到了Router建構函式，還有各自的元件，所以不要忘了在首行匯入 vue 和 vue-router 和元件

// 引入vue
import Vue from 'vue'
// 匯入路由
import Router from 'vue-router'
// 匯入模板
import home from '@/components/home'
import about from '@/components/about'

路由會被main.js引入

原文地址：https://segmentfault.com/a/1190000012781652