vuecli启动的服务器位置,VUE启动流程vue-cli

先后顺序: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页面,通过前端路由实现无刷新跳转。

Vue就是SPA应用的典型代表,特别是配合webpack等前端构建工具,加载页面的时候将JavaScript、CSS统一加载,然后通过监听url的hash实现内容切换。

优点:

无刷新切换内容,提高用户体验。

符合前后端分离的开发思想,通过ajax异步请求数据接口获取数据,后台只需要负责数据,不用考虑渲染。前端使用vue等MVVM框架渲染数据非常合适。

减轻服务器压力,展示逻辑和数据渲染在前端完成,服务器任务更明确,压力减轻。

后端数据接口可复用,设计JSON格式数据可以在PC、移动端通用。

缺点:

不利于SEO(搜索引擎优化),应用数据是通过请求接口动态渲染,不利于SEO。

首页加载慢,SPA下大部分的资源需要在首页加载,造成首页白屏等问题。

package.json

在当前项目执行npm run dev的时候,会寻找 package.json 文件, 包含项目的名称版本、项目依赖等相关信息

"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 目录下服务器环境的配置文件。

config/index.js

index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是8080,这里可以进行修改。

host: 'localhost',

port: 8080,

index.html

index.html 的内容很简单,主要是提供一个 div的ID #app 给 vue 挂载。

main.js

main.js 中, 引入了 vue、App 和 router 模块, 创建了一个 Vue 对象,并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。

App.vue

上面 main.js 把 App.vue 模板的内容,放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view,router-view 的内容将由 router 配置决定。

index.js

查看 route 目录下的 index.js,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view中。

HelloWorld.vue

HelloWorld 中主要是一些 Vue 介绍显示内容。

页面组成

所以,页面关系组成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值