本文向大家詳細介紹如何使用使用vue.js腳手架工具vue-cli構建大型單頁應用的方法，非常的實用，有需要的小伙伴可以參考下
前置條件:
熟悉使用Javascript HTML5 css3。
理解 ES2015 Module 模組(export、import、export-default)。
了解 nodejs 基礎知識，npm 常用指令，以及 npm script 使用 (vue 專案中使用 npm 進行套件管理)。
了解 webpack 打包工具 (常用設定選項以及 loader 概念)。 (webpack webpack.github.io/ 是一個模組打包工具。它將一堆文件中的每個文件都作為一個模組，找出它們的依賴關係，將它們打包為可部署的靜態資源。webpack 的使用也需要npm 的安裝方式)。
開始安裝：
使用 vue-cli 建立大型單頁應用：vue.js 的鷹架工具。
執行下述程式碼，即可完成專案基礎建置（已配置好 webpack、依賴套件的安裝、基本目錄的產生）。
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
登入後複製
主要目錄：
├── build // webpack的基本配置、開發環境配置、生產環境配置
├── config // 路徑、端口以及反向代理設定
├── dist // webpack打包後的靜態資源
├── node_modules // npm安裝的依賴包
├── src // // 靜態資源
│ │ ├── font
│ │ ├── img
components // 單一元件
│ │ ├─ ─ xxx.vue // 單一檔案元件
│ ├－ router // 路由設定
│ ├── store // 全域變數
├── store // 全域變數
│ ├── main.js 主入口檔案
├── static // 靜態檔案
├── .babelrc // babel的設定項目 ## ├── .babelrc // babel的設定項目 ## ├── .babelrc // babel的設定項目##
├── .gitignore // 會忽略文法檢查的目錄
├── index.html // 入口頁
├── package.json // 項目的描述與依賴
package. json檔案說明：專案的描述與依賴
1. scripts：編譯專案的一些指令
範例：執行npm run dev ，即執行scripts 中對應的node build/dev-server. js。
2. dependencies：專案發佈時的依賴
範例：執行 npm install wx --save ，即安裝依賴模組 wx。
3. devDependencies：專案開發時的依賴
範例：執行 npm install sass --save-dev ，即安裝依賴模組 sass。
附：npm 相關說明:
npm 為 Node.js 版本管理和依賴套件管理工具，透過 node 環境來安裝前端建置專案所需依賴套件。
npm 安裝下載速度過慢，使用淘寶鏡像 cnpm install 快速安裝。設定方法：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
專案載入過程：
1. index.html 頁面
目前建置專案為SPA (單一頁面應用程式)，index.html 頁面即為入口頁面，進行meta 等相關頁面設定。
該頁面的
掛載了主元件。
2. main.js：主入口檔案
註： 在webpack.base.config 中設定-> entry: { app: './src/main.js'}
此檔案初始化vue 實例並引入對應模組(引入前需確認在package.json 中進行設定並安裝)，附main.js 引入及說明：
import Vue from 'vue' // 引入vue
import App from './App' // 引入主元件App.vue
import router from './router' // 引入路由設定檔
import axios from 'axios' // 引入網路請求工具axios
3. App.vue：主元件
在index.html 入口頁面中掛載了主元件，並在main.js 主入口檔案中引入了主元件。
建立了其他元件 (例： /src/components/xxx.vue )後，透過路由配置即可渲染在目前主元件中。
4.路由設定vue-router
路由設定：將元件(components) 對應到路由(routes)，然後告訴vue-router 在哪裡渲染它們
npm install vue-router
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 1.定義（路由）元件：import (目前應用中為單一檔案元件)。
import Home from '../components/Home.vue'
// 2. 定義路由並建立router 實例，然後傳`routes` 配置
// 每個路由應該對應一個組件。
var router = {}
export default router = new Router({
routes: [
{
path: '/',#
component: Home
}
]
})
// 3. 在main.js主入口檔案中建立和掛載根實例。
// 記得要透過router 設定參數注入路由，
// 從而讓整個應用程式都有路由功能
new Vue({
el: '#app',
router,
template: '',
components: { App }
})
// 現在，應用程式已經啟動了！
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
如何使用Vue-Router模式與鉤子（詳細教學）
在vue-cli中使用vue- router搭建底部導覽列（詳細教學）
在AngularJS中使用select載入資料選取預設值的方法該怎麼處理？
以上是vue.js如何建立大型單頁應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
