Vue学习笔记（三）

erin sakura

已于 2022-02-19 00:10:54 修改

阅读量346

点赞数

文章标签： vue.js 学习前端

于 2022-02-19 00:10:45 首次发布

本文链接：https://blog.csdn.net/qq_27144571/article/details/123009744

版权

1.如果想通过双向绑定v-model绑定数据的时候，不要直接选择props属性中的数据，而是应该选择根据props中数据的值创建的data或者计算属性。

2.组件的watch属性可以监听某个数据的改变，并且watch属性中定义的监听方法名称要和监听的数据名相同。

3.当父组件要直接访问子组件或子组件要直接访问父组件或者子组件要访问根组件的时候，有两种方式：

在父组件中访问子组件：使用 $c h i l d r e n 或者$ refs
子组件访问父组件：使用$parent

4.this.$childern是一个数组，包括在父组件中使用的所有子组件对象。（有几个标签就有几个cpn子组件对象）但以下标的方式（this.$children[2]）取得子组件对象的方式不太好，因为父组件中可能会增加新的子组件。

5.如果要在父组件中使用this.$refs得到其子组件对象，需要为在父组件中的子组件标签添加属性ref，否则this.$refs默认会是一个空对象。

6.一般只有在需要拿到父组件所有的子组件对象时才需要用到this.$children，其他时候都是用this.$refs.子组件的ref属性值的方式获得特定对应的子组件。

7.在子组件中使用this.$parent可以得到父组件对象，并且随之可以得到父组件对象中的数据或使用父组件对象的方法。但一般不支持使用this.$parent得到父组件对象，因为这样子组件和父组件之间的耦合度太高了，子组件的复用性不太强。

8.组件的插槽（slot）可以让封装的组件更加具有扩展性，可以让使用者决定组件内部的一些内容到底展示什么，即不在组件内部写死内容，而是由外界传内容进组件，结构一致但内容不同。

9.怎么合理封装：抽取共性，暴露不同。即将共性抽取到组件中，将不同暴露为插槽，一旦预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。

10.如果想在父组件使用子组件时替换子组件中有名字的插槽，只能为要替换的插槽标签添加slot属性，并指定要被替换的插槽的名字。

11.封装类似于导航栏类型的组件时，使用的会是具名插槽。

12.模板属于哪个组件，其中使用的变量就会是那个组件的变量。官方准则：“父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。”

13.“父组件替换子组件插槽中的标签，但是内容由子组件来提供”

14.在父组件使用子组件时，从子组件中拿到数据：

为子组件slot标签绑定数据<slot :data(或其他名字)="pLanguages">，pLanguages是子组件的数据
在父组件中使用子组件时，需要使用作用域插槽，<template slot-scope="slot(或其他名字)">，然后通过slot.data获取数据：<span>{{slot.abc.join(" * ")}}</span>

15.在没有模块化开发的时候，很容易出现全局变量重名的问题。虽然匿名函数可以解决全局变量重名的问题，但这样的话代码的可复用性就不高了。所以最后可以使用模块作为出口，常见的模块化规范：CommonJS（Node就是使用的该规范）、AMD、CMD、ES6的Modules，他们多有两个核心：导出和倒入，CommonJS和ES6的Modules在开发中更常见。

16.按照模块化的思想开发时，不能在一个模块中使用其他模块中的变量和方法。

17.为script标签添加type属性时报错：
在这里插入图片描述
解决type为module时无法加载js的情况

在vscode中安装live server，选择需要运行的文件，以open with live server的方式打开。

18.在ES6中导出变量时，有两种方式，第一种是在定义变量的时候就导出，第二种是定义变量后再导出。

19.在开发中还可以用export default导出变量/函数/类，同一个模块中不允许同时存在多个export default，在其他js中import引入变量时，就可以不使用导出时的名称而是可以自己随便命名，并且不用加上大括号；export default函数时也可以以匿名函数的形式导出

20.import * as all from "./aaa.ja"; 可以将aaa.js中所有export导出的变量添加到all中，以all.flag的形式取导出的变量即可。

21.grunt/gulp（前端自动化任务管理工具）、webpack、rollup都是JavaScript打包工具。

22.在前端模块化的一些方案中（AMD、CMD、CommonJS、ES6），只有直接使用ES6的时候浏览器才会识别出来，使用webpack才能对其他方案进行处理并打包，之后浏览器才能支持用CommonJS等其他模块化方案开发的项目，并且打包后的项目中不会有CommonJS相关的代码。

23.webpack可以使得我们进行模块化开发，并且帮助处理模块间的依赖关系，不仅是js文件，CSS、图片、json文件等在webpack中都可以被当作模块来使用。webpack就是一个前端模块化打包工具

24.如果工程模块依赖简单，并且没有用到模块化概念，只需要进行简单的合并、压缩时，使用grunt/gulp即可。grunt/gulp更加强调的是前端流程的自动化，模块化不是其核心；webpack更加强调模块化开发管理，而文件压缩合并、预处理等是其附带的功能。

25.webpack为了可以正常运行，必须依赖node环境。node环境为了可以正常地执行很多代码，其中必须包含各种依赖的包，npm（node packages manager）就是用于管理包的工具。

26.全局安装版本为3.6.0的webpack，因为vue cli2依赖于该版本，而且其中才能看到webpack的配置，vue cli3中会隐藏配置。

npm install webpack@3.6.0 -g

终端执行以上代码时，出现以下问题：
在这里插入图片描述

参考博客webpack command not found解决办法

出现错误的原因是“在安装webpack的时候，虽然安装成功，却到了node的bin下，并不是系统环境变量”：
在这里插入图片描述

需要做一个软链接将webpack移到系统环境（/usr/local/bin）下，最后查询webpack版本时成功：
在这里插入图片描述

27.当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack。

28.html不能引用使用了CommonJS的文件，所以需要webpack对文件进行打包并生成最终的js文件，然后html引用最终的js文件即可。

29.终端cd到项目所在的路径并执行命令：

webpack ./src/main.js ./dist/bundle.js

告诉webpack将当前路径下的./src/main.js文件打包并生成./dist/bundle.js，至于main.js依赖的、以CommonJS规范引入的其他js文件，webpack会自动处理各种模块之间的依赖，所以只需要打包main.js文件。

30.在打包时报错ERROR in Entry module not found: Error: Can't resolve './src/main.js' in，各种google，然后全局和局部都安装了babel-loader和babel-core，全局安装执行的命令是：npm install babel-loader -g 和npm install babel-core -g；局部安装要cd到当前项目文件夹中执行命令：npm install babel-loader -D和npm install babel-core -D。
在这里插入图片描述

结果发现是个乌龙，命名main.js时在前面多加了一个空格成了" main.js"。。。。。。

31.如果项目想单独依赖于node环境的话，就需要在终端cd到项目文件夹，并且执行命令npm init生成package.json文件，其中都是项目的一些信息。

32.在webpack.config.js中动态获取路径，就需要引入node中的path包，在path.resolve(__dirname, "dist")中，__dirname是node上下文中自带的全局变量，保存的是webpack.config.js文件所在的路径，最后拼接"dist"会获得一个绝对路径而不是相对路径。webpack打包将要选择的入口文件以及出口文件会映射到module.exports中，分别对应属性entry的值以及属性output的值。

33.package.json文件中存在scripts属性（脚本），其中一般会有test属性，对应的值是一行命令，如果在终端中执行命令npm run test就会执行对应的命令。所以如果在scripts属性中添加"build": "webpack"，在终端中执行命令npm run build的话就相当于在终端中执行命令webpack，对项目进行打包。

注意：在json文件中添加脚本将webpack命令映射到npm run build后应该重启vscode，不然直接在终端执行命令npm run build会提示需要安装webpack-cli，但其实webpack4之后才会将webpack-cli分离出来，所以没有必要安装webpack-cli。

34.终端cd到对应项目目录，局部安装webpack，执行命令npm install webpack@3.6.0 --save-dev，其中--save-dev是开发时依赖，项目打包后不需要继续使用，执行命令后在package.json文件中自动会添加decDependencies属性：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

35.在终端中执行命令webpack时会使用全局的webpack版本进行打包，如果想使用本地的（局部的），则需要将webpack通过package.json中的scripts映射到npm run build，最后终端执行命令npm run build会优先找到本地（局部）的、然后找到全局的webpack。

36.如果一定要在终端用webpack命令而不是运行映射到package.json文件中的"build"脚本来启动局部webpack打包，还可以终端执行命令node_modules/.bin/webpack。

37.package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置：首先会寻找本地的node_modules/.bin路径中的webpack命令，如果没有找到就去全局的环境变量中找。

38.loader是webpack中一个核心的概念（主要用于转换某些类型的模块，它是一个转换器），可以将ES6代码转成ES5代码、将TypeScript代码转成ES5代码、将scss、less转换成css、将.jsx、.vue文件转换成js文件等，不同的场景需要不同的loader，可以在webpack官网中找到并学习对应的用法。

39.作为入口的js文件最好放在src文件夹下，功能性的文件建议放到src文件夹中另外建立的文件夹。在没有loader之前，webpack只能顺便打包作为入口文件的main.js中的依赖文件，如果文件a在文件夹中存在，但main.js没有依赖文件a，打包的时候就不会打包文件a。

40.带github.io的网站一般是通过软件gitbook写的文章同步出去的。非营利组织的网址结尾会是org，如webpack的官网网址就是https://webpack.js.org。

41.loader使用步骤：

通过npm安装需要使用的loader（一般去webpack官网上下载，或者到我们自己翻译过的网站（https://www.webpackjs.com）点击中文文档找到安装loader的命令）
在webpack.config.js中module.exports的module关键字下进行配置。

42.在main.js文件中引入css文件后，用webpack命令打包时报错：
在这里插入图片描述

那就是要安装css-loader，上webpack官网找到安装css-loader的npm命令：

npm install --save-dev css-loader

果然报错（npm ERR! code ERESOLVE等），就是版本不匹配，于是找到官网，点击标题css-loader下的npm，点击最右边的标题versions找到了css-loader和style-loader的所有版本，之前看到有人安装了2.0.0版本的，点开详细信息，至少需要Webpack v4.0.0版本的环境，执行以下命令后报错：

npm install --save-dev css-loader@2.0.0

在这里插入图片描述

因为本机安装的是webpack3.6.0版本的，于是只能继续降版本，直到css-loader 0.28.11版本的才没有继续报错，执行命令：

npm install --save-dev css-loader@0.28.11

43.css-loader只负责将css文件进行加载，不负责解析，也不负责将css中的东西放到html中生效，即将样式添加到DOM中，因此需要安装style-loader，它将模块导出作为样式添加到DOM中，执行以下命令报错，仍然是版本问题，继续降版本：

npm install --save-dev style-loader@1.0.0

在这里插入图片描述

执行以下命令，成功引入style-loader：

npm install --save-dev style-loader@0.15.0

44.在module关键字中rules属性的use属性中，使用多个loader时，是从右往左读的，所以应该是['style-loader', 'css-loader']，先用css-loader加载css文件，然后用style-loader将样式添加到DOM中。

45.要在项目中使用less文件，并且webpack可以打包，需要安装less-loader和less，前者负责加载less文件，后者负责将转化less文件，分别执行如下命令：

npm install --save-dev less-loader@5.0.0

npm install --save-dev less@3.9.0

46.每次修改要打包的文件后，都需要执行webpack命令或者执行命令npm run build重新打包项目。

47.为了可以打包图片文件，按照教程需要安装url-loader，但在Loaders目录下的File目录中没有对应的条目，在官网搜索url-loader发现移动到了别的地方，url-loader介绍，安装，刚开始安装的版本是1.0.0，然后运行发现背景图片无法加载，各种配置也没有问题，猜测是版本过低，所以执行命令npm uninstall --save-dev url-loader@1.0.01卸载该版本，执行命令npm install --save-dev url-loader@1.1.2安装1.1.2版本的，然后重启VScode，解决了问题。url-loader将图片转换成base64字符串格式。

48.对于webpack.config.js中module关键字中rule对应loader为url-loader的配置，如果图片为30KB，limit应该大于等于30×1024，才会用url-loader处理，否则只能用file-loader，因为无法将图片转换成base64格式字符串，执行命令npm install --save-dev file-loader@2.0.0，安装file-loader。

49.如果想将ES6的语法转换成ES5（因为有些浏览器不支持ES6的代码），就需要使用babel，在webpack中只需要安装对应的loader就行，执行命令安装babel-loader：

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

最后安装的babel-loader版本是7.1.5，babel-core版本是6.26.3，babel-preset-es2015版本是6.24.1。

50.执行命令npm install vue --save安装vue后在终端执行命令npm run build，但在js中import Vue from "vue"后运行代码时报错：

这是因为在构建最终的发布版本时，构建了以下两类版本，但当前使用的是runtime-only版本的：

runtime-only：代码中不能有任何template
runtime-compiler：代码中可以有template，因为有compiler可以用于编译template

应该在webpack.config.js的module.exports中添加以下配置：

...
resolve: {
    // 别名
    alias: {
      // 指定vue发布的版本是node_modules/vue/dist目录下的runtime-compiler发布版本：vue.esm.js
      "vue$": "vue/dist/vue.esm.js",
    },
  },
...

51.SPA(simple page webapplication)，vue常做的是单页面富应用，但多页面也可以，在SPA中一般只有一个html文件，而多个页面会通过vue router跳转（前端路由）。

52.如果要将data中的数据显示在界面中，就需要修改index.html，但一般在开发中不希望频繁修改，因此要在js文件定义的Vue对象中定义template属性，vue最后编译的时候会将其中的内容自动替换掉之前el属性挂载到的对应html文件中的div。

53.安装vue-loader（加载vue）和vue-template-compiler（编译vue），执行命令：

npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

从vue-loader 14.x版本开始会需要额外下载插件，所以执行命令npm uninstall --save-dev vue-loader@15.4.2，重新下载13版本的npm install --save-dev vue-loader@13，执行命令npm run build打包时报错，指明vue的版本是2.6.14，但vue-template-compiler的版本是2.5.21，版本不匹配，因为vue-loader版本大于等于10，所以升级一下vue-template-compiler即可，即执行命令npm update vue-template-compiler即可。

54.webpack中的plugin（插件，通常用于对某个架构进行扩展）是对webpack现有功能的各种扩展，比如打包优化、文件压缩等，使用过程：（1）通过npm安装相关插件（2）在webpack.config.js中的plugins中配置插件。

plugins: [
  new webpack.BannerPlugin("最终版权归×××所有")
]

56.将在项目根目录下的index.html文件打包到dist文件夹中，需要安装HtmlWebpackPlugin插件，它可以自动生成index.html文件（可以指定模板）、将打包的js文件自动通过script标签插入到body中。执行命令npm install html-webpack-plugin@3.2.0 --save-dev。在配置时，需要删除在ouput中添加的publicPath属性。

项目根目录下的index.html中不再引用打包后的dist文件夹中的js，将其作为模板生成dist文件夹中的index.html时，会自动在其中插入所有打包了的dist文件夹下的js文件。

57.在项目发布前需要对js等文件压缩（对js丑化，不能和BannerPlugin插件同时使用），需要使用插件uglifyjs-webpack-plugin，版本指定1.1.1，和CLI2一致，执行命令npm install uglifyjs-webpack-plugin@1.1.1 --save-dev。

58.webpack提供了一个可选的本地开发服务器，该服务器基于node.js搭建，内部使用express框架，需要通过执行命令npm install --save-dev webpack-dev-server@2.9.3安装。在配置文件中配置：

devServer: {
    contentBase: "./dist", // 为哪个文件夹提供本地服务，默认是根文件夹，但此处修改为根目录下的dist文件夹
    // port // 端口号，默认是8080
    inline: true // 页面实时更新
    // historyApiFallback // 在SPA页面中，依赖HTML5的history模式
  }

配置好后重启vscode，又因为是在局部安装的webpack-dev-server，所以不能在终端直接执行命令webpack，而是找到本地的，执行命令./node_modules/.bin/webpack-dev-server，或者和将webpack命令映射到npm run build一样，在package.json中添加一个脚本“dev”: “webpack-dev-server”。这样就能在本地测试代码，最后在执行命令npm run build将项目打包。如果想在启动服务器的同时自动打开浏览器，只需要添加“dev”: “webpack-dev-server”

59.开发阶段不建议用丑化的插件uglifyjs-webpack-plugin，发布（编译）阶段才需要。但开发阶段需要devServer，打包发布的阶段不需要。

60.如果开发或者编译（打包）的时候都需要一些配置，可以放到base.config.js文件中（根目录下）。

61.将webpack.config.js拆分为三个配置文件（06-webpack配置的分离），将开发时配置和生产（打包发布时）配置分离。

62.开发大型项目时需要使用Vue CLI(Command-Line Interface，俗称脚手架)，考虑代码目录结构、项目结构和部署、热加载、代码单元测试等，它是官方发布的vue.js项目脚手架，可以快速搭建Vue开发环境以及对应的webpack配置。

63.vue CLI使用前提是node（C++开发的，核心是V8引擎），全局安装vue cli3需要在终端执行命令npm install -g @vue/cli，但因为现在版本已经升到5.x了，所以需要指定版本，执行命令npm install -g @vue/cli@3.4.0（因为我的npm版本是8.1.4，不能安装vue/cli3.6.0版本，需要将npm升级到8.2以上，懒得升级了），然后vue --version发现找不到命令，参考链接，需要软链接一下，执行命令：

sudo ln -s /home/erin/nodev14/lib/node_modules/@vue/cli/bin/vue.js /usr/local/bin/vue

其中/home/erin/nodev14/lib/node_modules/@vue/cli/bin/vue.js是我自己安装的vue的路径，后者/usr/local/bin/vue是固定的。

如果安装了Vue CLI3版本，但想按照Vue CLI2的方式初始化项目，需要安装一个桥接工具npm install -g @vue/cli-init。

vue cli2初始化项目执行命令vue init webpack my-project。vue cli3初始化项目执行命令vue create my-project。

64.ES Lint可以帮助检查js代码中不规范的地方。e2e（end to end）测试安装Nightwatch，是一个利用selenium或webdriver或phantomjs等进行自动化测试的框架。

65.终端执行的node命令可以直接执行js文件。vue cli2创建的项目的static文件夹下的内容在用npm run build打包生产时会原封不动地copy到dist文件夹下。较规范化的项目会有.editconfig文件来规范代码。.eslintIgnore文件中存的是需要忽略代码检查的文件路径等。

erin sakura

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（三）

1.如果想通过双向绑定v-model绑定数据的时候，不要直接选择props属性中的数据，而是应该选择根据props中数据的值创建的data或者计算属性。2.组件的watch属性可以监听某个数据的改变，并且watch属性中定义的监听方法名称要和监听的数据名相同。3.当父组件要直接访问子组件或子组件要直接访问父组件或者子组件要访问根组件的时候，有两种方式：在父组件中访问子组件：使用children或者children或者children或者refs子组件访问父组件：使用$parent4.this.
复制链接

扫一扫