vue cli學習筆記

2021-09-25 02:48:25 字數 618 閱讀 7832

初學vue利用vue-cli 和webpack構建專案腳手架。

1.相關需求

首先需要全域性安裝vue及vue-cli

[外鏈轉存失敗(img-4euqxnrz-1562640163491)(

2.安裝vue-cli

開啟命令列工具 輸入

vue init webpack 【projectname】
此處我使用的是vscode自帶的terminal,輸入安裝命令後,跟隨提示對你安裝的專案進行配置,此處我沒有開啟單元測試和e2e測試。最後會讓你選擇yarn還是npm安裝,國內一般選擇yarn速度會少快一些。

[外鏈轉存失敗(img-8dq1bnbh-1562640163493)(

安裝完成後根據提示進入專案資料夾,執行npm run dev或者npm run serve即可啟動專案

[外鏈轉存失敗(img-ozsbr6ks-1562640163493)(

3.安裝成功

在瀏覽器中訪問本地8080埠即可看到初始化專案的頁面,至此vue-cli腳手架搭建完成。

[外鏈轉存失敗(img-a06adu8d-1562640163494)(

vue cli 3 0 學習筆記

專案搭建及結構 安裝npm install g vue cli 新增專案 vue create my project 啟動 npm run server 打包 npm run build vue cli3.0 自定義腳手架模板 vue cli3.0 新出的新增外掛程式方法 npm install a...

vue學習筆記vuecli3,4

可以通過npm list vue來檢視vue的版本 通過 vue v檢視vue cli的版本 二 使用vue構建專案 直接在終端輸入 vue create my project 你的專案名稱 三 vue cli的配置 終端輸入vue ui 即可進入視覺化配置 配置檔案在node modules vu...

Vue學習筆記二 Vue cli開啟Vuejs專案

目錄 一 什麼是vue cli 二 安裝vue cli 三 使用vue cli建立vuejs專案 四 啟動vuejs專案 五 專案檔案介紹 vue cli是vue的腳手架工具,即幫助我們寫好vue.js基礎 的工具。node v 檢視node版本 npm install g vue cli 全域性安...