vue.js如何建立大型單頁應用

本文向大家詳細介紹如何使用使用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 等相關頁面設定。

該頁面的 4c766faa15dbdc3e0301dfaffd03c28d94b3e26ee717c64999d7867364b1b4a3 掛載了主元件。

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: '578d07aa9e36ca6b43806c9706879c6d',
  components: { App }
})

// 現在，應用程式已經啟動了！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

如何使用Vue-Router模式與鉤子（詳細教學）

在vue-cli中使用vue- router搭建底部導覽列（詳細教學）

在AngularJS中使用select載入資料選取預設值的方法該怎麼處理？

以上是vue.js如何建立大型單頁應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！