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

2021-10-03 03:10:08 字數 706 閱讀 6770

目錄

一、什麼是vue-cli

二、安裝vue-cli

三、使用vue-cli建立vuejs專案

四、啟動vuejs專案

五、專案檔案介紹

vue-cli是vue的腳手架工具,即幫助我們寫好vue.js基礎**的工具。

node -v

//檢視node版本

npm install -g vue-cli

//全域性安裝vue-cli

node_modules資料夾:npm install安裝的依賴**庫

src資料夾:存放專案原始碼

main.js:vue例項啟動入口

static資料夾:存放第三方靜態資源

.babelrc:babel的配置(源**用es6,有些瀏覽器不能直接支援es6語法,通常做法是用babel將es6編譯成es5)

.editorconfig:編輯器的配置

.eslintignore:忽略語法檢查的目錄檔案

.eslintrc.js:eslint的配置檔案(js標準語法:

.gitignore:git倉庫忽略的檔案

index.html:入口html檔案(專案在編譯過程中,會自動插入到這個html檔案中)

package.json:用於描述專案的專案配置檔案

readme.md:專案描述檔案

vue學習筆記vuecli3,4

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

vue cli學習筆記

初學vue利用vue cli 和webpack構建專案腳手架。1.相關需求 首先需要全域性安裝vue及vue cli 外鏈轉存失敗 img 4euqxnrz 1562640163491 2.安裝vue cli 開啟命令列工具 輸入 vue init webpack projectname 此處我使用...

Vue學習筆記二

事件修飾符 統一的js new vue methods btnhandler linkclick stop事件 class inner click div1handler type button value 戳他 click.stop btnhandler div prevent事件 href cl...