昔洛 的个人博客

Bug不空，誓不成佛

  menu
70 文章
14633 浏览
4 当前访客
ღゝ◡╹)ノ❤️
/      

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'
内事不懂问百度，外事不懂问谷歌~