摘要:官方默認(rèn)項(xiàng)目是存放了一個(gè)為的打開(kāi)文件夾有一個(gè),還有一個(gè)名為組件的文件夾,里面放了一個(gè)文件。部分我們會(huì)發(fā)現(xiàn)這幾排字就是顯示在頁(yè)面的幾排文字部分這其中的這個(gè)文件引入了,還有上述的。結(jié)合查詢(xún)其他說(shuō)法,就是說(shuō)它會(huì)把是的元素以形式替換。
前言
我很早就想來(lái)學(xué)習(xí)學(xué)習(xí)vue.js啦,終于有了那么一些空閑的時(shí)間可以拿來(lái)學(xué)習(xí),于是從前天開(kāi)始我就每天抽一個(gè)多小時(shí)來(lái)體驗(yàn)vue.js。
當(dāng)然啦,因?yàn)槭切“兹腴T(mén),這其中可能會(huì)有“錯(cuò)誤”或者不恰當(dāng)?shù)恼f(shuō)法,還請(qǐng)各位大神能多指正我(●"?"●)。
Vue.js官網(wǎng):https://cn.vuejs.org/v2/guide...
固然最好的資料就是官網(wǎng)了,所以一開(kāi)始我在官網(wǎng)上看了一些基本的用法,然后就跟著官方的安裝教程安裝(https://cn.vuejs.org/v2/guide...),過(guò)程比較順利,也相對(duì)容易。
安裝好vue和vue-cli之后,就可以初始化項(xiàng)目了,運(yùn)行
vue init webpack my-project
之后,出現(xiàn)了一個(gè)名為my-project的項(xiàng)目文件夾。進(jìn)去之后就會(huì)發(fā)現(xiàn)整個(gè)項(xiàng)目的結(jié)構(gòu):
當(dāng)然node_modules這個(gè)文件夾是后面才出現(xiàn)的,也就是我們還要運(yùn)行
npm install
這個(gè)命令會(huì)根據(jù)pakage.json里的依賴(lài)內(nèi)容去安裝相關(guān)的依賴(lài)包,但是我就是在這里遇到了一個(gè)小麻煩,就是它很久都沒(méi)有反應(yīng),后來(lái)查詢(xún)才知道是因?yàn)槊顣?huì)去國(guó)外的網(wǎng)站去下載的,速度太慢了,所以我們最好用國(guó)內(nèi)的鏡像去下載。直接下載淘寶的cnmp命令行工具(https://npm.taobao.org/)或者借用鏡像地址下載就可以解決問(wèn)題。
npm install --registry=https://registry.npm.taobao.org
最后,只要輸入
npm run dev
就可以運(yùn)行項(xiàng)目了,會(huì)在git上看到如下圖的提示,瀏覽器也會(huì)自動(dòng)打開(kāi)頁(yè)面:
看到官網(wǎng)的默認(rèn)頁(yè)面就是運(yùn)行成功了。
我們看看這個(gè)文檔結(jié)構(gòu)的文件,要找到入手改代碼的地方,就要知道這些文件是做什么用的。
index.html:官方默認(rèn)項(xiàng)目是存放了一個(gè)ID為app的DIV
打開(kāi)src文件夾:
有一個(gè)main.js、App.vue,還有一個(gè)名為組件的文件夾,里面放了一個(gè)HelloVue.vue文件。我們都打開(kāi)看看。
HelloVue.vue部分:
{{ msg }}
Essential Links
.....
我們會(huì)發(fā)現(xiàn)這幾排字就是顯示在頁(yè)面的幾排文字~
App.vue部分:
這其中的", components: { App } })
這個(gè)文件引入了App.vue,還有上述的router.js。并在下面用到了App的組件。
所以可以得出一個(gè)簡(jiǎn)單的結(jié)論:以main.js為中心,main.js引進(jìn)了App.vue,App.vue借助使用到了HelloWorld。
在main.js中這個(gè)組件對(duì)準(zhǔn)了id是app的元素,使用APP組件去替換。
其中有一句template: "
一個(gè)字符串模板作為 Vue 實(shí)例的標(biāo)識(shí)使用。模板將會(huì) 替換 掛載的元素。掛載元素的內(nèi)容都將被忽略,除非模板的內(nèi)容有分發(fā)插槽。修改和比較
結(jié)合查詢(xún)其他說(shuō)法,就是說(shuō)它會(huì)把id是app的元素以形式替換。
router-view替換
在App.vue中,不用
", components: { App } }) new Vue({ el: "#app1", template: "", components: { App } }) 渲染出來(lái)的結(jié)果就是:
Vueの初體驗(yàn)細(xì)節(jié)
兩個(gè)class是app的div。也就很好說(shuō)明了它的替換~
還可以思考,我們?cè)谄渌?vue文件中,直接在template標(biāo)簽中寫(xiě)組件的名字作為標(biāo)簽就可以引用到組件,但是在main.js中,我們要用template:""去替換,缺少這句就會(huì)失敗,也可以猜想因?yàn)槲覀円膊荒茉趈s里面直接寫(xiě)上結(jié)構(gòu)代碼。 關(guān)于ESLint
剛開(kāi)始隨便修改了幾個(gè)代碼,結(jié)果git上頻繁的報(bào)錯(cuò),一看錯(cuò)誤內(nèi)容竟然是說(shuō)空格多了,沒(méi)有空行之類(lèi)的格式問(wèn)題,后來(lái)才發(fā)現(xiàn),原來(lái)是開(kāi)啟了一個(gè)格式檢測(cè)的依賴(lài)。
就是在初始化項(xiàng)目的時(shí)候,問(wèn)你Use ESLint to lint your code?(Y/n)因?yàn)槲沂浅鯇W(xué)怕出錯(cuò),所以當(dāng)然都默認(rèn)寫(xiě)了yesQAQ,度娘一下就知道:
ESLint是一個(gè)用來(lái)識(shí)別 ECMAScript 并且按照規(guī)則給出報(bào)告的代碼檢測(cè)工具,使用它可以避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格所以不需要的話(huà),要記得輸入n。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/89405.html
摘要:?jiǎn)栴}起源以前一直就聽(tīng)說(shuō)圣杯布局,但是沒(méi)有怎么去用過(guò),然后這次偶然接觸到了,就學(xué)習(xí)了一下。繼續(xù)試驗(yàn)我們可以嘗試改變的值,去看看位置的變化。為了方便我們計(jì)算,另外寫(xiě)了一個(gè)類(lèi)似的布局,內(nèi)容區(qū)的寬度是,三個(gè)的寬度也都是。 問(wèn)題の起源 以前一直就聽(tīng)說(shuō)圣杯布局,但是沒(méi)有怎么去用過(guò),然后這次偶然接觸到了,就學(xué)習(xí)了一下。這是一個(gè)我從別人寫(xiě)的文章中復(fù)制過(guò)來(lái)的,關(guān)于圣杯布局的比較簡(jiǎn)單的說(shuō)明 通過(guò)縮放頁(yè)面就...
摘要:為什么會(huì)產(chǎn)生閉包究其根本,是因?yàn)榇淼暮瘮?shù)包含的作用域。而在作用域鏈中,外部函數(shù)的活動(dòng)對(duì)象始終處于第二位,外部函數(shù)的外部函數(shù)的活動(dòng)對(duì)象處于第三位直到作為作用域鏈終點(diǎn)的全局執(zhí)行環(huán)境。 前言 此文的內(nèi)容主要是來(lái)自看書(shū)的總結(jié)+小小的實(shí)踐哦~會(huì)不斷更新總結(jié)。 什么是閉包 書(shū)上是這樣定義閉包的: 有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)。 舉一個(gè)例子: function test(){ va...
閱讀 3937·2021-11-24 10:46
閱讀 1822·2021-11-16 11:44
閱讀 2302·2021-09-22 16:02
閱讀 1422·2019-08-30 15:55
閱讀 1139·2019-08-30 12:46
閱讀 573·2019-08-28 18:31
閱讀 2771·2019-08-26 18:38
閱讀 1106·2019-08-23 16:51