vue-cli#2.0項目結構分析

項目結構

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引入

import router from './router'

new Vue({
  // ..
  router, // 注入router選項，後面可使用this.$route訪問到路由對象，可使用this.$router訪問到路由器對象
  // ..
})