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 ,點擊下一步

而後選擇配置，直接默認便可。

等待完成便可。若是遇到問題能夠私信，我會及時進行解答。