当前位置:首页 > 前端技术 > VUE启动流程

VUE启动流程

2022年11月09日 21:48:17前端技术8

1. package.json

在执行npm run dev的时候,会在当前目录中寻找 package.json 文件, 有点类似 Maven 的 pom.xml 文件,包含项目的名称版本、项目依赖等相关信息。

VUE启动流程 _ JavaClub全栈架构师技术笔记
{ # 版本信息
  "name": "kitty-ui",
  "version": "1.0.0",
  "description": "kitty ui project",
  "author": "Louis",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": { # 项目依赖
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {  # 项目依赖
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1","vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {  # node、npm版本要求
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
VUE启动流程 _ JavaClub全栈架构师技术笔记

2. webpack.dev.conf.js

从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。

VUE启动流程 _ JavaClub全栈架构师技术笔记

3.  config/*.js

 webpack.dev.conf.js 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。

VUE启动流程 _ JavaClub全栈架构师技术笔记

4.  config/index.js

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

 VUE启动流程 _ JavaClub全栈架构师技术笔记

5.  index.html

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

VUE启动流程 _ JavaClub全栈架构师技术笔记

6.  main.js

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

VUE启动流程 _ JavaClub全栈架构师技术笔记

7.  App.vue

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

 VUE启动流程 _ JavaClub全栈架构师技术笔记

8.  index.js

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

VUE启动流程 _ JavaClub全栈架构师技术笔记

9.  HelloWorld.vue

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

 VUE启动流程 _ JavaClub全栈架构师技术笔记

10. 页面组成

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

 VUE启动流程 _ JavaClub全栈架构师技术笔记

 

来源链接:https://www.cnblogs.com/zpaixx/p/11634850.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/69170.html

标签: vue
分享给朋友:

“VUE启动流程” 的相关文章

easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互

easy-table-vue+VueJs、SpringBoot+Mybatis实现MVVM模型前后台数据交互

该项目分为前端展示部分和后台服务部分。 前端部分   使用的技术是:NodeJs、Webpack、VueJs   使用的组件库是:IVIEW、easy-table-vue   使用的开发工具是:WebStorm  链接:https://pan.b...

pycharm使用vue

pycharm使用vue

目录 pycharm配置并启动vue项目 Pycharm配置支持vue语法 pycharm打开.vue文件由于ESLint语法检查代码出现红色波浪线 方法1...

vue框架中更改body,html页面背景颜色

beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#fff') }, beforeDestroy () { document.query...

Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从...

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤 首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue 2.0实用手册

Vue 2.0实用手册

1. Vue简介       Vue是国内开发者尤雨溪开发的JavaScript框架,它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计,从最简单的数据处理,到数据交互...

Vue系列教程(一)基础介绍

什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也可以进行手机App的开发,需要借助Weex) Vue.js 是前端的主流框架之一,...

Vue学习笔记(尚硅谷天禹老师)

Vue学习笔记(尚硅谷天禹老师)

Vue学习笔记 文章目录 Vue学习笔记 1. Vue核心 1.1. Vue简介...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。