vue安裝及創建項目的幾種方式


原文地址:https://www.wjcms.net/archives/vue安裝及創建項目的幾種方式

VUE安裝的方式

直接用 script標簽 引入

對於制作原型或學習,你可以這樣使用最新版本:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

對於生產環境,我們推薦鏈接到一個明確的版本號和構建文件,以避免新版本造成的不可預期的破壞:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

使用后面的方式安裝需要提前安裝好node和npm工具

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝

# 最新穩定版
sudo npm install vue

命令行工具 (CLI)

vue CLI是官方提供的單頁面應用 (SPA) 腳手架工具,超級簡單快捷。安裝vue只需要一條命令即可。

sudo npm install -g @vue/cli

安裝之后,你就可以在命令行中訪問 vue 命令。你可以通過簡單運行 vue,看看是否展示出了一份所有可用命令的幫助信息,來驗證它是否安裝成功。

你還可以用這個命令來檢查其版本是否正確:

vue --version

VUE創建項目的方式

vue create命令進行創建項目

運行命令

vue create 項目名稱

設置鏡像

會提示是否使用淘寶鏡像安裝,這里輸入y然后回車

 Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation?

選擇默認設置

然后會提示選擇設置,這里默認即可。回車

Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

選擇包管理工具

然后提示選擇安裝的包工具使用什么,這里選擇npm,然后回車

 Pick the package manager to use when installing dependencies:
  Use Yarn
❯ Use NPM

然后就會自動創建完整的項目啦!

運行項目

然后進入項目目錄,運行命令即可查看。

cd vue222
npm run serve

第二種方式

除了上邊命令的方式,官方還提供了可視化創建工具。

運行命令

vue ui


然后在瀏覽器打開網站,如果端口被占用了可能會是其他的,不影響使用。

ctrl + c可以終端服務

進入瀏覽器操作

打開之后,看到如下界面。

然后點擊創建,選擇最下邊在此創建項目,上邊可以選擇路徑。

然后輸入項目名稱,選擇包管理工具為npm ,點擊下一步

然后選擇配置,直接默認即可。

等待完成即可。如果遇到問題可以私信,我會及時進行解答。

關注我更多精彩


免責聲明!

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



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