vue3创建项目

本文相关文档

1. Vue3.0官方文档：Vue3
2. Vue CLI官方文档：Vue CLI

1. 安装Vue CLI

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

# 安装命令
npm install -g @vue/cli
# 或者
yarn global add @vue/cli

# 升级全局的 Vue CLI 包
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

2. 创建Vue3.0项目

2.1 使用vue create命令创建项目

# 创建项目
vue create "项目名称"

2.2 使用图形化界面

通过 vue ui 命令以图形化界面创建和管理项目

vue ui

2.3. 启动项目

npm run serve

3. 首先先安装axios

npm install axios --save

3.1 在src下创建一个http文件，创建一个config.js文件！

作用是：抛出基础请求方式、基础前缀、请求头信息、参数、超时时间、凭证、后端接口返回数据类型！

 

 
export default {
  method: 'get',
  // 基础url前缀
  baseUrl: process.env.BASE_URL,
  // 请求头信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: true,
  // 返回数据类型
  responseType: 'json'
}

3.2 在src下创建一个http文件，创建一个axios.js文件！

作用是：使用请求拦截器和响应拦截器解决下边的问题

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

import axios from 'axios'
 
const request = axios.create({
    baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})
 
// request 请求器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
    if(config && config.headers){
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
    }
    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});
 
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)
 
 
export default request

3.3 在src下创建一个http文件，例：创建一个spi文件，创建index.js！

作用是：这里是放你要请求的接口url、请求方式post/get、传参data最后通过export default方式抛出在页面上调用！

import axios from "../axios";
 
export const alldata=(data)=>{
  return axios({
    url:'/article/data',
    method:'post',
    data
  })
}
 
 
export default {alldata}

3.4 在main.js跟文件挂载axios！

作用是：vue3不支持以 Vue.prototype的方式绑定全局变量,只能以app.config.globalProperties.$http在全局绑定

import axios from 'axios'
 
app.config.globalProperties.$http=axios;

3.5 在vue.config.js更改配置实现跨域！

作用是：通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接通过proxy也更改axios发送请求中，配置请求的根路径

// 配置跨域
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // lintOnSave:false,
  devServer: {
    port: 8080, // 端口
    proxy: {
      '/api': {  //   若请求的前缀不是这个'/api'，那请求就不会走代理服务器
        target: 'http://156.61.146.85:8078',  //这里写路径 
        pathRewrite: { '^/api': '' }, //将所有含/api路径的，去掉/api转发给服务器
        ws: true,  //用于支持websocket
        changeOrigin: true   //用于控制请求头中的host值
      },
    }
  }
 
})

第七步：在需调接口的页面写上所要用的方法，生命周期，初始值，引入的方法！

3.5 在需调用接口的页面写上所要用的方法，生命周期，初始值，引入的方法！

作用是：调接口渲染页面！

//引入文件
import { alldata } from '@/http/api/index'
//调取方法
alldata(data).then((res) => {
   console.log(res,"成功回调")
})