一、vue-cli的安装和使用
vue-cli是vue官方提供的、快速生成vue工程化项目的工具
vue-cli官网 https://cli.vuejs.org/zh/
特点
- 开箱即用
- 基于webpack
- 功能丰富且易于扩展
- 支持创建vue2和vue3的项目
安装vue-cli
开始右键打开PowerShell窗口，运行命令
npm install -g @vue/cli
# OR
yarn global add @vue/cli安装完毕后可运行如下命令检查是否安装成功
vue --version安装成功会提示对应的版本号
创建vue-cli项目
vue提供了如下创建项目的两种方式
#基于命令行方式创建
vue create my-project
# OR
#基于可视化面板创建
vue ui1、基于vue ui
在终端运行vue ui，自动在浏览器中打开创建项目的可视化面板
选择“创建”tab页，点击“在此创建新项目”按钮
在详情页填写项目名称，点击下一步
在预设页面中选择手动配置项目，点击下一步
在功能页面中勾选需要安装的功能（Choose Vue Version 、Babel、CSS预处理器、使用配置文件），点击下一步
在配置页面勾选vue版本和需要的预处理器
将刚才所有的配置保存为预设模板，方便下一次创建项目时直接复用之前的配置
项目创建完成后，自动进入项目仪表盘，可进行安装依赖、安装插件等操作
2、基于命令行创建vue
在终端下运行vue create my-project命令
选择预设
选择要安装的功能（*为已经选中，空格可切换选中状态）
使用上下箭头选择vue版本，回车确定
使用上下箭头选择要使用的CSS预处理器，回车确定
使用上下箭头选择如何存储插件的配置信息，回车
选择是否将刚才的配置保存为预设
选择如何安装项目中的依赖包npm/yarn
开始创建项目并安装对应包
项目创建完成
切换至项目路径，运行yarn serve命令可启动项目
vue-cli项目基本结构
创建路由模块
详细路由相关操作可在vue基础（六）中查看
1、安装 vue-router
2、在src目录创建router->index.js路由模块
// 按需导入两个方法
// createRouter用于创建路由的实例对象
// createWebHashHistory用于指定路由的工作模式
import { createRouter, createWebHashHistory } from 'vue-router'
//导入需要使用路由控制的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
// 创建路由对象
const router = createRouter({
// 指定路由的工作模式为hash
history: createWebHashHistory(),
// 声明路由的匹配规则
routes: [
{path:'/', redirect:'/home'},
{ path: '/home', component: Home },
{ path: '/about', component: Movie },
],
})
// 导出路由对象
export default router3、在main.js中导入并挂载路由模块
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 挂载路由模块
app.use(router)
app.mount('#app')
4、使用路由
<template>
<div>
<h1>APP根组件</h1>
<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<hr>
<!-- 路由占位符-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'MyApp',
}
</script>
<style lang="less" scoped>
</style>二、vue组件库-Element UI
vue组件库
实际开发中，开发者可把自己封装的.vue组件整理打包发布为npm包，供他人下载使用
这种可直接下载并在项目中使用的现成组件，就叫做vue组件库
常用vue组件库
- pc端：Element UI 、View UI
- 移动端：Mint UI、Vant
Element UI
vue2使用Element UI（Element - The world's most popular Vue UI framework）
vue3使用Element Plus(https://element-plus.org/zh-CN/)
1、安装
yarn add element-plus2、在项目中完整引入方式
在main.js中
// main.js
import { createApp } from 'vue'
//引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')3、 在项目中按需引入方式(自动导入)
借助unplugin-vue-components 和 unplugin-auto-import这两款插件
yarn add -D unplugin-vue-components unplugin-auto-import修改配置文件webpack.config.js的plugin选项
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}在需要引入组件的文件中按需导入
<template>
<el-button>我是 ElButton</el-button>
</template>
<script>
import { ElButton } from 'element-plus'
export default {
components: { ElButton },
}
</script>三、axios拦截器
拦截器：会在每次发起ajax请求得到相应数据的时候自动被触发
应用场景：实现Token认证、Loading效果...
配置axios
安装依赖包
yarn add axios -S
全局配置axios
import { createApp } from 'vue'
import App from './components/App.vue'
import './assets/css/bootstrap.css'
import './index.css'
import axios from 'axios'
const app = createApp(App)
// 为axios配置请求根路径
axios.defaults.baseURL = 'https://api.com'
// 将axios挂载为自定义属性后，每个组件可通过this直接访问的全局挂载的自定义属性
// $后的自定义属性名可自定义，此处为http
app.config.globalProperties.$http = axios
app.mount('#app')
发送get/post请求示例
methods: {
async postInfo() {
// 发起post请求this.$http.post(请求路径，请求数据)
const { data: res } = await this.$http.post('/api/post', { name: 'zs', age: 20 })
console.log(res)
},
async getInfo() {
// 发起get请求this.$http.get(请求路径，{params:{请求数据}}})
const { data: res } = await this.$http.get('/api/get', {
params: {
name: 'ls',
age: 33,
},
})
},
},
配置请求拦截器
通过axios.interceptors.request.use(成功的回调，失败的回调)可配置请求拦截器
注：失败的回调函数可以被省略
axios.interceptors.request.use((config) => {
//...
//必须return config
return config
},(error)=>{
//...
return Promise.reject(error)
})
使用请求拦截器配置Token认证
main.js
// 配置请求根路径
axios.defaults.baseURL = 'https://api.com'
// 配置请求拦截器
axios.interceptors.request.use((config)=>{
// 给请求头添加自定义属性,给Hader配置Token
config.headers.Authorization = 'Bearer ' + getToken()
console.log(config)
return config
})
// 挂载
app.config.globalProperties.$http = axios配置响应拦截器
通过axios.interceptors.response.use(成功的回调，失败的回调)可配置响应拦截器
注：失败的回调函数可以被省略
axios.interceptors.response.use((response) => {
//...
//必须return response
return response
},(error)=>{
//...
return Promise.reject(error)
})
四、proxy跨域代理
接口跨域问题
接口跨域问题：协议，域名，端口号不一致时会出现接口跨域问题
比如：
vue项目运行地址：http://localhost:8080/
ap接口地址：https://localhost:8000/api/users
此时接口不能请求成功
通过代理的方式解决跨域问题
proxy工作流程
- 将axios的请求路径设置为vue项目的运行地址而不是api接口地址（接口请求不再跨域）
- vue项目发现请求的接口不存在，把请求转交给proxy代理
- 代理把请求路径替换为devServer.proxy属性的值，发起真正的数据请求
- 代理把请求到的数据转发给axios
在项目中配置proxy代理
1、在main.js入口文件中，把axios请求路径改造为当前web项目的根路径
// 配置请求根路径
axios.defaults.baseURL = ' http://localhost:8080/'2、在项目根目录下创建vue.config.j的配置文件，并声明如下配置
module.exports = {
devServer:{
// 实际api接口地址
proxy:'https://www.fc2.cn'
}
}
注意：
- devServer.proxy提供的代理功能，仅在开发调试阶段生效
- 项目上线发布时，依旧需要API接口服务器开启CROS跨域资源共享