vue cli 4 4 6腳手架安裝及目錄分解

2021-10-09 00:23:20 字數 1272 閱讀 3160

一、安裝vue腳手架

1.進入vue官網

2.選擇生態--vue cli

3.選擇安裝、獲得指令:npm install -g @vue/cli

檢查是否安裝成功:vue --version

腳手架安裝成功顯示:

二、vue腳手架版本:

以前:vue cli2 —>基於webpack3打造,

且建立專案時,需要輸入很多配置資訊

以前:vue cli3  --->2023年8月11日發布,基於webpack4打造,

vue-cli 3的設計原理是0配置,移除了配置檔案根目錄下的

【build】和【config】等目錄,且提供了vue ui命令,提供了視覺化

配置,移除了【static】資料夾,新增了public資料夾,並且index.html

移動到public中

提供更多的外掛程式,且在v4中引入的大多數新特性(不會打破規則)已經被反向移植到v3中了,希望繼續支援更多的v3版本。

三、建立專案(基於vue cli4)

1.輸入指令:vue create [專案名稱]hello-world

2.選擇default(babel,eslint),使用預設安裝
四、專案目錄結構分析:

1.node_modules:存放通過npm安裝的包

2.public:相當於之前版本的static資料夾,存放靜態資源,並且此包下存放的檔案,打包後原封不動複製到dist資料夾下

3.src:存放源**

3.2:components 存放專案的所有元件模組

4..gitignore:可忽略的檔案(告訴git哪些檔案不需要新增到版本管理中)

5.babel.config.js:babel工具的配置檔案

6.package.json:存放第三方外掛程式依賴配置

五、啟動專案:

1.輸入命令:npm run serve

2.選擇執行環境: local(本地:localhost、127.0.0.1)

network(網路:使用本機ip)

是乙個、自帶乙個形參createelement方法,

用來建立html模板的,然後渲染(render)到指定的節點上

vue cli4 0腳手架安裝

10月16日,官方發布訊息稱vue cli 4.0正式版發布,並且強烈建議公升級 小編也是剛剛安裝了最新版本的腳手架看看更新了什麼 安裝和vue cli3.0的是一模一樣的,對比了一下3.0的腳手架,除了目錄發生變化一些,其他的都一樣 安裝步驟和vue cli3.0的一模一樣 1.建立專案 vue ...

如何安裝VueCli 4 0腳手架

安裝好node後 對應的npm 包管理也安裝好 安裝好node後 檢視對應的版本 node v npm v 接下來 安裝 vue cli npm install g vue cli 全域性安裝vuecli 腳手架 順便可以把 yarn 也安裝好 npm install g yarn 全域性安裝yar...

vue cli3 0腳手架的學習

安裝的注意點 通過鍵盤的上下按鍵可以選擇預設的配置還是手動配置,預設的包含了基本的 babel eslint 設定的 preset,也可以選 手動選擇特性 來選取需要的特性。而手動設定則提供了更多的選項,它們是面向生產的專案更加需要的。可以通過上下按鍵來選擇你需要的配置,然後在通過空格鍵確定你所選擇...