vue的入門學習

2021-10-02 11:19:18 字數 1095 閱讀 8215

vue開發

通過官手腳手架起步,搭建環境。

>>

>installation

$ npm install -g vue-cli

>>usage

$ vue init

>>

>>example:

$ vue init webpack my-project`在這裡插入**片`

根據需要安裝外掛程式yes or no,一直回車,腳手架就生成了。接下來剖析腳手架結構。

腳手架結構剖析

在開始寫專案之前,我們需要弄清什麼地方寫什麼**。

build資料夾

webpack配置檔案。此處配置webpack規則。整個專案是通過webpack支援的。比如你要使用less,你需要在webapck規則裡使用less。

src 資料夾

擼碼的地方~基本你所有的**都在這一塊完成。

assets資料夾

存放web中引用的 **資源。

components資料夾

主要存放可復用元件,你可以在任意頁面中復用這些元件。

router資料夾

index.js 路由配置檔案。在此處配置各個頁面的跳轉引用關係。

這裡看一看做頁面的根部。我們可以在這個頁面進行一些css reset 操作。

main.js

根邏輯,頁面載入首先會載入這份js檔案。

static資料夾

主要存放外部引用資源。比如***.min.js

index.html

vue是spa應用,所以只有乙個入口,也就是index檔案,這裡我們進行一些不可更改資源(比如某某庫)的引用,和html頁面meta 、title之類的設定。

vue核心概念

vue的核心概念是『資料驅動』,假如我們需要切換view層,我們應該修改的是資料。

vue的學習總結 入門

v if 通過條件渲染,由條件決定到底是否往頁面中寫資料 和js紅的if else類似 v show 無論條件是否滿足都要往頁面中寫資料,只不過由條件決定是否顯示。v if v else if v else 只是負責傳輸資料,至於是判斷 賦值取決於標籤。vue監聽事件的快捷方法 縮寫形式 由此 下v...

Vue 學習入門指南

如果你是一名 vue 開發新手,可能已經聽過很多行話術語,比如單頁面應用程式 非同步元件 伺服器端渲染等等,或者還聽說過與 vue 有關的一些工具和庫,比如 vuex webpack vue cli 和 nuxt。那麼究竟什麼是vue,有什麼作用?每週分享技術文章 優質軟體資源 vue.js是一套用...

vue入門學習筆記

一 vue的安裝與使用 1.安裝nodejs用npm作為包管理工具 2.vue單個檔案開發 npm init yes npm install vue npm install vue router s npm install axios 3.vue模組化開發 全域性安裝 webpack npm ins...