Vue-cli3.0鷹架建立Vue專案步驟與流程

Vue-cli 3.0 是一個基於 Vue.js 的全新鷹架工具，它可以幫助我們快速創建一個 Vue 專案並且提供了很多便捷的工具和配置。

下面我們就來一步一步介紹使用 Vue-cli 3.0 建立專案的步驟和流程。

安裝Vue-cli 3.0

首先需要全域安裝Vue-cli 3.0，可以透過npm 進行安裝：

npm install -g @vue/cli

安裝完成後可以使用下列指令驗證是否安裝成功：

vue -V

如果輸出了版本號，表示安裝成功。

建立一個Vue 專案

在命令列中執行以下命令建立新的專案：

vue create my-project

其中"my-project" 即專案名稱，根據自己的需要進行修改。

執行指令後會出現一些專案設定選項，例如是否使用 Babel、是否使用 Vuex、是否使用 ESlint 等，視需要進行選擇即可。如果不確定可以直接回車使用預設選項。

選擇完畢後會進行專案安裝，可能需要一定的時間等待安裝完成。

運行專案

專案安裝完成後，進入專案資料夾內使用以下命令進行運行：

cd my-project
npm run serve

該命令會啟動一個本機伺服器，可以透過瀏覽器訪問http://localhost:8080 查看專案運作效果。

專案目錄結構

在使用Vue-cli 3.0 建立專案後，專案的目錄結構如下：

|--node_modules          // 存放项目运行所需的模块
|--public                // 存放静态资源文件
|  |--favicon.ico        // 网站图标
|  |--index.html         // 网站入口文件
|--src                   // 存放项目源码文件
|  |--assets             // 存放静态资源文件
|  |--components         // 存放组件文件
|  |--views              // 存放页面文件
|  |--App.vue            // 页面入口文件
|  |--main.js            // 项目入口文件
|--.gitignore            // Git 版本库忽略文件列表
|--babel.config.js       // Babel 配置文件
|--package.json          // 项目配置文件
|--README.md             // 项目说明文件
|--vue.config.js         // Vue 配置文件

其中，src 目錄下是專案的原始碼文件，public 目錄下是存放靜態資源的資料夾。 main.js 是專案的入口文件，App.vue 是頁面的入口文件。在 src 目錄下，assets 目錄存放的是靜態資源文件，例如圖片、樣式表等。在 src 目錄下，components 存放的是元件文件，views 目錄存放的是頁面檔案。

設定檔

在建立專案過程中，Vue-cli 3.0 同時也產生了一些預設的設定文件，它們都位於專案的根目錄下。其中，package.json 是專案的設定文件，它包含了專案所需的依賴、腳本命令等資訊的聲明。 babel.config.js 中包含了 Babel 的設定資訊。 vue.config.js 包含了 Vue 的設定資訊。

總結

Vue-cli 3.0 透過提供便利的工具和配置，讓我們在建立、開發和維護 Vue 專案時更有效率、更簡單。以上就是使用 Vue-cli 3.0 建立 Vue 專案的步驟和流程，希望可以對大家有幫助。

以上是Vue-cli3.0鷹架建立Vue專案步驟與流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！