Vue-cli的安裝和使用


Vue-cli的安裝和使用

安裝node環境

nodejs是一個JavaScript的運行環境,可以使得JavaScript不依賴瀏覽器運行。

由於我采用的Mac環境,所以安裝方式略有不同,windows上安裝node只需要在 node官網下載windows版本的msi包安裝,會自動配置環境變量。

安裝成功以后可以在控制台輸入以下命令測試:

    node -v #查看安裝版本
    npm -v #查看npm安裝版本

配置淘寶鏡像

由於node要經常使用npm命令下載一些依賴,國外的鏡像速度極慢,並且會導致下載失敗等問題,所以建議配置國內的淘寶鏡像。配置方法如下:

#設置淘寶鏡像
npm config set registry https://registry.npm.taobao.org
#測試是否安裝成功
npm config get registry 

安裝vue-cli

Vue-cli是vue項目的腳手架,可以快速搭建一個Vue項目。全稱是Vue Commond Line而不是(Vue Client),由於vue-cli2.x-已經過時,這里介紹的是vue-cli3.x、4.x的安裝的方式。注意:需要node.js8.9+的版本。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安裝成功后可以通過vue命令檢測是否安裝成功,使用vue --version命令查看vue-cli版本,注意:這個命令查看的是vue-cli的版本,而不是vue的版本!

使用vue-cli+element創建項目

vue create my-app
cd my-app
vue add element

vue ui介紹

vue ui是vue3.x版本后的新特性,意在使用圖形化界面快速搭建一個腳手架項目,並且創建出的項目可以做到近乎0配置,直接使用。類似於SpringBoot約定大於配置的思想。

使用vue ui創建項目

在控制台中輸入vue ui,盡量在要創建項目的父目錄中輸入

vue ui
#安裝慢可以執行
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

在瀏覽器彈出的頁面中點擊紅色箭頭指向的內容

點擊創建,指定項目的父目錄,點擊在此處創建項目按鈕開始創建項目

配置項目文件夾的名稱、包管理器(建議選擇npm),以及是否初始化本地git倉庫,點擊下一步。

選擇創建方式:

  • 創建方式中可以保存之前創建項目的配置模板

  • 默認(一切都使用默認的配置,但是之后還可以修改)

  • 手動 自行選擇需要安裝的模塊

  • 從git倉庫中拉取

這里我們先選擇手動,然后點擊下一步:

選擇需要引入的模塊,默認包含了Babel、Linter、這里我額外選擇了Router。在配置完成后點擊下一步

由於上一步引入了Linter,這里需要配置錯誤檢測機制,按照如下配置即可:

此時點擊完成創建,會提示是否要保存為新預設,如果選擇保存需要指定一個預設名,下次創建的時候就會有這個“模板”,之后使用此“模板”創建的項目都會使用這樣的配置。這里我們先選擇不保存預設。

等待片刻后項目就創建成功了。。。

在項目創建成功后,還可以繼續依賴其他內容以及安裝新插件

安裝elementUI插件

依賴也可以在vue ui中添加

還可以在vue ui中啟動、編譯、檢查項目問題等操作

注意:使用mac創建的項目可能會有訪問權限問題 可以使用chmod -R 777 fieldname命令解決


免責聲明!

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



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