Vue cli框架的快速理解

2021-10-01 17:10:44 字數 1510 閱讀 6743

軟工的同學看了我的**,說你這樣不行啊,現在都前後端分離了,來用vue腳手架做吧。

我挺懷疑剛入門就用框架會不會翻車?但簡單熟悉了下,不得不說vue腳手架是真好用。本文不會包含vue-cli的詳細操作,只會從乙個從沒寫過前端的人的視角、按照後端的思維來說說vue腳手架的使用邏輯。(版本為vue-cli4)

## 啟動vue-cli

這部分沒什麼好說的,npm install然後vue create就行。建立完專案試試npm run serve,就可以看到乙個最簡單的歡迎頁面了。

## 專案檔案結構

專案建立完,目錄大概是這樣的:

除了readme和src,其他的都不用管。你需要寫的東西全存放在src中,下面我們開啟src看一下:

之前我說元件化的設計是我覺得腳手架最棒的地方,這是因為它一下子就讓前端開發也變得像後端一樣令人熟悉了。components資料夾下的每乙個vue元件都按照一定格式組織起來,彼此可以互相呼叫、通訊、甚至也能有「繼承」的關係,結構上已經非常像一些物件導向的語言的專案結構了。這樣的好處就是分工合作變得異常簡單,配合乙個git就完事了。

初看vue元件,會發現其中沒有html標籤,但這並不影響什麼,我們完全可以就把template標籤當作html來看,然後把所有的東西都丟進去。

由於我使用了element樣式庫,所以元件直接就放裡面複製,立馬就能看到成果。元件的script部分與傳統開發不太一樣,分為了data,components,method等部分。其中data存放被vue雙向繫結的資料,method則存放著所有@click指向的函式。components只在呼叫了其他元件時需要使用,只要填入被呼叫的元件名即可(當然開頭必須得先import進來)。

除此之外,還有一些特殊的,比如created()和mounted()之類的。這些實際上是元件的生命週期鉤子,created部分會在頁面被渲染前呼叫,mounted()則會在頁面產生變化時被呼叫。配合這些鉤子函式,我們可以很好地完成一些初始化任務。

##vue-router

vue-router是用來實現頁面跳轉的乙個很方便的工具,官方文件給的很詳細。這個工具通過將檔案中標籤進行替換來實現「路由跳轉」的功能,只需要在乙個檔案中宣告每乙個url對應哪乙個元件即可。

## 實際開發記錄

實際開發時,通過vue-cli,我們幾個人通過統一的樣式庫可以做到完全分開的前端開發,然後只需要將元件merge到一起就可以直接webpack打包執行,效率非常高,檔案目錄也清晰明了。

快速理解Django框架

django是我學習python以來第乙個學習的web框架,所以在這裡整理一下,便於不理解的人能夠快速了解django是乙個什麼東西。django是乙個開放源 的web應用框架,由python寫成。它最初是被開發來用於管理勞倫斯出版集團旗下的一些以新聞內容為主的 的,即是cms 內容管理系統 軟體。...

快速理解Django框架

django是乙個開放源 的web應用框架,由python寫成。它最初是被開發來用於管理勞倫斯出版集團旗下的一些以新聞內容為主的 的,即是cms 內容管理系統 軟體。並於2005年7月在bsd許可證下發布。這套框架是以比利時的吉普賽爵士吉他手django reinhardt來命名的。model 模型...

vue cli 快速搭建

引言 簡單快速搭建 vue cli 1 必須要先安裝好 node.js 2 搭建vue的開發環境 安裝vue的腳手架工具 官方命令列工具 npm install global vue cli 此命令只需要執行一次 3 建立專案 必須cd到對應的乙個專案裡面 vue init webpack vue ...