目录
vue-cli
1、基于 vue ui 创建 vue 项目
组件库
1.vue 组件库
2.vue 组件库和 bootstrap 的区别
3. 最常用的 vue 组件库
4. Element UI
axios 拦截器
1. 回顾：在 vue3 的项目中全局配置 axios
2. 在 vue2 的项目中全局配置 axios
3、拦截器
4. 配置请求拦截器
5、配置响应拦截器
proxy 跨域代理
1. 回顾：接口的跨域问题
2. 通过代理解决接口的跨域问题
3. 在项目中配置 proxy 代理
vue-cli
vue-cli 提供了创建项目的两种方式：
vue create 项目名称
vue ui
1、基于 vue ui 创建 vue 项目
步骤1：在终端下运行 vue ui 命令，自动在浏览器中打开创建项目的可视化面板：
步骤2：在详情页面填写项目名称：
步骤3：在预设页面选择手动配置项目：
步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）：
步骤5：在配置页面勾选 vue 的版本和需要的预处理器：
步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：
步骤7：创建项目并自动安装依赖包：
vue ui 的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目：
版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同！
组件库
1.vue 组件库
2.vue 组件库和 bootstrap 的区别
- bootstrap 只提供了纯粹的原材料（ css 样式、HTML 结构以及 JS 特效），需要由开发者做进一步的组装和改造
- vue 组件库是遵循 vue 语法、高度定制的现成组件，开箱即用
3. 最常用的 vue 组件库
① PC 端
- Element UI（https://element.eleme.cn/#/zh-CN）
- View UI（http://v1.iviewui.com/）
② 移动端
- Mint UI（http://mint-ui.github.io/#!/zh-cn）
- Vant（https://vant-contrib.gitee.io/vant/#/zh-CN/）
4. Element UI
- vue2 的项目使用旧版的 Element UI（https://element.eleme.cn/#/zh-CN）
- vue3 的项目使用新版的 Element Plus（https://element-plus.gitee.io/#/zh-CN）
1、在 vue2 的项目中安装 element-ui
运行如下的终端命令：
npm i element-ui -S- 完整引入：操作简单，但是会额外引入一些用不到的组件，导致项目体积过大
- 按需引入：操作相对复杂一些，但是只会引入用到的组件，能起到优化项目体积的目的
3、完整引入
在 main.js 中写入以下内容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)npm i babel-plugin-component -D{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/import Vue from 'vue'
// 完整引入 Element UI
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
// 按需导入
import { Button, Input } from 'element-ui'
Vue.config.productionTip = false
Vue.use(Button)
Vue.use(Input)
//在mian.js中导入
import './element-ui'axios 拦截器
1. 回顾：在 vue3 的项目中全局配置 axios
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios
import axios from 'axios'
axios.defaults.baseURL = '请求根路径'
app.config.globalProperties.$http = axios2. 在 vue2 的项目中全局配置 axios
需要在 main.js 入口文件中，通过 Vue 构造函数的 prototype 原型对象全局配置 axios：
import axios from 'axios'
//全局配置
axios.defaults.baseURL = '请求根路径'
Vue.prototype.axios = axios3、拦截器
拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。
4. 配置请求拦截器
通过 axios.interceptors.request.use(成功的回调, 失败的回调) 可以配置请求拦截器：注意：失败的回调函数可以被省略！
请求拦截器 – Token 认证
// 配置请求拦截器
axios.interceptors.request.use(config => {
// 配置 Token 认证
config.headers.Authorization = 'Bearer xxx'
console.log(config)
// 这是固定写法
return config
})import { Loading } from 'element-ui'
/ 配置请求拦截器
let loadingInstance = null
axios.interceptors.request.use(config => {
// 展示 loading 效果
loadingInstance = Loading.service({ fullscreen: true })
// 配置 Token 认证
config.headers.Authorization = 'Bearer xxx'
console.log(config)
// 这是固定写法
return config
})5、配置响应拦截器
通过 axios.interceptors.response.use(成功的回调, 失败的回调) 可以配置响应拦截器。
响应拦截器 – 关闭 Loading 效果
调用 Loading 实例提供的 close() 方法即可关闭 Loading 效果
// 配置响应拦截器
axios.interceptors.response.use(response => {
// 关闭 loading 效果
loadingInstance.close()
return response
})proxy 跨域代理
1. 回顾：接口的跨域问题
2. 通过代理解决接口的跨域问题
通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决： 文章来源：https://www.toymoban.com/news/detail-614226.html
3. 在项目中配置 proxy 代理
步骤1，在 main.js 入口文件中，把 axios 的请求根路径改造为当前 web 项目的根路径文章来源地址https://www.toymoban.com/news/detail-614226.html
// 配置请求根路径
// axios.defaults.baseURL = 'https://url地址'
axios.defaults.baseURL = 'http://localhost:8080'module.exports = {
devServer: {
proxy: 'https://url地址',
},
}
到了这里，关于VUE3 ---＞组件化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
