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
三、基本專案配置
專案中可以設定不同環境變量，如開發環境、測試環境和生產環境。 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/'
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: '<App/>',
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中文網其他相關文章！
