Vue-cli4腳手架搭建


 

隨着vue.js越來越火爆,更多的項目都用到vue進行開發,在實際的開發項目中如何搭建開發腳手架呢,今天跟大家分享一下:

首先需要了解的知識

Html

Css

Javascript

Node.js 環境(npm包管理工具)

Webpack 自動化構建工具

 

一、安裝node.js

 

進入官網下載node.js

 

 

二、安裝 cnpm

 

 

1、說明:npmnode 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 ,會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果

 

 

 

 

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM