首頁 > web前端 > Vue.js > 主體

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

王林
發布: 2023-06-09 16:08:34
原創
1030 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板