Vue.js学习笔记

一、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: ''
})

• 注意：
  vue实例挂载后，会对节点原内容进行覆盖。所以，即便index.html和app.vue中都定义了
  , 最终网页也不会出现两个id为app的节点。

../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: '' 表示用替换index.html里面的

生命周期

所谓的生命周期钩子，就是说组件在特定的时刻会自动触发事件，执行对应的函数。

四、指令

v-bind

作用：用来动态的绑定一个或者多个特性

v-for

作用：通过遍历数组来进行渲染。

并且在v-for中，拥有对父作用域属性的完全访问权限。

    

        {{parent}}-{{item.text}}
    






    
父作用域-文本1
    
父作用域-文本2

v-model

作用：在表单上创建数据双向绑定。

v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

修饰符：

• .lazy：默认情况下，v-model同步输入框的值和数据。通过这个修饰符，可转变为发生change事件再同步。
• .number：自动将用户输入第值转化为数值类型
• .trim：自动过滤用户输入的首尾空格

各种Tips

• vue的核心：简洁的模板语法，声明式地将数据渲染进 DOM 的系统，所有东西都是响应式的
• export default：这样export的话在import时模块名字就可以随便写啦

模板语法

• “Mustache”语法 (双大括号) 的文本插值

Message: {{ msg }}

属性

• el
• data
• computed 计算属性默认只有getter，但是也可以自己定义setter
• watch