前端 Vue介紹及安裝

2021-10-25 03:27:03 字數 1491 閱讀 5356

開始學習vue,繼續我的程式設計師之路。

vue官網:

1.vue是什麼?vue(讀音/vju/)是一套用於構建使用者介面的漸進式框架。vue被設計為可以自底向上逐層應用。

漸進式:由淺入深的,有簡單到複雜的使用vue。

vue.js的特點:

(1)體積小:壓縮後33k;

(2)更高的執行效率:虛擬dom,進行預處理操作;

(3)雙向資料繫結:開發者不用再去操作dom物件,把精力放到業務邏輯;

(4)生態豐富、學習成本低;

2.安裝

注意點:vue不支援ie8及以下版本。vue遵循語義化版本控制。瀏覽器安裝 vue devtools , 方便審查和除錯應用。

安裝得方式:

(2)cdn(內容分發網路),有vue.js和vue.min.js:

學習可以用

生產環境用

es modules用

cmd開啟命令提示符,輸入以下命令:

npm install vue
(4)命令列工具(cli):是為單頁面應用(spa)快速搭建繁雜的腳手架。

官方cli

接下來寫一下cli最新版本安裝

1)如果已經安裝過舊版本,需要通過命令,將其解除安裝。cmd開啟命令提示符,輸入以下命令:

npm uninstall vue-cli -g

或者yarn global remove vue-cli

2)安裝cli,命令如下:

npm install -g @vue/cli

或者yarn global add @vue/cli

3)檢視vue-cli版本,命令如下:

vue --version
4)公升級,全域性安裝cli,命令如下:

npm update -g @vue/cli

或者yarn global upgrade --latest @vue/cli

5)建立專案,在乙個資料夾下,shift + 郵件powershell視窗,輸入如下命令:

vue create my-project

或者vue ui

6)建立專案後,執行和打包命令如下:

npm run serve

打包命令

npm run build

7)vue-cli版本檢視命令:

vue -v
補充一些cli低版本安裝的命令:

3.0以下版本安裝命令:

npm install --global vue-cli

3.0以下版本建立專案:

vue init webpack test

前端框架之Vue介紹

庫只是乙個工具,供我們使用 框架是具有思維的,有它自己生態系統 前端這個崗位是從後端慢慢分出來 jq 2010前 mvc思想 軟體架構 為什麼前端要從後端引入mvc這個思想?cmd mvc衍生架構 vue mvvm angular2.0 mvvm 2016年 如何高效的將伺服器資料渲染到前端介面 如...

vue 前端nodejs環境安裝

win dow系 統安裝n odej s環境 color window 系統安裝 node js環境 window系統 安裝nodejs環境 安裝nodejs方式 nvm安裝 nvm可以幫助我們快速切換 node.js版本。下面是通過nvm安裝node.js的。一 nvm安裝node.js 設定映象...

Vue常用指令及介紹

vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。new vue v show 根據表示式的真假值來顯示和隱藏元素 vs temp 如懿傳 p ok 還珠格格 p d...