Vue.js学习笔记

最新推荐文章于 2025-03-01 19:48:24 发布

原创最新推荐文章于 2025-03-01 19:48:24 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

6 篇文章

订阅专栏

一、Vue项目入口解析

1. 各初始文件概述

参考地址：https://blog.youkuaiyun.com/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>