vue 初始框架
VueJs講解初始框架
一、啟動(dòng)項(xiàng)目
第一步:cmd進(jìn)入項(xiàng)目文件里,運(yùn)行npm run dev 啟動(dòng)項(xiàng)目 這里說明啟動(dòng)端口號(hào)是8080
第二步:往頁面輸入:localhost:8080
二、解析渲染步驟
先看整體框架樣式和index.html:
從上面我們可以看出,index的body中只有一個(gè)id為app的div,那是如何被渲染的呢。一步一步尋找
第一步:main.js
main.js是我們的入口文件,主要作用是初始化vue實(shí)例并使用需要的插件。
這里new Vue代表新建vue對象
el官方解釋:為實(shí)例提供掛載元素。值可以是 CSS 選擇符,或?qū)嶋H HTML 元素,或返回 HTML 元素的函數(shù)。
這里就通過index.html中的<div id="app"><div>中的id=“app”和這里的“#app”進(jìn)行掛載。
components:代表組件。這里是’App’,這說明。首先頁面肯定有<app></app>這樣的標(biāo)簽,同時(shí)有個(gè)組建為‘App.Vue‘文件
這個(gè)地方我思考好久,才明白,首先App.vue是有的,因?yàn)樯厦嬉呀?jīng)import導(dǎo)入了,但index.html中并沒有<app></App>標(biāo)簽
template:代表模板。官方解釋:模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略。
也就是說:template: ‘<App/>’ 表示用<app></app>替換index.html里面的<div id="app"></div>
那到底是不是這樣,我們先把main中components這行注釋掉:
再看頁面:發(fā)現(xiàn)里面就有一個(gè)標(biāo)簽。這樣那么邏輯就通了。
這樣mian.js就通了,那通過components: { App },我們來看App.vue
第二步:App.vue
首先一個(gè)正常的vue結(jié)尾的文件里,一般包含三部分:<template>,<script>,<style>
這里面的<img>標(biāo)簽,就代表頁面的vue的logo,它下面又有一個(gè)組件<HellWord>
我們只要在進(jìn)入到HellWord.vue中明白了。
第三步:HellWord.vue
這樣一來,頁面所渲染的東西都找到了,其實(shí)并不復(fù)雜,只是在main.js稍微繞了個(gè)彎。
自己也是一邊學(xué)一邊寫,有錯(cuò)的地方或者有更好的解釋也希望大家予以指點(diǎn)。
總結(jié)
- 上一篇: 不同协议的数据包如何处理_【项目申报专员
- 下一篇: vue init webpack vue