VueJs講解初始框架

一、啟動項目

第一步：cmd進入項目文件里，運行npm run dev 啟動項目 這里說明啟動端口號是8080

第二步：往頁面輸入：localhost:8080

二、解析渲染步驟

先看整體框架樣式和index.html：

從上面我們可以看出，index的body中只有一個id為app的div，那是如何被渲染的呢。一步一步尋找
第一步：main.js

main.js是我們的入口文件，主要作用是初始化vue實例并使用需要的插件。

這里new Vue代表新建vue對象

el官方解釋：為實例提供掛載元素。值可以是 CSS 選擇符，或實際 HTML 元素，或返回 HTML 元素的函數。

這里就通過index.html中的<div id="app"><div>中的id=“app”和這里的“#app”進行掛載。

components:代表組件。這里是’App’,這說明。首先頁面肯定有<app></app>這樣的標簽，同時有個組建為‘App.Vue‘文件

這個地方我思考好久，才明白，首先App.vue是有的，因為上面已經import導入了，但index.html中并沒有<app></App>標簽

template：代表模板。官方解釋：模板將會替換掛載的元素。掛載元素的內容都將被忽略。

也就是說:template: ‘<App/>’ 表示用<app></app>替換index.html里面的<div id="app"></div>

那到底是不是這樣，我們先把main中components這行注釋掉：

再看頁面：發現里面就有一個標簽。這樣那么邏輯就通了。

這樣mian.js就通了，那通過components: { App },我們來看App.vue
第二步：App.vue
首先一個正常的vue結尾的文件里，一般包含三部分:<template>,<script>,<style>

這里面的<img>標簽，就代表頁面的vue的logo,它下面又有一個組件<HellWord>

我們只要在進入到HellWord.vue中明白了。
第三步：HellWord.vue

這樣一來，頁面所渲染的東西都找到了，其實并不復雜，只是在main.js稍微繞了個彎。

自己也是一邊學一邊寫，有錯的地方或者有更好的解釋也希望大家予以指點。

總結

以上是生活随笔為你收集整理的vue 初始框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。