Vue3 專案

小飞fei發表於2024-05-11
Vue

建立 Vue3 專案的步驟如下：

  1. 安裝 Node.js

    Vue3 需要依賴 Node.js 環境，因此需要先安裝 Node.js。可以從官網下載 Node.js 的安裝包並安裝，也可以使用包管理器安裝，例如在 Ubuntu 上可以使用以下命令安裝：

    sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

  2. 安裝 Vue CLI

    Vue CLI 是一個官方提供的命令列工具，用於快速建立 Vue 專案。可以使用以下命令全域性安裝 Vue CLI：

    npm install -g @vue/cli

  3. 建立專案

    在安裝完 Vue CLI 後，可以使用 vue create 命令建立一個新的 Vue 專案：

    vue create my-project

    上述命令將建立一個名為 my-project 的新專案。在建立專案時，可以選擇使用預設的配置或手動選擇所需的特性，例如 Babel、TypeScript、ESLint 等。建立完成後，進入專案目錄：

    cd my-project

  4. 啟動專案

    在進入專案目錄後，可以使用以下命令啟動開發伺服器：

    npm run serve

    上述命令將啟動一個開發伺服器，並在瀏覽器中開啟專案的首頁。在開發過程中，可以修改程式碼並儲存，開發伺服器將自動重新載入頁面。

  5. 構建專案

    當專案開發完成後，可以使用以下命令構建生產環境版本的程式碼：

    npm run build

    上述命令將使用 Webpack 打包專案程式碼，並生成一個用於生產環境的 dist 目錄。將 dist 目錄中的檔案部署到伺服器上即可。

以上就是使用 Vue CLI 建立 Vue3 專案的基本步驟。在實際應用中，還可以根據具體的需求進行設定和調整。

網速不夠快可以下載cnpm 快速安裝VueCli

要安裝 cnpm，你需要先安裝 Node.js 和 npm。然後，你可以透過以下命令安裝 cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

這將使用淘寶映象安裝 cnpm。安裝完成後，你可以使用 cnpm 命令來代替 npm 命令，例如：

cnpm install <package-name>

這將使用 cnpm 安裝指定的包。cnpm 可以加速包的下載和安裝過程，因為它使用了淘寶映象，並且可以快取已經下載過的包，以便下次更快地安裝。

相關文章