一、Vue项目入口解析
1. 各初始文件概述
参考地址:https://blog.csdn.net/qq_36145914/article/details/86497123
在vue cli构建的项目中,main.js是项目的入口文件,定义了vue实例,并引入根组件app.vue,将其挂载到index.html中id为‘app’的节点上。
main.js:
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app', //挂载点
components: { App }, // 根组件
template: '<App/>'
})
- 注意:
vue实例挂载后,会对节点原内容进行覆盖。所以,即便index.html和app.vue中都定义了<div id="app"></app>
, 最终网页也不会出现两个id为app的节点。
<!--index.html-->
<body>
<div id="app"></div>
</body>
<!--app.vue-->
<template>
<div id="app">
.....
</div>
</template>
../router/index.js
把准备好的路由组件注册到路由里
2. 问题
- main.js为什么叫入口文件,什么是“入口文件”?
- 在运行npm run dev后,若不做特殊设置,index.html实际页面中仅挂载了app.js一个脚本,所有组件去哪儿了,app.js是如何形成的?
- vue实例化在main.js中,但在index.html中并没有引入main.js,main.js与index.html是如何产生关联的?
3. 解答:Webpack
vue cli搭建的项目本质是一个集成预设置的webpack项目。是webpack驱动着项目的打包,热重载和本地运行。
而上述问题都是由webpack逐一处理的:
- 入口文件是一个webpack概念;入口文件是webpack构建内部依赖图的起点。
- app.js是由webpack打包生成的输出文件。
- 而将app.js挂载到index.html这一过程是由webpack的一个插件——html-webpack-plugin完成的。
4. Vue的Webpack设置
入口配置
在webpack.base/webpack.dev中,vue默认设置main.js为项目的唯一入口。
在项目打包时,webpack会从main.js开始构建依赖图,梳理整个项目依赖且不重复的模块。
入口配置如下:
entry: {
app: './src/main.js'
},
- 延伸:如果要做多页面项目,而非默认的SPA(single page web application),那么就需要为每个页面设置一个入口。如果要将app与第三方库分离,也需要设置两个入口。
输出配置
在output中,可以配置打包输出文件的路径,名称,进行分离js/css等操作。
// webpack.base.conf
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
这里只讲一下filename这一属性:
filename定义的是输出文件的名称,[name]是webpack中的占位符,它对应entry中对象的键名。
默认配置中仅有一个入口-app,所以,在默认的开发模式下,本项目的所有资源最终打包生成的文件就是app.js。
注:在开发模式下,项目是跑在webpack-dev-server的虚拟服务器上,此时app.js仅存在于内存中。
HtmlWebpackPlugin配置
vue的webpack默认配置中还加入了htmlwebpackplugin插件,用于生成index.html与挂载JS脚本。
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon:'static/img/temple.png'
})
配置参数中:
- filename是输出文件名,
- template是本地模板文件名,HtmlWebpackPlugin默认挂载的模板就是根目录下的index.html。
- inject属性定义了js脚本加载的位置,默认值true,则在body最下方加载。
- 你还可以添加其它参数,比如网站图标favicon等,这一系列参数均可参考webpack官方文档。
5. 总结
当你输入 npm run dev 后,发生了这样一连串事件——webpack选择了开发配置,并进入main.js入口文件,构建项目依赖图。webpack将整理后的所有依赖模块打包成输出文件app.js,接着htmlwebpackPlugin将它挂载到index.html页面上。
二、VSCode配置Node环境
"version": "0.2.0",
"configurations": [
{
"type" : "node",
"request": "attach",
"name" : "Node:Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
]
三、组件相关知识
- 组件是可复用的Vue实例
组件的各属性选项
- el: 挂载元素。可以是CSS选择符,或实际HTML元素,或返回HTML元素的函数
- data: 必须是一个函数
- props: 向子组件传递数据
- components: 子组件。
- template: 模板。模板将会替换挂载的元素。挂载元素的内容都将被忽略。也就是说,
template: '<App/>'
表示用<app></app>
替换index.html
里面的<div id="app"></div>
生命周期
所谓的生命周期钩子,就是说组件在特定的时刻会自动触发事件,执行对应的函数。
四、指令
v-bind
作用:用来动态的绑定一个或者多个特性
v-for
作用:通过遍历数组来进行渲染。
并且在v-for中,拥有对父作用域属性的完全访问权限。
<ul id="app">
<li v-for="item in items">
{{parent}}-{{item.text}}
</li>
</ul>
<script type="text/javascript">
var example = new Vue({
el:'#app',
data:{
parent:'父作用域'
items:[
{text:'文本1'},
{text:'文本2'}
]
}
})
</script>
<!--渲染后-->
<ul id="app">
<li>父作用域-文本1</li>
<li>父作用域-文本2</li>
</ul>
v-model
作用:在表单上创建数据双向绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
修饰符:
- .lazy:默认情况下,v-model同步输入框的值和数据。通过这个修饰符,可转变为发生change事件再同步。
- .number:自动将用户输入第值转化为数值类型
- .trim:自动过滤用户输入的首尾空格
各种Tips
- vue的核心:简洁的模板语法,声明式地将数据渲染进 DOM 的系统,所有东西都是响应式的
- export default:这样export的话在import时模块名字就可以随便写啦
模板语法
- “Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>
属性
- el
- data
- computed 计算属性默认只有getter,但是也可以自己定义setter
- watch