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 初始框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。