建站
咨詢
售后
建站咨詢
新聞中心
vue項(xiàng)目的標(biāo)準(zhǔn)結(jié)構(gòu)？
Vue 項(xiàng)目創(chuàng)建完成后，使用 Web Storm 打開(kāi)項(xiàng)目，項(xiàng)目目錄如下：
App.vue 是一個(gè)vue組件，這個(gè)組件中包含三部分內(nèi)容：1.頁(yè)面模板（template）；2.頁(yè)面腳本（script）；3.頁(yè)面樣式（style）頁(yè)面模板中，定義了頁(yè)面的 HTML 元素，這里定義了兩個(gè)，一個(gè)是一張圖片，另一個(gè)則是一個(gè) router-view頁(yè)面腳本主要用來(lái)實(shí)現(xiàn)當(dāng)前頁(yè)面數(shù)據(jù)初始化、事件處理等等操作頁(yè)面樣式就是針對(duì) template 中 HTML 元素的頁(yè)面美化操作需要額外解釋的是，router-view，這個(gè)指展示路由頁(yè)面的位置，可以簡(jiǎn)單理解為一個(gè)占位符，這個(gè)占位符展示的內(nèi)容將根據(jù)當(dāng)前具體的 URL 地址來(lái)定。具體展示的內(nèi)容，要參考路由表，即 router/index.js 文件，該文件如下：
這個(gè)文件中，首先導(dǎo)入了Vue對(duì)象、Router對(duì)象以及 HelloWorld 組件，創(chuàng)建一個(gè)Router對(duì)象，并定義路由表這里定義的路由表，path為 / ，對(duì)應(yīng)的組件為 HelloWorld，即瀏覽器地址為 / 時(shí)，在router-view位置顯示 HelloWorld 組件
如何構(gòu)建一個(gè)大型Vue應(yīng)用程序？
vue-cli 3.0環(huán)境開(kāi)發(fā)，在安裝vue之前我們需要安裝node環(huán)境，這個(gè)我們只要在node官方下載node綠色免安裝版，然后再配置下環(huán)境變量即可使用node和npm了。
將node所在目錄配置到電腦的環(huán)境變量中就可以使用了，這里我的目錄是D:\Program Files\node-v10.8.0-win-x86，這里我們只要打開(kāi)電腦-屬性-系統(tǒng)設(shè)定-進(jìn)階-環(huán)境變量該路徑添加到path中即可， 快捷鍵“win+r ”打開(kāi)運(yùn)行框，輸入cmd在彈出的窗口中輸入node -v 檢查node.js是否安裝成功。
這里我們配置淘寶的鏡像源，這里設(shè)置永久的輸入命令：npm config set registry
// 臨時(shí) npm --registry install express // 永久 npm config set registry // 驗(yàn)證是否成功 npm config get registry
現(xiàn)在我們可以開(kāi)始來(lái)搭建vue-cli 3.0環(huán)境了，輸入命令：npm install -g @vue/cli 安裝vue3.0（-g： 指全局安裝）,快捷鍵“win+r ”打開(kāi)運(yùn)行框，輸入cmd在彈出的窗口中輸入vue -V（大寫的V哦）來(lái) 檢查vue是否安裝成功。
npm install -g @vue/cli
接下來(lái)我們繼續(xù)創(chuàng)建vue項(xiàng)目 ，vue3.0和2.0有點(diǎn)區(qū)別，不用在裝webpack了，直接使用命令：vue create project創(chuàng)建項(xiàng)目（project為項(xiàng)目名），進(jìn)入項(xiàng)目配置，這里選擇Manually select features（翻譯：手動(dòng)選擇功能）。
進(jìn)入下一個(gè)安裝配置選擇，這里根據(jù)項(xiàng)目情況自行選擇配置，按上下鍵切換目標(biāo)選項(xiàng)，按空格鍵勾選和取消，按a全選，按i反選，選好后回車確定（以下是幾個(gè)選項(xiàng)的相關(guān)意義），圖中是我的選擇。
Babel：指轉(zhuǎn)譯成瀏覽器可識(shí)別的語(yǔ)言，可以讓你的項(xiàng)目支持更新的語(yǔ)法，如es6\es7等 TypeScript：新增的選項(xiàng)卡 Progressive Web App (PWA) Support：指模擬原生app Router：路由管理 Vuex：vuex管理模式 CSS Pre-processors：css預(yù)處理語(yǔ)言 Linter / Formatter：代碼規(guī)范 Unit Testing：組件單元測(cè)試 E2E Testing：端對(duì)端測(cè)試，模擬用戶真實(shí)場(chǎng)景
接下來(lái)提示我們選擇是否使用歷史路由：這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面,我們輸入Y同意即可，然后就是選擇CSS預(yù)處理器語(yǔ)言，在彈出的選項(xiàng)中我選擇LESS
選擇ESLint的代碼規(guī)范，此處使用 Standard代碼規(guī)范，這里我選擇了ESLint + Standard config（正常模式）
ESLint with error prevention only: 只進(jìn)行報(bào)錯(cuò)提醒； ESLint + Airbnb conf: 不嚴(yán)謹(jǐn)模式； ESLint + Standard config: 正常模式； ESLint + Prettier: 嚴(yán)格模式；
接著選擇代碼檢查，這里提示我們何時(shí)對(duì)進(jìn)行代碼檢測(cè)，我選擇在保存時(shí)進(jìn)行檢測(cè)，Lint and fix on commit（requires Git）【翻譯：整理并固定提交時(shí)（需要git）】
接著選擇單元測(cè)試解決方案，這里選擇 我Jest
接著選擇 Babel、PostCSS、ESLint等配置文件存放位置，第一個(gè)保存配置文件中，第二個(gè)放package.json里，這里我選擇單獨(dú)保存在各自的配置文件中。
接著提示是否在以后的項(xiàng)目中使用以上配置，這里我們選擇no，下次自行配置，你也可以選擇yes。
完成以上信息配置之后開(kāi)始創(chuàng)建項(xiàng)目并開(kāi)始下載依賴，我們只要耐心等待進(jìn)度條完成，這樣我們就把Vue項(xiàng)目創(chuàng)建好并完成了初始化。
現(xiàn)在很多人都在制作vlog視頻？
我是謳歌青春，我來(lái)回答這個(gè)問(wèn)題
拍視頻最低配置自然是手機(jī)了?，F(xiàn)在的手機(jī)攝像功能已經(jīng)能達(dá)到網(wǎng)絡(luò)視頻需要的像素了。再個(gè)手機(jī)個(gè)頭小攜帶方便自然是最佳選擇。用個(gè)桿，就能完成拍攝任務(wù)。當(dāng)然，你經(jīng)濟(jì)寬裕，或者你立志想一直堅(jiān)持拍視頻，就入手個(gè)穩(wěn)定器，也就是一個(gè)手機(jī)的價(jià)錢。有了它，你怕的運(yùn)動(dòng)視頻就能做到不抖動(dòng)，畫面流暢。
當(dāng)然你選擇微型DV也很有眼光，用它拍出的視頻畫質(zhì)優(yōu)于手機(jī)。由于DV鏡頭光孔要比手機(jī)大得多，通光量好，所以拍出的視頻更漂亮。當(dāng)然專業(yè)機(jī)型更好了。
至于后期制作短視頻，第一推薦剪映APP，免費(fèi)功能又強(qiáng)大，自動(dòng)加字幕是最大亮點(diǎn)。像專業(yè)的后期軟件ED、PR、AE等都沒(méi)這一功能，他們需要卡拉OK小軟件來(lái)彌補(bǔ)。所以向網(wǎng)絡(luò)傳視頻，用剪映APP沒(méi)錯(cuò)，制作速度快，還能自讀字幕文字，配合其他功能，保管能制作出超炫視頻來(lái)。希望我的能幫到你。
剛開(kāi)始學(xué)HTML5？
瀏覽器：
瀏覽器推薦用Chrome,因?yàn)镃hrome瀏覽器具有兼容性好、簡(jiǎn)潔、快速等優(yōu)點(diǎn)，無(wú)論是在啟動(dòng)速度還是頁(yè)面解析速度還是Javascript執(zhí)行速度上都優(yōu)于大多數(shù)瀏覽器。
編輯器：編輯器推薦用Sublime或者Vscode，因?yàn)槌鯇W(xué)時(shí)總是需要在練習(xí)時(shí)快速看到做出的效果，而這兩款編輯器非常輕量，并且集成了大量提高編程效率的插件，有著不輸IDE的體驗(yàn)。你可以一邊寫網(wǎng)頁(yè)的同時(shí)，一邊切到瀏覽器上馬上看到效果。
插件：1、如果是使用sublime編輯器的話可以考慮安裝Emmet、JSFormat、Ctags等插件提高工作效率。
Emmet可以為開(kāi)發(fā)者提供一種非常簡(jiǎn)練的語(yǔ)法規(guī)則，然后立刻生成對(duì)應(yīng)的 HTML 結(jié)構(gòu)或者 CSS 代碼；
JSFormat用來(lái)對(duì) JS代碼進(jìn)行格式化；
Ctags用來(lái)進(jìn)行函數(shù)的快速跳轉(zhuǎn)，Alt/Ctrl+點(diǎn)擊函數(shù)名稱，會(huì)跳轉(zhuǎn)到相應(yīng)的函數(shù)。
2、如果是使用Vscode編輯器的話可以考慮安裝Debugger for Chrome、HTML CSS Support、Auto Close Tag等插件。
通過(guò)Debugger for Chrome可以直接在 VSCode 中加上斷點(diǎn)進(jìn)行debug，當(dāng)代碼執(zhí)行到你在 VSCode 中添加的斷點(diǎn)后，你可以直接在 VSCode 中進(jìn)行單步調(diào)試；
在編寫css代碼時(shí)，HTML CSS Support可智能提示當(dāng)前項(xiàng)目所支持的所有樣式；
Auto Close Tag適用于 JSX、Vue、HTML等語(yǔ)法，在編寫標(biāo)簽并且鍵入 集成環(huán)境編輯器：
如果不想用Sublime或者Vscode這些輕量編輯器的話可以考慮集成環(huán)境編輯器（IDE），例如Web Strom和Hbuilder，這些編輯器支持絕大多數(shù)的前端語(yǔ)言自動(dòng)填充，可以很方便地進(jìn)行程序的運(yùn)行和調(diào)試。
當(dāng)前文章：vue項(xiàng)目的標(biāo)準(zhǔn)結(jié)構(gòu)？（如何構(gòu)建一個(gè)大型Vue應(yīng)用程序？）
URL鏈接：http://www.dlmjj.cn/article/cdessio.html
