vue-cli#2.0項(xiàng)目結(jié)構(gòu)分析
項(xiàng)目結(jié)構(gòu)
build
構(gòu)建工具相關(guān)的目錄
config
配置目錄
dist
通過(guò)工具打包生成的最終需要上線的目錄
node_modules
存放本地開(kāi)發(fā)所有的依賴包的目錄
src
源碼目錄
static
存放圖片等靜態(tài)資源的目錄
.babelrc
babelrc是把新的ES語(yǔ)法,編譯成瀏覽器兼容的語(yǔ)法的編譯器,而它需要配置文件.babelrc來(lái)配置預(yù)設(shè)的規(guī)范
.editorconfig
定義和維護(hù)一致的編碼風(fēng)格。用于語(yǔ)法與編程規(guī)范檢查
.eslintignore
你可以通過(guò)在項(xiàng)目根目錄創(chuàng)建一個(gè) .eslintignore 文件告訴 ESLint 去忽略特定的文件和目錄。eslintignore 文件是一個(gè)純文本文件,其中的每一行都是一個(gè) glob 模式表明哪些路徑應(yīng)該忽略檢測(cè)。以下將忽略所有的 JavaScript 文件:
**/*.js
當(dāng) ESLint 運(yùn)行時(shí),在確定哪些文件要檢測(cè)之前,它會(huì)在當(dāng)前工作目錄中查找一個(gè) .eslintignore 文件。如果發(fā)現(xiàn)了這個(gè)文件,當(dāng)遍歷目錄時(shí),將會(huì)應(yīng)用這些偏好設(shè)置。一次只有一個(gè) .eslintignore 文件會(huì)被使用,所以,不是當(dāng)前工作目錄下的 .eslintignore 文件將不會(huì)被用到。
.eslintrc.js
eslint用來(lái)規(guī)范自己的代碼風(fēng)格,減少程序出錯(cuò)的概率
.eslintrc.js就是一種eslint檢測(cè)規(guī)范的配置文件
ESLint 支持幾種格式的配置文件,如果同一個(gè)目錄下有多個(gè)配置文件,ESLint 只會(huì)使用一個(gè)。優(yōu)先級(jí)順序如下:
JavaScript - 使用 .eslintrc.js 然后輸出一個(gè)配置對(duì)象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結(jié)構(gòu)。
JSON -使用 .eslintrc.json 去定義配置的結(jié)構(gòu),ESLint 的 JSON 文件允許 JavaScript 風(fēng)格的注釋。
Deprecated -使用 .eslintrc,可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里創(chuàng)建一個(gè) eslintConfig屬性,在那里定義你的配置。
.postcssrc.js
PostCSS也是規(guī)范代碼風(fēng)格,可以幫助我們提高CSS代碼質(zhì)量。
.postcssrc.js就是檢查css代碼規(guī)范的配置文件
index.html
主頁(yè)
package-lock.json
package-lock.json是當(dāng) node_modules 或 package.json 發(fā)生變化時(shí)自動(dòng)生成的文件。這個(gè)文件主要功能是確定當(dāng)前安裝的包的依賴,以便后續(xù)重新安裝的時(shí)候生成相同的依賴,而忽略項(xiàng)目開(kāi)發(fā)過(guò)程中有些依賴已經(jīng)發(fā)生的更新。類似與yarn.lock
package.json
包管理工具通過(guò)package.json管理依賴包,package.json是一個(gè)包管理的配置文件
README.md
項(xiàng)目的說(shuō)明文件
. yarn.lock
類似于package-lock.json
重點(diǎn)了解一下src目錄
main.js
// node_modules中引入vue模塊。 import Vue from 'vue' // 當(dāng)前目錄的app.vue文件 import App from './App' // 引入router.js import router from './router' // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false // eslint規(guī)范,/* eslint-disable no-new */不寫(xiě)就蹦了,為什么? // 因?yàn)閖s中new 一個(gè)對(duì)象的時(shí)候,規(guī)范的寫(xiě)法是賦值給某個(gè)變量,這里設(shè)置eslint-disable,就是為了檢測(cè)時(shí)跳過(guò)接下來(lái)這行代碼 /* eslint-disable no-new */ new Vue({ el: '#app', router, //根組件的模板 template: '<App/>', //子組件 components: { App } })
App.vue
這是一個(gè)單文件組件,而且是根組件,是在main.js中渲染的模板和子組件
它和之前的寫(xiě)法不一樣,但是道理是一樣的,之前的<div id=”app”></div>作為根組件模板是直接寫(xiě)在html中,現(xiàn)在是通過(guò)模板的形式渲染到頁(yè)面
template:
模板中的根元素只能有一個(gè),它會(huì)被渲染成組件的根元素,
script:
組件的數(shù)據(jù),方法,通過(guò)export.default導(dǎo)出
style:
css部分
router.js
路由配置
路由肯定是要導(dǎo)出的
export default new Router({
routes: []
})
開(kāi)始配置路由:
export default new Router({
routes: [
{
path: '/home',
name: 'home'
// 它的組件是home組件
component: home
},
{
path: '/about',
name: 'about',
// 它的組件是about
component: about
}
]
})
這里用到了Router構(gòu)造函數(shù),還有各自的組件,所以不要忘了在首行導(dǎo)入 vue 和 vue-router 和組件
// 引入vue
import Vue from 'vue'
// 導(dǎo)入路由
import Router from 'vue-router'
// 導(dǎo)入模板
import home from '@/components/home'
import about from '@/components/about'
路由會(huì)被main.js引入

浙公網(wǎng)安備 33010602011771號(hào)