Skip to main content

· 2 min read

什么是npm​

一、npm是一个包管理工具,类似后端的 maven, gradle

首先，需要使用npm就得先安装nodejs，安装完成之后呢，nodejs是会自带 npm 的。

  • npm 安装的依赖都会下载到 node_modules目录下面

如果创建package.json?​

初始化一个package.json

npm init -y   npm init --yes 
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "hello": "hello world"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

package.json 这是一个json文件，用来管理这些包的版本和一些依赖关系，当项目中缺少 node_modules目录时，执行 npm install 或 npm i 这些 依赖就会一个一个的下载下来

script 中定义的 命令 可以通过以下方法来运行

npm run hello

配置默认的 package.json​

npm set init.license 'MIT'
npm set init.author 'xxx'
...

安装 - 卸载 - 更新​

#以下两种方式均可安装
npm i vue   
npm install vue #安装一个依赖，这个命令能直接把包下载下来，放在node_modules目录下

#指定版本安装
npm i jquery@3.0.0

#安装开发版本
npm i --save-dev vue #这种安装方式将只会在开发环境中用到，生成环境不会

#卸载依赖
npm uninstall vue 

#如果需要从package.json中删除依赖，需要加上 --save参数
npm uninstall --save lodash

#更新依赖
npm update vue

npm 自身升级​

npm install npm@latest -g

· 2 min read

1. 子组件往父组件传值​

  • 定义一个 中间传输者用来传输数据
  //main.js
  
  /*定义全局传送者，用来子组件往父组件传值*/
  Vue.prototype.$vm = new Vue();
  • 子组件定义方法
// methods中定义方法
closeSlideBar() {
  /* closeSlideBar: 是一个事件名，子组件
   * 定义了啥，父组件接受的时候就写啥
   * false: 这是需要传递的值
   */
  this.$vm.$emit("closeSlideBar", false);
  console.log("传值方法被调用");
}
  • 在父组件中接受
// 需要在钩子函数中定义 mounted
mounted() {
    //  closeSlideBar: 是子组件中定义的时间名
    // val: 子组件传递过来的值
    this.$vm.$on("closeSlideBar", (val) => {
        console.log('父组件接收到值');
        this.show = val;
    })
}

2. 父组件往子组件传值​

  • 在子组件中定义 props
export default {
    name: "RecordList",
    data() {
        return {
        }
    },
    // 父组件传递过来的值
    props: ['type']
}
  • 在父组件调用的时候传递
<!--此处的type就是在子组件 props 中接收的名字-->
<RecordList type="In"/>