Vue系列(十一)之vue-cli腳手架創建項目

爲什麼需要腳手架? 爲了快速開發,我們不可能赤手空拳的寫代碼。使用Vue也是這樣,Vue-CLI腳手架工具幫我們快速創建一個項目模版,默認包含webpack打包工具。默認配置下,我們就可以啓動運行項目。

下載安裝Node.js

Vue-Cli依賴node,所以我們的電腦需要下載安裝node並配置環境變量。
Node官網下載Node.js
windows需要配置環境變量,方法請自行百度。
終端窗口輸入:node -v查看node版本號:

node -v

在這裏插入圖片描述
新版本的node中包含了npm,npm是包管理工具,類似於Gradle和Maven等包管理器。npm地址
終端輸入命令:npm -v 查看npm的版本號:

npm -v

在這裏插入圖片描述

設置鏡像

在國內使用npm是很慢的,所以我們需要設置淘寶鏡像,終端執行如下命令:

npm config set registry " https://registry.npm.taobao.org " 

查看npm鏡像配置:

npm config get registry

在這裏插入圖片描述

簡單的命令

npm init xx
初始化項目,使用npm包管理器,生成package.js
npm install xx
安裝依賴包,install可以簡寫爲“i”,即 npm i xx
npm install xx -D
安裝依賴包,在開發環境
npm install xx -g
全局安裝
npm run xx
運行腳本

安裝vue-cli腳手架

vue-cli安裝
全局安裝vue-cli腳手架工具,終端執行命令:

npm install -g @vue/cli

執行: vue --version 查看是否安裝成功:

vue --version

在這裏插入圖片描述

創建項目

使用vue-cli創建一個vue項目.
打開終端,進入到你要創建項目的目錄下,執行命令:vue create hello-world

vue create hello-world

按照提示選擇項目要集成的庫。vue-cli也支持圖形化創建項目,使用vue ui 命令,詳細操作見官網創建項目

現在運行npm run serve 命令,啓動項目,可以在瀏覽器中預覽你的頁面了:
在這裏插入圖片描述

發佈了53 篇原創文章 · 獲贊 61 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章