随手记

xian
196 阅读8分钟

image.png

运行 npm install jquery –S 命令，强制将jquery包放在dependencies节点下，当然省略-S,也会安装在同样的节点下,-s是--save的简写

  "dependencies": {
    "jquery": "^3.6.0"
  }

npm install webpack@5.42.1 webpack-cli@4.7.2 -D, -D安装在devDependencies节点下，

-D是--save--dev的简写

  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }
  • 在没有node_modules文件下，npm i

参考package.json中包的版本，然后根据语义化版本更新机制，去下载合适的新版本

  • onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, <textarea>)

onchange 事件也可用于单选框与复选框改变后触发的事件。

  • vue-cli

image.png

  • :root

image.png

  • views

views 代表视图文件夹，因为对 Vue 框架本身来说每一个单文件都是一个自定义组件，所以我们会人为的用关键字来区分那个组件是在路由中作为视图容器存在的，哪个组件是页面绘制过程中拆分出来的视图部分内容组件，或者是功能组件，这些通过开发过程中人为定义的组件一般会放到 components 文件夹中，这个是开发中通过业务和经验总结的一个结果并不是一个框架的规则

  • token(登录令牌)
  1. 客户端使用用户名跟密码请求登录
  2. 服务端收到请求，去验证用户名与密码
  3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
  4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 LocalStorage 里，客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
  5. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
  6. web/APP登录的时候发送加密的用户名和密码到服务器，服务器验证用户名和密码，如果成功，以某种方式比如随机生成32位的字符串作为token，存储到服务器中，并返回 token 到web/APP，以后web/APP请求时凡是需要验证的地方都要带上该 token，然后服务器端验证 token，成功返回所需要的结果，失败返回错误信息，让他重新登录。其中服务器上 token 设置一个有效期，每次web/APP请求的时候都验证token 和有效期

export和export default的区别

  • export 导出时只能导出变量 , 并且引入时需要解构对应变量获取 , 可以导出任意类型内容
  • export 和 export default 都可用于导出常量、函数、文件、模块等 ，
  • 你可以在其它文件或模块中通过 import 将其导入，以便能够对其进行使用
  • 在一个文件或模块中，export、import可以有多个，export default仅有一个
  • 通过export方式导出，在导入时要加{ }，且不能自定义名字，export default不用加{ }，且可以自定义名字

module.exports，exports，require和export，export default，import的区别与联系

一、基本概念

（1）module.exports和exports是属于CommonJS模块规范，而export和export default是属于ES6语法，同样import和require分别属于ES6和CommonJS的导入方法。

（2）module.exports和exports、export和export default都是导出模块，import和require则是导入模块。module.exports导出对应require导入，export导出对应import导入。

二、module.exports和exports的区别与联系

（1）Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

（2）CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

一. yarn 换源

1. 全局修改，安装淘宝镜像

yarn config set registry https://registry.npm.taobao.org

2. 使用第三方软件快速修改、切换yarn镜像源yrm（YARN registry manager） 不仅可以快速切换镜像源，还可以测试自己网络访问不同源的速度

安装 yrm

npm install -g yrm

列出当前可用的所有镜像源

yrm ls

// npm -----  https://registry.npmjs.org/

// cnpm ----  http://r.cnpmjs.org/

// taobao --  https://registry.npm.taobao.org/

// nj ------  https://registry.nodejitsu.com/

// rednpm -- http://registry.mirror.cqupt.edu.cn

// skimdb -- https://skimdb.npmjs.com/registry

// yarn ----  https://registry.yarnpkg.com

使用淘宝镜像源

yrm use taobao

测试访问速度

yrm test taobao

二. yarn 命令

1. 版本查看

yarn -v

2. 建立新工程

yarn init 初始化项目，生成 package.json 文件（需要手动选择配置）

3. 添加依赖包

通过 yarn add 添加依赖会更新 package.json以及 yarn.lock 文件

### 开发环境
`yarn add <PackageName>`  #依赖会记录在 package.json 的 dependencies 下 开发环境

### 生产环境
`yarn add <packageName> --dev` #依赖会记录在 package.json 的 devDependencies 下 生产环境

4. 移除依赖包

yarn remove <PackageName>

5. 安装全局依赖包

yarn global add <PackageName>

6. 更新依赖包

`yarn upgrade`               # 升级所有依赖项，不记录在package.json中
`yarn upgrade <PackageName>` # 升级指定包
`yarn upgrade --latest`      # 忽略版本规则，升级到最新版本，并且更新 package.json

7. 安装package.json中的所有文件

`yarn install` # 或者`yarn`在node_modules目录安装package.json中列出的所有依赖
`yarn install --force `# 强制下载安装 如果 node_modules 中有相应的包则不会重新下载 --force 可以强制重新下载安装

8. 运行脚本

yarn run 或者 yarn 用来执行在 package.json 中 scripts 属性下定义的脚本

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  `yarn serve `

Esllint 配置文件，常添加的命令

// 函数形参与() 是否有空格
'space-before-function-paren': [
      'error',
      {
        anonymous: 'always',
        named: 'never',
        asyncArrow: 'never'
      }
    ],
    // 关闭组件命名为多个单词的规则
    'vue/multi-word-component-names': 'off'
    // 关闭eslint驼峰式校验
    camelcase: 0
    // 表达式？
   'no-unused-expressions':'off'

Vue的三种样式化方法：

  1. 外部CSS文件。
  2. 单个文件组件（.vue文件）中的全局样式。
  3. 单个文件组件中组件范围的样式。

在src内的 main.js 内导入该css，这个情况下是全局生效的

import './assets/reset.css';

向单个文件组件添加全局样式

任意.vue文件中

单个组件内部的样式

在组件底部

<style scoped>
</style>

使用@符号，实现定位在src目录下

    `在 vue3+vite+ts的config.js 下输入以下代码`
    import path from 'path'
    resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }

在项目根目录下创建 .prettierrc 配置文件，初始化(解决eslint单引号、双引号、分号、空格的报错警告问题)

    {
    // 取消分号
  "semi": false,
   // 使用单引号替换双引号
  "singleQuote": true,
   // 末尾禁止添加逗号 
  "trailingComma": "none"
}

在vue3.0 中，不兼容当前vue的调试工具，vue.js devtools

vue中使用鼠标事件@mousedown、@mouseenter等失效的解决办法

此时应该在@mouseenter、@mouseenter等鼠标事件加上native

例如：<button @mouseenter.native="handler"></button>

width:auto ;块级元素默认的宽度值，意味着浏览器会自己选择一个合适的宽度值。

解决 element-ui container 组件 高度不占满屏幕的问题

当然也可以直接全局引入样式，在 src --> assets-->less 中新建less文件

    html, body, #app, .el-container { /*统一设置高度为100%*/ height: 100%; }
    // viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh 
    // Viewport高度， 1vh 等于viewport高的的1%
    .l-container {
      // 这是 el-container 最外层的 盒子
      // 设置 100vh 占满屏幕高度
      height: 100vh;
}

Promise.reject()

  • reject()可直接返回Promise失败对象
    const promise = Promise.reject("rejected message")
// 相当于
// const promise2 = new Promsie((resolve, reject) => {
//   reject("rejected message")
// })
    
注意: 无论传入什么值都是一样的  
都是捕获错误信息

computed 补充

  // 在vue中，computed的属性可以被视为是data一样，可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值)
  // 一般情况下，是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值。所以，computed默认格式（是不表明getter函数的）

  computed: {
    // 计算属性的getter(默认)
    // double2(){
    // get(){
    // return this.num*2
    // }

    double1() {
      // 简写了
      return this.num * 2
    },
    double2: {
      // getter
      get() {
        // gettter
        return this.num * 2
      },
      // setter
      set(val) {
        this.num = val / 2
      }
    }
  },
  created() {
    // 当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候。
    this.double2 = '99'
  }

vue 父子组件传对象默认值default

     props: {
    // prop 类型和默认值
    list: {
      type: Array,
      // Object/Array类型不能直接定义空对象或空数组，必须使用 工厂函数 return 回一个默认值。
      // default:[] 这种会出错
      default() {
        return []
      }
    }

Es6 简写规则

    var name = 'tom'

    var age = 11

    //es5定义对象

    var obj = {

        name:name,

        age:age,

        getName:function(){

            return this.name

        }

    }

    //es6定义对象可以简写

    const obj1={

        name,//当对象属性名可外面的变量名一致时候可以这样简写

        age,

        getName(){//定义方法时可以省略掉function关键字

            return this.name

        }

    }
    

    let ms = {}

    function getItem (key) {
      return key in ms ? ms[key] : null
    }

    function setItem (key, value) {
      ms[key] = value
    }

    function clear () {
      ms = {}
    }

    module.exports = { getItem, setItem, clear }
    // 等同于
    module.exports = {
      getItem: getItem,
      setItem: setItem,
      clear: clear
    }

webpack 中 package.json

     "scripts": {
    // wepack serve 代表执行 webpack devServer --cofig[path] 要指定配置文件的路径
    // --mode development 指定模式为开发环境
    "serve": "webpack serve --mode development --config webpack.config.js"
    "build": "webpack --config webpack.config.js"
   // 第二种
   // --env 参数，可以允许你传入任意数量的环境变量
    "build": "webpack --config ./config/webpack.config.js --env production"
     }
avatar
文章
阅读
粉丝