VueJS - 環境設定

有很多方法可以安裝 VueJS。以下將討論一些安裝方法。

在 HTML 檔案中直接使用 <script> 標籤

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

訪問 VueJS 的官方網站 https://vuejs.tw/v2/guide/installation.html 並根據需要下載 vue.js 檔案。有兩個版本可供使用 - 生產版本和開發版本。開發版本未壓縮，而生產版本已壓縮，如下面的截圖所示。在專案開發過程中，開發版本將有助於顯示警告和除錯模式。

使用 CDN

我們也可以從 CDN 庫開始使用 VueJS 檔案。連結 https://unpkg.com/vue 將提供最新版本的 VueJS。VueJS 也可在 jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) 和 cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js) 上獲取。

如果需要，我們可以在自己的伺服器上託管這些檔案，並開始 VueJS 開發。

使用 NPM

對於使用 VueJS 的大型應用程式，建議使用 npm 包進行安裝。它與 Browserify 和 Webpack 以及其他必要的工具一起提供，有助於開發。以下是使用 npm 安裝的命令。

npm  install vue

使用 CLI 命令列

VueJS 還提供 CLI 來安裝 vue 並啟動伺服器。要使用 CLI 安裝，我們需要先安裝 CLI，使用以下命令進行安裝。

npm install --global vue-cli

完成後，它將顯示 VueJS 的 CLI 版本。安裝需要幾分鐘。

+ vue-cli@2.8.2
added 965 packages in 355.414s

以下是使用 Webpack 建立專案的命令。

vue init webpack myproject

要開始使用，請使用以下命令。

cd myproject
npm install
npm run dev

執行 npm run dev 後，它將啟動伺服器並提供瀏覽器顯示的 URL，如下面的截圖所示。

使用 CLI 建立的專案結構如下所示。

列印頁面