Vue入門(四) 腳手架

2021-10-07 21:09:49 字數 1798 閱讀 2923

這篇部落格來說一下,提了很久的腳手架吧,其實吧,在沒接觸的時候,我也覺得腳手架好厲害的樣子,其實就是幫助我們自動配置一些複雜的、常用的一些配置。它能夠幫助我們快速構建vue開發環境和對應的webpack配置。但是我們需要注意的乙個點:腳手架的使用前提,前面的部落格都說過了,這裡就不說了。

安裝的時候我們會選擇一些東西,下面我以腳手架2為例:

下面是腳手架3的介紹:

下面來說一下vue的執行過程:

下面展示一下render的函式

其實這樣寫就是為了簡化內部的執行操作,原來的那種寫法,最後在執行的時候還是會變成render,然後接著往下面執行,這裡只是直接寫成了render,省略了其他的一些操作而已。

下面這兩張圖展示一下npm run build 和npm run dev

下面說一下如何修改webpack.base.conf.js檔案進行起別名操作,因為在大型專案當中可能會有一種情況,就是我們起的乙個包的名字特別長的情況,但是當我們引用裡面的檔案的時候,我們總不能每次都寫可長的**去引用,所以這個時候就用上了別名。具體用法如下:

下面的腳手架三作用啥的都跟二一樣,只不過裡面稍微有一點區別,vuecli3主要想做到所謂的0配置,移動的配置檔案根目錄下的,build和config等目錄。並且還提供了更加人性化的工具,就是我們輸入vue ui就可以啟動這個視覺化設定,我們可以在這裡裡面進行配置,具體是啥,你自己輸入看一下就知道了。

還有一點就是移動了static資料夾,新增了public資料夾,並且index.html移動到了public中了。

下面是3版本生成的

注:箭頭函式 一般都會用的,別問為什麼,問就是 簡單

所謂箭頭函式長下面的樣子。

const num =

(a,b)

=>

其實就是箭頭左邊就是引數,右邊就是我們要進行的運算,最後將結果返回給引數左邊的num。

需要注意的兩點就是:

1.當是乙個引數的時候,小括號可省略。

2.當進行運算的也是乙個式子,大括號可省略 ,return 可省略

如下:

const mum=a =

>a*a

回去多練練吧!加油

Vue 五 腳手架

稍微像樣一點的 vue.js 的開發過程,幾乎總是需要使用腳手架的。使用它可以解鎖新的可能 乙個.vue檔案包含三個部分 標籤包圍內的是模板 內包圍的是 js 並且可以使用 es6 的語法。內的則是 css 然而,瀏覽器是無法識別這個看起來簡單但是卻不真實的元件的。因此 vue.js 需要做打包,乙...

vue 3 0腳手架 一

本機公升級vue3.0 npm install g vue cli 3.0腳手架建立 vue create 專案名稱 啟動專案 npm run serve 新增外掛程式方式 vue add vuetify vue add axios 也可使用之前npm install 的方式新增 介面會有明顯變化的...

Vue3 0腳手架搭建

vue3.0官網 介紹 notice 這份文件是對應 vue cli 3.x 版本的。老版本的 vue cli 文件請移步這裡 vue cli是乙個基於 vue.js 進行快速開發的完整系統,提供 1.通過 vue cli 搭建互動式的專案腳手架。2.通過 vue cli vue cli servi...