大連網(wǎng)站設(shè)計(jì)費(fèi)用友情鏈接源碼
本文主要介紹如何用vue開(kāi)發(fā)的標(biāo)準(zhǔn)化工具vue-cli快速搭建一個(gè)符合實(shí)際業(yè)務(wù)項(xiàng)目結(jié)構(gòu)的hello world網(wǎng)頁(yè)項(xiàng)目并理解vue的代碼文件結(jié)構(gòu)以及頁(yè)面渲染流程。
文章目錄
- 一、準(zhǔn)備工作：安裝node.js
- 二、項(xiàng)目搭建
- 創(chuàng)建項(xiàng)目目錄
- 全局安裝vue-cli
- 使用Webpack初始化項(xiàng)目
- 啟動(dòng)項(xiàng)目
- 學(xué)會(huì)如何修改頁(yè)面內(nèi)容
- 網(wǎng)頁(yè)內(nèi)容是如何展示出來(lái)的
- 方法一：搜索關(guān)鍵內(nèi)容
- 方法二：看目錄
一、準(zhǔn)備工作：安裝node.js
Windows系統(tǒng)的node.js安裝十分簡(jiǎn)易，沒(méi)有環(huán)境安裝經(jīng)驗(yàn)的伙伴可以參考文章：Windows系統(tǒng)下安裝node.js
二、項(xiàng)目搭建
創(chuàng)建項(xiàng)目目錄
我們需要先創(chuàng)建一個(gè)用于放置項(xiàng)目文件的目錄，之后該項(xiàng)目相關(guān)的命令操作都需要在該路徑下執(zhí)行。我們新建一個(gè)hellovue的目錄，然后進(jìn)入到該目錄，命令行路徑提示如下：C:\hellovue>
全局安裝vue-cli
- 運(yùn)行命令：
npm install --global vue-cli - 安裝完畢后，運(yùn)行命令：
vue -V驗(yàn)證安裝情況，如果輸出版本號(hào)，則說(shuō)明安裝成狗
使用Webpack初始化項(xiàng)目
Webpack是一個(gè)模塊打包器。 它的主要目標(biāo)是將 JavaScript 文件打包在一起，打包后的文件用于在瀏覽器中使用。
vue-cli可以使用webpack模板對(duì)項(xiàng)目進(jìn)行初始化，即生成webpack模板的項(xiàng)目初始代碼文件。
可以運(yùn)行命令：vue init webpack hellovue ，然后根據(jù)提示填寫(xiě)項(xiàng)目基本信息以及相關(guān)工具配置。
各個(gè)選項(xiàng)的含義如下：
| 選項(xiàng) | 意思 | 建議 |
|---|---|---|
| Project name | 項(xiàng)目名稱 | 起一個(gè)你喜歡的項(xiàng)目名稱即可 |
| Proiect description | 項(xiàng)目描述 | 描述一下項(xiàng)目是什么應(yīng)用即可；練手項(xiàng)目可以直接默認(rèn)回車 |
| Author | 作者 | 練手項(xiàng)目寫(xiě)自己即可；業(yè)務(wù)項(xiàng)目寫(xiě)團(tuán)隊(duì)名或具體成員名稱 |
| Vue build | 項(xiàng)目構(gòu)建模式 | 回車選擇默認(rèn)方式即可 |
| Install vue-router | 項(xiàng)目是否安裝vue路由 | 選擇yes |
| Use ESLint to lint your code | 是否選擇ESLint開(kāi)發(fā)驗(yàn)證功能 | 建議選擇No，否則可能因?yàn)楦袷綑z查報(bào)錯(cuò)導(dǎo)致代碼無(wú)法運(yùn)行 |
| Set up unit tests | 是否開(kāi)啟單元測(cè)試 | 選擇yes，項(xiàng)目后期越寫(xiě)越完善肯定需要測(cè)試來(lái)保證功能和效率 |
| Pick a test runner | 選擇測(cè)試方式 | 默認(rèn)Jtest即可 |
| Setup e2e tests with Nightwatch | 是否開(kāi)啟e2e測(cè)試 | 建議選擇no |
| Should we runnpm install for you after the project has been created | 項(xiàng)目初始化后是否選擇指定的包管理工具自動(dòng)下載項(xiàng)目所需要的包 | 建議選擇 Yes.use NPM |
啟動(dòng)項(xiàng)目
初始化結(jié)束之后，會(huì)有如下輸出：
上面的輸出已經(jīng)提示我們，如果我們要啟動(dòng)項(xiàng)目，需要運(yùn)行兩個(gè)命令：
cd hellovue：進(jìn)到我們剛才新建并且初始化的子項(xiàng)目中npm run dev：dev模式運(yùn)行項(xiàng)目（開(kāi)發(fā)模式，用于開(kāi)發(fā)者開(kāi)發(fā)和測(cè)試）
運(yùn)行后會(huì)有如下提示：
根據(jù)輸出，我們的項(xiàng)目已經(jīng)運(yùn)行起來(lái)了，瀏覽器訪問(wèn)http://localhost:8080即可以到看到了。于是 我們?yōu)g覽器訪問(wèn)指定地址后可以看到如下頁(yè)面：
學(xué)會(huì)如何修改頁(yè)面內(nèi)容
網(wǎng)頁(yè)內(nèi)容是如何展示出來(lái)的
我們要修改網(wǎng)頁(yè)內(nèi)容，就要知道網(wǎng)頁(yè)內(nèi)容是如何展示出來(lái)的。
首先用你喜歡的編輯器打開(kāi)項(xiàng)目（我個(gè)人偏愛(ài)并強(qiáng)推VS Code），可以看到如下右側(cè)項(xiàng)目代碼文件結(jié)構(gòu)：
如果過(guò)了解過(guò)網(wǎng)頁(yè)開(kāi)發(fā)的基礎(chǔ)知識(shí)，會(huì)知道我們看到的網(wǎng)頁(yè)都是html，然后通過(guò)css和js在html上添加樣式以及交互效果。所以我們可以點(diǎn)開(kāi)項(xiàng)目根目錄的index.html，看到代碼內(nèi)容如下：
index.html內(nèi)容中的<title>與我們看到的頁(yè)面tab名稱是對(duì)應(yīng)的，說(shuō)明我們看到的確實(shí)是這個(gè)html里面的內(nèi)容。但是<body>標(biāo)簽中并沒(méi)有內(nèi)容，那么我們?cè)陧?yè)面上看到的vue圖片、文字和鏈接是哪來(lái)的呢？
這里提兩種探索的方法：
方法一：搜索關(guān)鍵內(nèi)容
我們看到頁(yè)面有三個(gè)文本，所以我們可以直接用IDE搜索這三條文本所在位置，如下：
我們嘗試修改一下找到的HelloWolrd.vue中的Welcom to Your Vue.js App，改成Hello Vue World!并保存，然后刷新瀏覽器查看頁(yè)面是否發(fā)生變化，可以看到頁(yè)面如下：
頁(yè)面內(nèi)容確實(shí)跟預(yù)期一樣發(fā)生了變化。再去看HelloWorld.vue文件中的其他內(nèi)容，可以看到瀏覽器頁(yè)面里展示的其他內(nèi)容也都在這個(gè)代碼文件中。
所以我們可以確定，如果我們想修改頁(yè)面內(nèi)容只需要修改HelloWorld.vue即可
同樣地，當(dāng)我們想進(jìn)一步去探索vue是如何知道要把HelloWorld.vue的內(nèi)容渲染到瀏覽器頁(yè)面上的，我們就可以搜索HelloWorld.vue，看哪里用到了這個(gè)文件。由于HelloWorld.vue搜索結(jié)果為空，于是我們改成搜索HelloWorld，搜索結(jié)果如下：
我們可以看到，這是在一個(gè)router目錄下index.js文件中，根據(jù)名稱可以知道，router控制路由（即瀏覽器地址到代碼文件的對(duì)應(yīng)）, index.js是入口文件。代碼中寫(xiě)明對(duì)于path為/的，對(duì)應(yīng)到的導(dǎo)入的HelloWorld代碼，這意味著對(duì)于地址http://localhost:8080/#/（#后面是/），會(huì)使用/對(duì)應(yīng)的HelloWorld進(jìn)行頁(yè)面渲染。
方法二：看目錄
使用標(biāo)準(zhǔn)化工具來(lái)組織代碼的好處是，文件的位置和命令都有跡可循。我們看到根目錄下index.html之外的文件名字都表明這些文件是一些配置相關(guān)的文件。而其他文件夾根據(jù)名字可以知道：
build是寫(xiě)好代碼之后構(gòu)建完畢用于部署到服務(wù)器上的文件夾config是用來(lái)放配置的目錄node_modules存放項(xiàng)目相關(guān)的依賴包src是source的縮寫(xiě)，所以是存放源代碼的地方static是靜態(tài)的意思，該目錄是用來(lái)存放一些靜態(tài)文件的地方test是放代碼測(cè)試文件的地方
所以如果我們要查找頁(yè)面的內(nèi)容（涉及代碼，屬于可改變的內(nèi)容而非靜態(tài)文件），應(yīng)該在src目錄下找，打開(kāi)src目錄，可以看到三個(gè)目錄和兩個(gè)文件。一般來(lái)說(shuō)，直接存放在目錄下的，是類似于"程序入口"一樣的文件。根據(jù)文件名稱，我們班先嘗試打開(kāi)main.js，查看內(nèi)容
可以看到main.js里面import 導(dǎo)入了一些東西，雖然我們不知道具體是什么，但是我們的代碼是標(biāo)準(zhǔn)化的，所以根據(jù)命名，可以推測(cè)：
App作為appliaction（應(yīng)用）的簡(jiǎn)寫(xiě)，應(yīng)該代表跟應(yīng)用相關(guān)的內(nèi)容；router是路由器的意思，所以應(yīng)該是控制網(wǎng)頁(yè)路由的部分。路由就是道路向?qū)У囊馑?#xff0c;指的是告訴瀏覽器地址欄輸入的地址對(duì)應(yīng)著代碼中哪一部分的內(nèi)容。Vue是我們用的前端框架的名稱。前端框架就是生成頁(yè)面內(nèi)容的工具，所以這里使用了vue()，并且傳入了App和router這兩部分內(nèi)容，以及我們看到了#app這個(gè)用法，app是我們?cè)?code>index.html代碼中看到的<body id='app'></body>的id，所以這里應(yīng)該是定位到了index.html的body位置
根據(jù)以上三點(diǎn)，我們可以基本確定，我們?cè)跒g覽器中看到的內(nèi)容就是從這里傳到index.html并被瀏覽器展示出來(lái)的。
進(jìn)一步，我們查看App的內(nèi)容，看頁(yè)面的圖片和文字是如何引入到頁(yè)面的，打開(kāi)App.vue之后，可以看到內(nèi)容如下：
我們看到光標(biāo)所在位置有一個(gè)<img>引用了一個(gè)logo.png，這就是頁(yè)面展示的vuelogo圖片來(lái)源。至于logo圖片下面的文本和跳轉(zhuǎn)鏈接沒(méi)有看到具體的代碼，只有一行<router-view/>，所以考慮這些內(nèi)容是由這行代碼處理的。
接下來(lái)我們查資料可以知道（看著router-view愣猜只能知道是跟路由和展示有關(guān)，其他的就得靠查資料補(bǔ)充了），在main.js中傳入的router會(huì)把<router-view>替換成與path值對(duì)應(yīng)的components。
打開(kāi)router目錄下的index.js，這里我們?yōu)g覽器輸入的path是/，在index.js中該路徑對(duì)應(yīng)的components是HelloWorld（由HelloWorld.vue導(dǎo)入）
，如下：
于是我們果斷打開(kāi)HelloWorld.vue，可以看到瀏覽器頁(yè)面展示的內(nèi)容基本都在HelloWorld里面了：
但是我們看到代碼中的<h1>內(nèi)容不是我們?cè)跒g覽器看到的Welcome to Your Vue.js App而是{{ msg }}，可以推測(cè)這里是一個(gè)變量引用的方式，msg的值應(yīng)該是Welcome to Your Vue.js App，所以我們搜索找到msg位置如下：
如我們所料，msg的值是Welcome to Your Vue.js App，于是我們將值改成Hello Vue World!，并刷新頁(yè)面，可以看到頁(yè)面內(nèi)容如下：
頁(yè)面展示的標(biāo)題文本變成了我們修改后的內(nèi)容。
我們的推測(cè)都得到了驗(yàn)證，我們也明白了vue是如何將代碼渲染到瀏覽器的。
至此，我們通過(guò)一個(gè)HelloWorld項(xiàng)目掌握了vue如何將瀏覽器地址對(duì)應(yīng)到具體代碼，標(biāo)準(zhǔn)化的代碼文件結(jié)構(gòu)以及如何修改代碼使得頁(yè)面展示我們希望的內(nèi)容。
vue入門(mén)，(●ˇ?ˇ●) 達(dá)成?
寫(xiě)文不易，如果對(duì)你有幫助的話，來(lái)一波點(diǎn)贊、收藏、關(guān)注吧~👇