vue学习笔记02

内容太多了已经开始忘了OTZ

目录

3.模块化开发

commonJS的导入导出

ES6中导出导入

4.webpack(可以不看)

webpack安装

基本使用

配置

loader

使用css依赖

使用less文件处理

图片处理

ES6语法处理

webpack配置vue

.vue文件处理

plugin

5.脚手架cli

runtimeonly和compiler的区别

初始化cli2项目

关闭ESlint

初始化cli3项目

如何修改配置（3种方法）

6.vue-router

vue-router使用

使用history方式来更改路由信息

router-link属性

使用方式2-$router

动态路由（值传递）

在地址中传值

在组件中获取数据

路由的懒加载

重构上述练习代码：

vue-router嵌套路由

vue-router参数传递

vue-router导航守卫

改变网页的标题案例（使用前置钩子）

路由独享守卫

组件内守卫

keep-alive

路径别名

7.axios网络模块封装

axios拦截器

0.ES6语法补充

1.箭头函数

Promise

Vuex（就是全局单例模式）

使用案例

修改mutations

核心概念

响应式原理

mutations-常量类型

action使用详情

---

 

3.模块化开发

使用模块作为出口，基本原理如下

 

常见的模块化规范：CommonJS,AMD,CMD，ES6的Modules

commonJS的导入导出

  

ES6中导出导入

 

这个地方可以写变量和方法

 

导出函数和变量的方式2，还可以导出类

  

如果要导入所有内容，使用*

  

默认导处-用户给导处的对象命名，有且只有一个才行

 

4.webpack(可以不看)

是一个现代的javscript应用静态模块打包工具。把一些浏览器无法识别的内容转换成可以识别的内容

 

webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖           

webpack安装

依赖于node

 

基本使用

 

配置

控制台中：npm init，会自动生成package,json文件。有了这个文件如果我们之后再使用node中的一些包的时候，使用npm install就会自动安装相关依赖（推荐一开始就直接建好这个）

 

然后配置config

 

控制台中直接使用webpack命令就行（注意高版本需要配置config否则会报错，虽然也会有文件出阿里）

或者使用npm run build

  

如果我们需要指定npm run XXX我们可以在package中配置

 

这样我们写npm run build 就会对应webpack命令，且程序会优先在配制中找

安装项目的webpack依赖

 

loader

 

使用css依赖

需要依赖才能打包

 

 

 

配置

 

使用less文件处理

www.webpackjs.com

  

 

图片处理

 

当文件大于这个limit的时候，会需要file.loader

 

直接安装即可

  

修改图片名称

  

ES6语法处理

 

 

webpack配置vue

  

默认通过mode_modules导入

有可能会出现如下问题

 

 

出现上述问题我们只需要在webpack中配置下述即可

 

.vue文件处理

 

 

plugin