Vue-cli腳手架工具使用及專案設定說明

Vue-cli腳手架工具使用及專案配置說明

隨著前端技術的不斷發展，前端框架也越來越受到開發者的關注。 Vue.js作為前端框架的佼佼者，已被廣泛應用於各種 Web 應用的開發中。 Vue-cli 是 Vue.js 官方提供的一個基於命令列的腳手架，可以幫助開發者快速初始化 Vue.js 專案結構，讓我們能夠更專注於業務開發。本文將介紹 Vue-cli 的安裝和使用，以及基本的專案設定。

一、安裝 Vue-cli

如果你還沒安裝 Node.js，那你需要先安裝 Node.js。安裝 Node.js 的方法請自行搜尋。

安裝完 Node.js 後，在命令列中輸入以下指令來安裝 Vue-cli：

npm install -g vue-cli

這個指令會在全域環境中安裝 vue-cli。

注意：如果安裝過程中出現權限不足的情況，請使用 sudo 命令或以管理員身分執行命令列。

二、使用 Vue-cli 建立專案

安裝完 Vue-cli 後，我們就可以開始使用它來建立專案。在命令列中輸入以下指令來建立一個基於webpack 範本的Vue.js 專案：

vue init webpack my-project

這條指令執行後，會問你一些問題，例如專案名稱、專案描述、作者等等，你可以依照自己的需求填寫。填寫完畢後，它會為我們創建一個專案範本。

安裝依賴：

npm install

執行上述指令後，會從package.json安裝相依性。

運行專案：

npm run dev

三、基本專案配置

1. #專案結構

• build：專案建置打包相關設定資料夾
• config：專案設定資料夾
• node_modules：專案依賴套件資料夾
• src：專案程式碼資料夾，包含元件、範本、靜態資源等
• static：專案靜態資源資料夾，例如圖片、字體等
• test：專案測試資料夾
• .babelrc：Babel 設定檔
• .editorconfig ：程式碼風格設定檔
• .gitignore：Git 版本控制忽略檔案
• .postcssrc.js：PostCSS 設定檔
• index.html：專案頁面入口檔
• package.json：在專案設定檔

2. 環境變數設定

專案中可以設定不同環境變量，如開發環境、測試環境和生產環境。 Vue-cli 預設提供了三種環境模式，分別是：development（開發環境）、testing（測試環境）和 production（生產環境）。

在專案根目錄下的 config 資料夾中，有一個 index.js 文件，裡麵包含了各種不同環境下的設定資訊。我們可以根據需要修改對應的設定資訊。

例如，我們可以在index.js 檔案中為開發環境和生產環境分別設定不同的API 位址：

module.exports = {
  // 开发环境
  dev: {
    env: require('./dev.env'),
    port: 8080,
    api: 'http://localhost:3000'
    ...
  },
  // 生产环境
  build: {
    env: require('./prod.env'),
    api: 'http://api.example.com'
    ...
  }
}

在程式碼中我們可以透過process. env.NODE_ENV 來取得目前環境，從而取得對應的API 位址：

const API_URL = process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/api/'

3. Vuex

Vuex 是專為Vue.js 應用程式開發的狀態管理模式，可以用來管理全域狀態，例如登入狀態、語言、主題等等。

在建立專案範本時，可以選擇是否使用 Vuex，在專案中也可以隨時新增或移除 Vuex。

安裝Vuex：

npm install vuex --save

在專案中使用Vuex，首先需要在main.js檔案中引入Vuex，並註冊到Vue 實例中：

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  template: '',
  components: { App }
})

接下來，在src 目錄下新建一個store 目錄，並在這個目錄下寫一個各個模組的狀態管理。

例如，我們在專案中需要管理一個儲存登入狀態的模組：

export default {
  state: {
    isLogged: false,
    user: {}
  },
  mutations: {
    SET_LOGIN_STATUS (state, payload) {
      state.isLogged = payload.isLogged
      state.user = payload.user
    }
  }
}

在需要使用這個狀態管理時，我們可以透過以下方式來取得和修改狀態：

// 获取状态
this.$store.state.isLogged

// 修改状态
this.$store.commit('SET_LOGIN_STATUS', {
  isLogged: true,
  user: {
    name: 'Tom',
    age: 18
  }
})

總結

Vue-cli 提供了開箱即用的鷹架功能，幫助我們快速建造並開發Vue.js 專案。本文介紹了 Vue-cli 的安裝和使用，以及基本專案配置，包括專案結構、環境變數配置和 Vuex 等。希望本文能幫助你更好地使用 Vue-cli，並開發更好的 Web 應用。

以上是Vue-cli腳手架工具使用及專案設定說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！