原創(chuàng)文章愿待，轉(zhuǎn)載請(qǐng)注明：轉(zhuǎn)載自技術(shù)哥

微信訂閱號(hào)：技術(shù)哥

技術(shù)哥

給你不一樣的世界

image

在上一期的vue教程我們搭建好了vscode的開發(fā)環(huán)境后铜秆，寫下第一行代碼"Hello World！"椎例，大家有沒有好奇為什么這行代碼要寫在HelloWorld.vue呢？今天就為大家講解下vue工程目錄、webpack模板祥得、入口文件到目標(biāo)組件

一. webpack工程模板

我們起初是通過行命令生成vue工程的
vue init webpack my-project

在新建工程時(shí)它也會(huì)詢問我們一些關(guān)于我們要工程的問題，這里給大家詳解一下

image

• project name：工程名

• project description：工程描述

• author：作者姓名

• vue build：有standalone與runtime-only build兩種蒋得，分別為獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建级及。后者刪除了模板編譯的功能，因此無法支持帶 template 屬性的 Vue 實(shí)例選項(xiàng)窄锅。具體vue官網(wǎng)有詳解：https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

• install vue-router：vue-router路由組件创千。選上會(huì)安裝并默認(rèn)配置一個(gè)寫好的vue-router模板

image

• Use eslint to lint your code：用eslint規(guī)范你的代碼。eslint是vue的一個(gè)語法規(guī)則和代碼風(fēng)格的檢查工具入偷，但其可能會(huì)給代碼語法做太多約束追驴，建議關(guān)閉

• Set up unit tests：建立單元測(cè)試模塊。單元測(cè)試一般用來封裝大型公共組件時(shí)用的,一般不需要

• setup e2e tests with Nightwatch：通過Nightwatch建立端對(duì)端單元測(cè)試疏之，一般不需要

• should we run 'npm install' for you after the project has been created：新建工程后殿雪，后續(xù)通過什么來安裝其他依賴，有npm锋爪、yarn丙曙、none選項(xiàng)爸业，選npm

Webpack工程模板建立完成，但webpack在vue里扮演什么角色亏镰，怎么去配置它呢扯旷？

image

• 是什么：如上圖所描述的，webpack就是可以把vue工程整合打包索抓，方便vue組件化钧忽。我們通過代碼 npm run dev默認(rèn)在本機(jī)8080端口打開瀏覽器調(diào)試也是webpack打包的結(jié)果

• 如何配置：可以進(jìn)入到工程目錄下build/webpack.base.conf.js里進(jìn)行修改，如alias項(xiàng)配置入口位置逼肯，rules配置是否引用eslint等耸黑。

二. 工程目錄

image

• build：webpack目錄

• config：webpack目錄2

• node_modules：npm代碼倉(cāng)庫(kù)

• Src：根目錄

• Src/assets:圖片音頻資源文件夾

• src/components：.vue組件存放位置

• src/router：vue-router配置文件夾

• src/App.vue：工程根組件

• src/main.js：工程入口文件

• Static:靜態(tài)資源目錄

• package.json：項(xiàng)目配置文件

• index.html：首頁(yè)入口文件

上述基本上就是我們?cè)诰庉媣ue工程時(shí)需要改動(dòng)的文件了。然后我們來打開HelloWorld.vue看看其結(jié)構(gòu)

image

• <template>：html模板篮幢。最外層只允許有一個(gè) <div>

• <script>：js模板大刊。name為唯一標(biāo)識(shí)符，data內(nèi)為.vue文件下的成員變量三椿，methods為.vue文件下的成員方法

• <style>：css模板缺菌。加上"scoped"屬性后，其下內(nèi)容不對(duì)其他.vue組件產(chǎn)生影響

因此赋续，對(duì)應(yīng)的標(biāo)簽內(nèi)寫對(duì)應(yīng)內(nèi)容就是.vue的格式規(guī)范男翰，也是一大特色

三. 從入口文件到目標(biāo)組件

我們可能會(huì)奇怪為什么上次的"HelloWorld"寫在HelloWorld.vue的template標(biāo)簽下在打開瀏覽器調(diào)試的時(shí)候會(huì)顯示出來。其實(shí)整個(gè)工程時(shí)遵循這個(gè)路線來"找到"我們的組件并使它起作用的：

"路由"：從一個(gè)組件到另一個(gè)組件的過程稱為路由纽乱，也可以理解成從一個(gè)頁(yè)面到另一個(gè)頁(yè)面

我們從main.js入口文件開始：

image

• 通過 import[模塊名]from[相對(duì)路徑]引入"vue"總模塊蛾绎、"App"根組件和"router"路由配置文件

• newVue()實(shí)例化vue總模塊

• el:'#app'掛載App.vue根組件樣式

• Router在總模塊Vue里加入上面通過"import"引入依賴的路由配置文件

• component:{App}同理在總模塊Vue里引入App.vue根組件

• template:<App/>引入App.vue模板

入口文件在這里首先匹配的是App.vue，因此工程在啟動(dòng)的時(shí)候首先路由到App.vue鸦列。然后我們進(jìn)入App.vue文件看看

image

<template>里放了一個(gè) <router-view/>標(biāo)簽租冠，表示引用并顯示router下的配置路由，根組件默認(rèn)為第一個(gè)路由

<style>里放了id為"app"的css樣式

注：如果新建工程的時(shí)候沒有安裝vue-router,在工程目錄下是沒有router文件夾的薯嗤，這里的 <router-view/>是直接變成 <HelloWorld/>顽爹，直接路由到HelloWorld.vue組件

然后我們?cè)龠M(jìn)入router/index.js

image

• 通過"import...form..."引入**vue總模塊、vue-router模塊骆姐、HelloWorld組件
  **

• Vue.use(Router)使vue總模塊全局使用vue-router

• exportdefalutnewRouter()實(shí)例化并輸出配置的router

• routes[]配置路由镜粤，path為路徑，name為匹配組件的唯一標(biāo)識(shí)玻褪，component為匹配的組件

所以這里路由路徑為'/'肉渴，即為當(dāng)前路徑，而此路徑下又匹配了HelloWorld.vue這個(gè)組件带射。所以路由到了HelloWorld.vue同规。

綜上，從入口文件到目標(biāo)的整體流向?yàn)椋?/strong>

main.js--->App.vue--->router/index.js--->HelloWorld.vue

工程目錄、webpack模板券勺、從入口文件到目標(biāo)組件就是整個(gè)vue工程的宏觀圖景

---

往期回顧
如何使用CORS解決跨域問題
區(qū)塊鏈教程 | 快速入門
web前端 | vue.js系列教程2
web前端 | vue.js環(huán)境搭建
服務(wù)端 | 如何實(shí)現(xiàn)物聯(lián)網(wǎng)后臺(tái)
服務(wù)器 | 9.9元搭建服務(wù)器

---

關(guān)注“技術(shù)哥”的微信公眾號(hào)查看更多技術(shù)文章