vue-cli初始化一個vue.js專案的方法實例

解析打包.vue檔案

vue為了能夠使我們在專案開發中對元件進行更好的維護，提供了一個單一檔案元件系統，vue把每一個獨立的元件放在一個. vue的檔案中，在這個檔案中提供基礎三個自訂標籤：
1. template
2. script
3. style
來放置元件不同的內容區塊，但因為瀏覽器不能夠直接去識別該檔案類型，所以我們需要透過webpack來進行編譯打包，官方提供了一個對.vue 進行處理的loader：vue-loader

ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'

vue實際開發使用.vue 的單組件系統來實現，但是不能適應實際複雜的需求，我們還需要配置很多的一些東西來和.vue 進行融合，這個配置很繁瑣，所以官方提供了一個工具，幫助我們來構建一個專案開發過程中必須使用的一些內容，這個工具：vue-cli，透過這個工具我們就可以很方便的來創建一個基於vue的項目，我們也把這個工具稱為---腳手架

安裝

npm install vue-cli -g(全局)
或
yarn global add vue-cli

當我們透過上述方式安裝好vue的鷹架以後，我們就可以在命令列中使用一個命令：vue（該命令是沒有-cli的）

vue的使用

vue init

init：初始化（建立）基於vue的專案

vue init webpack hello：基於webpack來建構一個名稱為hello的vue專案（專案建置一定要聯網！聯網！聯網！）

vue-cli是一個互動式命令列，透過vue指令建置專案會需要我們填寫一些專案的資訊：
Project Name：要建立的專案名稱（該指令會生產一個package.json文件，檔案中的name選項就是這個ProjectName，預設為目前建立的專案目錄名稱，也可以自行製定（但需要符合package.json中name命名規則，不要出現大寫字母，空格，底線，可以使用- ）

Project Description：專案簡介，也會出現在package.json檔案中,可選

Author：作者，可選

下一步直接回車

Install vue-router：是否安裝vue路由組件，做專案的話一定要安裝

Use ESLint to lint your code：是否需要使用ESLint模組進行程式碼偵測

Setup unit tests with Karma + Mocha?：是否安裝測試（單元測試）

Setup e2e tests with Nightwatch?：是否安裝端對端的測試

完成上面步驟，over！

透過vue-cli完成設定以後，下一步需要安裝vue所需的依賴套件，專案需要安裝的依賴套件在vue-cli工具自動產生的package.json檔案中有說明：

dependencies：專案中實際上需要使用到的依賴套件
devDependencies：專案開發過程中需要使用的一些工具包，不是專案實際線上程式碼的一部分

運行

#所需的安裝依賴套件安裝完成以後，就可以啟動項目，運行

yarn run dev / npm run dev：開啟一個測試開發環境
yarn run build : 建置項目，把專案打包，我們可以把專案打包後的檔案上傳到伺服器

如果是首次運行，那麼會看到一個歡迎頁面，下面我們就可以進行專案開發

專案結構

• build目錄：建置專案指令所需要使用到的一些腳本檔案和設定檔

• config目錄：在vue-cli中會自動安裝一個小型的express搭建的熱重載web伺服器，config裡面就是關於這個伺服器的相關設定

• dist目錄：專案編譯建置上線後的存放目錄

• node_modules目錄：專案依賴套件存放目錄

• src目錄：專案原始碼存放目錄

• static目錄：靜態資源存放目錄

在專案開發過程中，我們的大部分任務是在src這個目錄下完成的

• main.js：vue腳手架為我們自動產生的專案中設定的入口文件，在該入口文件中，做了一些專案初始化的工作

• 引入Vue

• 引入必要的元件

• #建立Vue實例

##路由

當我們的應用程式變得複雜了以後，涉及到的頁面也會變多，邏輯也會變得複雜，原來我們是透過多頁面的方式來組織和維護我們的網站，但是這樣的使用者體驗不是太好（因為會刷新或跳轉頁面），為了解決用戶體驗問題，最好的方式，數據（頁面會發生變化），但是不需要跳轉、刷新。

• 透過ajax非同步無刷新取得資料

• #取得到資料以後透過vue來處理與管理還有渲染頁面

什麼情況下取得資料渲染頁面？傳統的處理方式：透過url重新發送請求得到新的資料和頁面，取得什麼頁面資料由url來決定，使用了單頁開發模式的話，就不能再使用頁面跳轉，但是可以使用url中的hash值的變化來決定要取得什麼內容渲染什麼頁面。

所以一個url的hash對應一個視圖，那我們就需要設定hash和視圖的關係，我們可以把hash和view做一個對應關係（映射）

- 設定hash-view的map（映射）關係
- 監聽hash變化
- 當hash值變化的時候，根據map找到對應的元件來渲染視圖

vue為我們提供了一個第三方的框架來實現上述的功能:vue-router

上面我們提到的位址-視圖的對應：路由

相關推薦：

vue-cli開發多頁面應用程式的簡單範例

vue-cli編寫vue外掛實例

#在vue-cli中使用路由的方法

以上是vue-cli初始化一個vue.js專案的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！