昔洛 的个人博客 昔洛 的个人博客

Bug不空,誓不成佛

目录
Vue 框架学习(二)
/      

Vue 框架学习(二)

学习内容

  • axios 的更多使用
  • vue 组件
  • yarn 工具的使用
  • vue-cli 脚手架
  • ES6 模块化

axios 的更多使用

axios 可以发送各种请求

axios.get(url,{params:{...}})
axios.post(url,{})

get()方法如果传递参数需要额外设置 params,post() 方法则不用,axios请求返回后是一个 promise 对象。

axios 拦截器

axios 拦截器有请求拦截,响应拦截,如下图所示

24444.png

  • 请求拦截器:
    • axios每次开始请求的时候先执行此处逻辑,在这个地方可以给axios做出发前的配置,也可以做出发前的检查工作,检查ok的情况下就开始向服务器端发请求
    	// 请求拦截器
    	axios.interceptors.request.use(function (config) {
    
    	  // 放置业务逻辑代码
    	  return config;
    	}, function (error) {
    	  // axios发生错误的处理
    	  return Promise.reject(error);
    	});
    
  • 响应拦截器:
    • axios完成与服务器端交互回到客户端后就执行此处逻辑,在这个地方可以做一些后续收尾事宜,例如判断axios请求是否成功,或相关数据过滤操作
    	// 响应拦截器
    	axios.interceptors.response.use(function (response) {
    
    	  // 放置业务逻辑代码
    	  // response是服务器端返回来的数据信息,与Promise获得数据一致
    	  return response;
    	}, function (error) {
    	  // axios请求服务器端发生错误的处理
    	  return Promise.reject(error);
    	});
    
  • 关键字:interceptors

vue-组件

  • 组件是拥有一定功能许多 html 标签的集合体
    461.png
  • 好处是模板中为了实现一个复杂效果,需要绘制非常多的标签,使用组件时,相同功能只用绘制一个组件标签就可完成,提高开发速度。
  • 知名第三方组件库(饿了么):
  • 知名第三方移动端组件库(Vant):
  • 关键字:components、component

私有组件

  • 声明私有组件:
    	new Vue({
    		components:{
    			'组件的名称': {配置对象成员},
    			'组件的名称': {配置对象成员},
    		},
    	})
    	// 例如
    	components:{
    		'my-page':{
    			template:`
    			<ul>
    	        	<li>上一页</li>
    
    		        <li>[1]</li>
    		        <li>2</li>
    		        <li>[3]</li>
    		        <li>下一页</li>
    		      </ul>`,
    		}
    	}
    
  • 注意:
    • template 是组件的成员之一,还有其他成员
    • template 设置的各个 html 标签需要有唯一的根元素节点,上例为 ul
    • 组件名称建议是 xx-yy 的格式
  • 使用组件:
    • <组件名称></组件名称>
    • 组件形式上就是 html 标签
  • 相关成员:可以认为组件是特殊的 Vue实例,拥有着与 Vue 实例大致相同的成员,如 data、methods、filters、directives、created等。
    • 注意:组件 data 成员与 vue 实例的不一样,需要通过 function/return 返回一个 {}对象使用,原因是保证组件的属性独立,不会相互影响。

全局组件

  • 使用全局组件:
Vue.component(名称,{配置对象成员})
new Vue()
// 全局组件需要在 new Vue 之前设置

yarn 工具的使用

Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的
与 npm 的区别:yarn安装更快,会同时安装多个,而npm按照队列一个一个顺序去安装,必须等到当前的package安装完毕后才能去安装下一个

  • 安装
    npm install -g yarn
  • 配置镜像源:
    	yarn  add  依赖包  	==================  npm install  依赖包
    	yarn remove 依赖包 	=================  npm uninstall  依赖包
    
    	yarn               	==================  npm  i       // 安装全部依赖包
    	yarn -y init       	==================  npm -y init  // 创建package.json文件
    	yarn add global 依赖包 ================  npm i -g 依赖包  // 全局方式装包
    

    yarn 较比 npm装包更快,界面体验更好(安装进度条提示)

  • 注意:
    • yarn 安装完毕后要配置镜像源为 taobao,否则优势发挥不出来
    • yarn 全局方式装包要设置 global 关键字,而 npm 是 -g

VueCLI 脚手架

VueCLI 把许多项目通用的依赖包(vue、webpack、路由、vuex、less编译器等等) 和 通用的配置都给做好安装好,使得开发者全部的注意力都集中在业务层面,明显提升开发效率的,真实项目都要使用脚手架开发。

介绍

  • 安装 vuecli:
    npm i -g @vue/cli // 使用该方式安装

上述依赖包通过全局方式安装,完毕后在系统任何目录都会执行名称为"vue"的一个指令。
依赖包安装完毕,会形成在C:\Users\ssh\AppData\Roaming\npm\node_modules@vue\cli 目录.
vue --version 查看脚手架版本,现在默认是4.0.5版本(如果是2.9.6就是错误的,需要卸载重新安装)。

  • vuecli 创建项目:vue create 项目名称
  • 注意:
    • npm全局方式安装依赖包关键字是-g,而yarn全局装包关键字为global
    • vuecli创建新项目时,项目名称需要是一个新目录,完毕后会自动生产之,并在其中生成项目需要的文件
    • 项目(01-pro)上级各个目录名字最好为英文数字中横线 不要设置 中文的

创建项目的图示

1561622952268.png
1565964186423.png1561623170607.png1561623274446.png1563505874818.png1561623412365.png1561623482895.png
1561623586580.png1566010958700.png1561623689667.png

  • 当再次创建项目时,就可以选取之前配置好的项目,一次性完成项目的创建,不用再详细选取配置
    1561623755361.png
    其中,上面的 20190628 具体配置如下所示,可以直接删除
    1561692040822.png
    创建完毕后的结构如下:1561623844071.png
  • 注意:c:/用户/ssh/.vuerc 文件被删除的效果
    • 创建项目选取配置的小项目被清除了
    • 项目创建过程中会提示要求选取 yarn 或 npm 方式下载包
    • 创建项目过程中需要安装许多依赖包,建议通过yarn方式安装,如果不是,可以删除 “ c:\用户\用户名.vuerc ” 文件后再重新执行 "vue create xxx"命令,此时会提示选取
  • 结构文件说明
|-- node_modules		// 项目需要的依赖包
|-- public				// 静态资源存储目录
|   |-- index.html		// 项目主容器文件
|   |-- favicon.ico		// 项目默认索引图片
|-- src
|   |-- assets			// 放置一些静态资源文件,例如图片、图标、字体 
|   |-- components		// 公共组件目录
|   |-- views			// 业务组件目录
|   |-- App.vue			// 顶层根基路由组件
|   |-- main.js			// 项目主入口文件(包括Vue实例也在这)
|-- .editorconfig			// 代码规范配置文件
|-- .eslintrc.js			// eslint代码规范检查配置文件
|-- .gitignore			// git上传需要忽略的文件格式
|-- babel.config.js		// babel配置文件
|-- yarn.lock			// 依赖包版本锁定文件
|-- package.json			// 项目基本信息配置文件
|-- postcss.config.js		// css预处理器配置文件
|-- vue.config.js			// webpack 配置文件(与webpack.config.js作用一致)
  • 注意:
    • public/index.html文件是div容器所在文件
    • src/main.js是Vue实例所在文件

项目运行步骤

  • 修改 src/main.js 文件为如下内容

    	// import Vue from 'vue' // Vue实例有render可以使用的
    	import Vue from 'vue/dist/vue.common.js' // Vue实例 没有 render时候可以使用的
    
    	// import App from './App.vue'
    
    
    	Vue.config.productionTip = false
    
    	new Vue({
    	  data:{
    	    msg:'项目已经运行了'
    	  }
    	  // render: h => h(App)
    	}).$mount('#app')
    
  • 修改 public/index.html 文件,使用 Vue 实例的 data 数据

    	<div id="app">
    	      {{ msg }}
    	</div>
    
  • 修改 vue.config.js 文件内容如下

    	module.exports = {
    	  lintOnSave: false,
    	  devServer:{
    	    open:true, // 项目运行自动开启浏览器
    	    port:16699 // 给项目运行创建web服务的端口号码(1~65535之间)
    	  }
    	}
    

    当前项目运行的时候会创建一个http服务,上述16699就是服务器的端口号码,
    open:true 项目运行的时候,会自动打开浏览器并呈现效果

  • 在终端中执行命令 npm run serve
    serve:指令标志是package.json文件配置好了

ES6 模块化

项目中一些程序代码经常被其他业务场景使用,为了避免重复开发,就把这些代码设置为共享模式,共享模式就是模块化。像jquery、axios、vue等等都是模块化的体现,需要的时候直接拿过来用即可

1566000527767.png

介绍

  • 常用模块化技术有:CommonJS(nodejs)、ES6 模块化、AMD、CMD 等
  • CommonJS:CommonJS 模块化是 2009 年发布的,是民间出品,相对不正规,可以在 nodejs 中应用
// 导出
module.exports = 对象
// 导入
var obj = require(模块文件)
  • ES6 模块化:ES6模块化 是2015年官方正式出品的,已经被纳入到JavaScript标准里边,也是js未来的标准,由于各种原因 nodejs和浏览器中现在还不能直接使用ES6模块化,要相信未来可以
  • AMD 模块化:Asynchronous Module Definition 异步模块定义 2009 年诞生,可以实现浏览器中应用模块化技术
  • CMD 模块化:Common Module Definition 通用模块定义,2011年诞生,阿里公司出品,可以实现浏览器中应用模块化技术
  • 各个模块化应用的场合:
    • commonjs模块化可以应用在nodejs中,浏览器中不可以
    • es6模块化暂时还不能在nodejs 和 浏览器 中使用,但是要相信,未来可以
    • 浏览器中可以运行的模块化名称为 AMD 和 CMD
    • AMD、CMD、Commonjs、ES6模块化介绍

默认导出和导入

  • 数据提供者称为导出
  • 数据使用者称为导入
  • 在一个 js 文件中,通过一个对象把全部的数据导出出去,就是默认导出
  • 对默认导出的成员进行接收就是默认导入
  • 模块:一个js文件就是一个模块,前提是该文件有做导出动作
  • 导出导入语法:
    	// 导出
    	export default 对象
    	// 导入
    	import 名称 from 模块文件名字
    
  • 注意:
    • 一个模块中默认导出只能进行一次
    • es6 模块化现在只可以在 VueCli 项目中使用
  • 实例
    	// 默认导出
    	const a = 10
    
    	const b = 20
    	var cat = {name:'kitty',age:4}
    	export default cat  // 与 module.exports = cat 相当
    
    	// main.js 导入
    	// import  对象  from  '模块'
    	import obj from './modules/01-默认导出.js'
    	console.log(obj)
    

按需导出和导入

  • 导出语法:
    	export const  a = 10		// 常量
    	export function ab(){}  // 函数
    
    	export const  b = 20
    	export const cat = {name:'kitty',age:5} // 对象
    	...
    

注意:一般按需只做常量、函数导出,var/let变量不导出,本身没有意义

  • 导入语法:
    	import {xx,yy,zz} from 模块文件
    	import {xx as kk,yy as mm,zz as qq} from 模块文件
    
  • 注意:
    • xx,yy,zz代表被导入的成员名称,与导出的要求一致
    • 成员不用全部都导入,根据需要,导入 1个或多个或全部 都可以
    • 如果导入进来的成员名称 与 当前环境名称 有冲突,可以设置别名,使用关键字as

默认和按需同时导出和导入

  • 导出语法:
    	export const  a = 10    // 按需导出
    	export function ab(){}  // 按需导出
    	export default  对象/{}  // 默认导出
    	export const  b = 20
    	export function abc(){}
    
  • 注意:
    • 一个模块只能默认导出一次,按需导入可以设置多次
    • 默认导出的语句没有前后顺序要求
  • 导入语法:
    	// 1) 分别导入
    	import 名称  from  模块
    	import  {xx,yy}  from  模块
    
    	// 2) 一并导入
    	import 名称,{xx,yy} from 模块
    
  • 注意:一并导入必须是 默认在“前”,按需在“后”

没有导出应用

项目开发时有的文件没有做导出动作(例如 css、less),这样文件可以称为为 非模块文件,那么可以通过如下方式做导入

import 文件路径名

  • 使用案例:
// 没有导出
for(var i=0; i<5; i++){
  console.log(i)
}

// 4) 没有导出的导入
// import '模块'
import './modules/any.js'
内事不懂问百度,外事不懂问谷歌~
歌名 - 歌手
0:00