npm、webpack、vue学习

---

前言

学习npm的基础命令、webpack的结构及vue的常用模块

本次涉及到的vue是vue2的内容，相关的vuerouter、vuex等内容也会尽量包含其中，更多内容请参考官方文档。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、npm

1.npm相关概念

JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具。通过 NPM 可以安装、共享、分发代码,管理项目依赖关系

即前端maven工具, node.js有集成，不用单独下载

• 可从NPM服务器下载别人编写的第三方包到本地使用。
• 可从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 可将自己编写的包或命令行程序上传到NPM服务器供别人使用

2.package.json结构

{
  "name": "npm-demo", //包名，不能大写
  "version": "1.0.0", //版本号
  "description": "first npm demo", // 描述
  "main": "index.js", //程序的主入口文件 index.js
  "scripts": { // 脚本命令组成的对象, 如果 test 测试环境，dev 开发环境， prod 生产环
境
    "test": "echo \"Error: no test specified\" && exit 1"
 },
  "author": "",
  "license": "ISC" //许可证 默认即可
  "denpendencies":{   //项目相关依赖
  }
}

3.npm相关指令

• npm init
  到要创建项目的文件夹下在cmd命令行中使用，其中keywords是便于被搜索的关键字
package.json在此时生成，相当于maven的pom.xml文件

• npm install
  分本地安装，和全局安装
本地安装，会在项目里生成文件
缺省生产环境，- D 开发环境
  node_modules 文件夹用于存放下载的js库（相当于maven的本地仓库）
  package-lock.json 是在 npm install 时候生成一份文件。
  用以记录当前状态下实际安装的各个包的具体来源和版本号。
  @指定版本号 latest是最新版本，一般规则是大版本.次版本.小版本

• npm root
  npm root -g 查看全局目录位置,全局安装的插件会放置这里，项目尽量用本地安装，防止版本不一样

• npm list
  查看本地安装的模块，

• npm view
  查看模块远程版本

• npm uninstall

• npm get registry
  查看当前镜像

• npm config set XXX
  设置配置，如镜像registry 代理proxy 全局仓库位置prefix 等

二、webpack

1.webpack用途及概念

代码如下（示例）：

2.webpack基础指令

3.webpack

三、vue

1.vue概念

• vue 和vue-cli区别
  

• 基于mvvm的渐进式框架

• 什么是MVVM模型
  

2.vue简单语法

• 绑定渲染 单向绑定
  插值表达式{{}} 获取数据，可以使用JS
一次性插值 v-once
v-html 输出html语句，防止XSS注入script时候记得\转移
元素绑定指令 v-blind
事件绑定指令--事件处理方法@click等 事件修饰符@click.stop等 按键修饰符@keyup.enter等

3.vue复杂内容

计算属性

计算属性会进行 缓存 ，只有响应式依赖发生改变时才会重新求值，函数体每次都会执行函数体进行计算
默认是getter函数，实现双向绑定要实现setter函数，参数是newValue

监听器

属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算
watch 选项 或者 vm 实例的 $watch() 来监听指定的属性
子组件实现和父组件的双向绑定可利用监听器实现

过滤器

过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示
全局过滤器

Vue.filter(过滤器名称, function (value1[,value2,...] ) {
 // 数据处理逻辑
})

局部过滤器

new Vue({
 filters: {
   过滤器名称: function (value1[,value2,...] ) {
  }
 }
})

指令

内置指令外，Vue 也允许注册自定义指令。有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候使 用自定义指令更为方
全局指令

// 指令名不要带 v-
Vue.directive('指令名', {
 // el 代表使用了此指令的那个 DOM 元素
 // binding 可获取使用了此指令的绑定值 等
 inserted: function (el, binding) {
   // 逻辑代码
}
})

局布指令

directives : {
  '指令名' : { // 指令名不要带 v-
    inserted (el, binding) {
      // 逻辑代码
   }
 }
}

自定义插件

• 概念
  插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等
Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能
全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成
• 使用
  全局方法 ------Vue.方法名字 调用Vue.方法名
实例方法------Vue.prototype.方法名字 调用使用vue实例名字.$方法名

组件

• 概念
  Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接 到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率

• 优缺点
  Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接 到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率

• 全局注册
  

• 局部注册
  

组件通信

• props通信
  父组件向子组件传递数据、包括函数
• $emit 自定义事件
  子组件向父组件传递数据
注意子组件通知的方法名是父组件中自定义事件的名字
• slot分发插槽
  父组件向子组件传递 数据+标签 以name为唯一区别
• 监听器双向绑定

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。