当你输入 npm run dev 后，webpack选择了开发配置，并进入main.js入口文件，构建项目依赖图。webpack将整理后的所有依赖模块打包成输出文件app.js，接着htmlwebpackPlugin将它挂载到index.html页面上(将 app.js 通过main.js 文件创建的一个 vue 的实例：el:"#app"绑定在index.html 的 <div id="app"></div>上）。
main.js
发表于： 2019-11-03 22:45:30
0 1018
Vue脚手架结构
一级文件夹
bulid：项目构建相关代码
config：项目开发环境配置
node_modules ：npm或者cnpm或者yarm所下载的依赖包。
src：源码目录
asserts：对应的图片等资源文件
components：vue的公共组件
router：
app.vue:页面入口文件，仅此于外部的index
main.js：程序入口文件【加载各种公共组件】
static：静态文件，比如：图片、json文件
一级文件
1 .babelrc
2 .editorconfig
3 .eslintignore
4 .eslintrc
5 文档类型
6 .postcssrc.js
7 index.html ：最外层的页面一般title等都设置在这里。
8 package.json ：存放你要依赖包的json数据。
9 README.md
Webpack
vue-cli通过webpack把js文件引入index.html
vue cli搭建的项目本质是一个集成预设置的webpack项目。是webpack驱动着项目的打包，热重载和本地运行。
而上述问题都是由webpack逐一处理的：
1. 入口文件是一个webpack概念；入口文件是webpack构建内部依赖图的起点。
2. app.js是由webpack打包生成的输出文件。
3. 而将app.js挂载到index.html这一过程是由webpack的一个插件——html-webpack-plugin完成的。
什么是webpack
webpack 是JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，然后将应用程序所需的所有模块打包成一个或多个 bundle。
webpack的核心作用
1. 浏览器仅能识别html,css和js，而无法识别封装的less,vue,jsx等文件，而webpack则可以将这些文件解析打包成浏览器能识别的基本文件。
2. 模块化开发中，我们会编写大量模块，如果不打包就上线，那么页面加载或交互时，将会发起大量资源请求。为了性能优化，需要使用webpack这样的打包器对模块进行打包整合，以减少请求数。就像简单的vue项目，所有组件最终都将被打包到一个app.js中。
3. 相较于无差别打包依赖模块的传统打包器，webpack的核心优势在于它从入口文件出发，递归构建依赖关系图。通过这样的依赖梳理，webpack打包出的bundle不会包含重复或未使用的模块，实现了按需打包，极大的减少了冗余。
webpack配置文件
vue cli 在build目录下默认有三种场景配置 ——webpack.base/dev/prod.conf.js
base是基础配置，dev/prod分别是开发和产品场景的配置，它们在merge基础配置后追加或覆盖相关配置。
const devWebpackConfig = merge(baseWebpackConfig, {
// 开发环境设置
})
在运行或打包时，会根据你的命令选择不同的配置文件。脚本配置是写在package.json中的，如npm run dev就是使用开发环境配置。
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
一份配置包含了入口文件，输出和各种插件的配置。
vue的入口文件设置
index.html
在vue cli构建的项目中，main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上。
- 注意：
vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了<div id="app"></app>, 最终网页也不会出现两个id为app的节点。
new Vue的参数，解释如下：
el：官方解释为实例提供挂载的元素。此处为index.html中的<div id="app"><div>。
router：为router:router,的简写，指向引入文件中的routes:[]
components：注册哪些组件，需在顶部引入文件。
template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的<div id="app"></div>
App.vue
由于main.js是入口文件不适合写逻辑，所以下面分支出一个子组件（App.vue：根实例下的一个子组件），我们使用的时候就把这个子组件（App.vue）当做我们的顶级组件。
index.html包含所有页面，而App.vue包含除了index的页面，也就是路由嵌套，所有子路由都在App.vue下，即App.vue是最外层的父路由
App.vue页面的html格式就是一个template标签中包含一个app，相当于组件化的形式，而组件的内容写在这个app中（必须只有一个template包一个app，内容写在这个app中，不然会报错）
而router-view标签就是当前页面下的子页面，可以理解成这个router-view是另一个页面，被当前页面所包含着，有点类似ifame标签的功能。
routers的结构
这里的routes/index.js 中存的就是路由的数组。
路由的引用方式
1.router-link 标签
<router-link to="/">返回path为/的路径</router-link>
2.方法中调用
this.$router.push('/');
路由地址中传参
1.<router-link v-if="ok" :to="{path:'/mainPage',query:{title:'首页',mcontent:'首页内容在此'}}"></router-link>
2.this.$router.push({path:'/mainPage',query:{title:'首页',mcontent:'首页内容在此'}});
接收参数
<h3>{{$route.query.title}}-{{$route.query.mcontent}}</h3>
index.js
index.js 内容主要包含引入相关资源以及初始化路由两部分
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
path就是你要访问的页面的路径，这里写的是根路径序("/")所以你直接访问localhost:8080就会出现一个App.vue中插入一个HelloWorld.vue的页面（这个相当于路由嵌套）
name相当于给它命名这个比较无关紧要，
component相当于你要引用的页面，这里引用的是HelloWorld.vue这个页面，注意上面的import，这里的HelloWorld是一个变量，对应上面的路径文件。你也可以直接将路径写在这里。
style标签中的scoped属性
如果没写这条那么这个style的样式会影响到这个页面所有的子路由，如果加了那么这个样式只对当前页面起作用。
返回列表
评论