先后順序：package.json > webpack.dev.conf.js > config/*.js > config/index.js > index.html > App.vue的export外的js代碼 > main.js > App.vue的export里面的js代碼 > route 目錄下的 index.js > HelloWorld.vue > 組成 index.html 單頁SPA應用首頁

SPA：單頁面web應用，一般整個應用只有一個html頁面，通過前端路由實現(xiàn)無刷新跳轉(zhuǎn)。

Vue就是SPA應用的典型代表，特別是配合webpack等前端構(gòu)建工具，加載頁面的時候?qū)avaScript、CSS統(tǒng)一加載，然后通過監(jiān)聽url的hash實現(xiàn)內(nèi)容切換。

優(yōu)點：

無刷新切換內(nèi)容，提高用戶體驗。

符合前后端分離的開發(fā)思想，通過ajax異步請求數(shù)據(jù)接口獲取數(shù)據(jù)，后臺只需要負責數(shù)據(jù)，不用考慮渲染。前端使用vue等MVVM框架渲染數(shù)據(jù)非常合適。

減輕服務器壓力，展示邏輯和數(shù)據(jù)渲染在前端完成，服務器任務更明確，壓力減輕。

后端數(shù)據(jù)接口可復用，設計JSON格式數(shù)據(jù)可以在PC、移動端通用。

缺點：

不利于SEO(搜索引擎優(yōu)化)，應用數(shù)據(jù)是通過請求接口動態(tài)渲染，不利于SEO。

首頁加載慢，SPA下大部分的資源需要在首頁加載，造成首頁白屏等問題。

package.json

在當前項目執(zhí)行npm run dev的時候，會尋找 package.json 文件, 包含項目的名稱版本、項目依賴等相關(guān)信息

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"test": "npm run unit && npm run e2e",

"build": "node build/build.js"

},

webpack.dev.conf.js

build/webpack.dev.conf.js 配置并啟動 webpack-dev-server

const utils = require('./utils')

const webpack = require('webpack')

const config = require('../config')

const merge = require('webpack-merge')

const path = require('path')

const baseWebpackConfig = require('./webpack.base.conf')

const CopyWebpackPlugin = require('copy-webpack-plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

const portfinder = require('portfinder')

const HOST = process.env.HOST

const PORT = process.env.PORT && Number(process.env.PORT)

config/*.js

config 目錄下服務器環(huán)境的配置文件。

config/index.js

index.js 文件中包含服務器 host 和 port 以及入口文件的相關(guān)配置，默認啟動端口是8080，這里可以進行修改。

host: 'localhost',

port: 8080,

index.html

index.html 的內(nèi)容很簡單，主要是提供一個 div的ID #app 給 vue 掛載。

main.js

main.js 中， 引入了 vue、App 和 router 模塊， 創(chuàng)建了一個 Vue 對象，并把 App.vue 模板的內(nèi)容掛載到 index.html 的 id 為 app 的 div 標簽下， 并綁定了一個路由配置。

App.vue

上面 main.js 把 App.vue 模板的內(nèi)容，放置在了 index.html 的 div 標簽下面。查看 App.vue 的內(nèi)容我們看到，這個頁面的內(nèi)容由一個 logo 和一個待放置內(nèi)容的 router-view，router-view 的內(nèi)容將由 router 配置決定。

index.js

查看 route 目錄下的 index.js，我們發(fā)現(xiàn)這里配置了一個路由， 在訪問路徑 / 的時候， 會把 HelloWorld 模板的內(nèi)容放置到上面的 router-view中。

HelloWorld.vue

HelloWorld 中主要是一些 Vue 介紹顯示內(nèi)容。

頁面組成

所以，頁面關(guān)系組成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

總結(jié)

以上是生活随笔為你收集整理的vuecli启动的服务器位置,VUE启动流程vue-cli的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。