隨着vue.js越來越火爆,更多的項目都用到vue進行開發,在實際的開發項目中如何搭建開發腳手架呢,今天跟大家分享一下:
首先需要了解的知識
Html
Css
Javascript
Node.js 環境(npm包管理工具)
Webpack 自動化構建工具
一、安裝node.js
進入官網下載node.js
二、安裝 cnpm
1、說明:npm(node package manager)是nodejs的包管理器,用於node插件管理(包括安裝、卸載、管理依賴等);
2、使用npm安裝插件:命令提示符執行npm install <name>
3、選裝 cnpm 因為npm安裝插件是從國外服務器下載,受網絡影響大,可能出現異常,如果npm的服務器在中國就好了,所以我們樂於分享的淘寶團隊干了這事!來自官網:“這是一個完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。”;
安裝:npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入cnpm -v,可以查看當前cnpm版本
PS:
yarn是個包管理器,是facebook發布的一款取代npm的包管理工具
//npm安裝yarn
npm install -g yarn
三、安裝vue-cli腳手架構建工具
vue-cli 提供一個官方命令行工具,可用於快速搭建大型單頁應用。
1、先確認是否有安裝過vue-cli
vue -V //如有的話,就用下面命令卸載
輸入命令
cnpm install -g @vue/cli
指定版本:
如是3.0以下
npm install -g vue-cli@版本號
如是3.0以上
npm install -g @vue/cli@版本號
四、創建項目
vue create 項目名稱
空格選擇對應需要的插件
五、啟動項目
附:啟動已存在項目
進入項目根目錄
安裝項目所屬依賴(運行命令 cnpm install ,等待安裝)
運行命令 npm run dev ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果