vue-cli,element-plus,axios,proxy

一、vue-cli

vue-cli俗称vue脚手架,是vue官方提供的快速生成vue 工程化项目的工具。

1.官网:https://cn.vuejs.org/

中文官网: https://cli.vuejs.org/zh/

特点:基于webpack,功能丰富且易于扩展,支持创建vue2和vue3的项目

2.全局安装:
npm install -g @vue/cli

查看vue-cli的版本,检查vue-cli是否安装成功

vue --version
3.解决Windows PowerShell 不识别vue命令的问题

a.以管理员身份运行 PowerShell

b.执行set-ExecutionPolicy RemoteSigned命令

c.输入字符Y,回车即可

4.基于vue ui 创建vue项目

本质:通过可视化面板采集到的用户配置信息后,在后台基于命令行的方式自动初始化项目

a.在终端下运行vue ui 命令,自动在浏览器中打开创建项目的可视化面板

b.在详情页面填写vue项目名称

c. 在预设页面选择手动配置项目

d.在功能页面勾选需要安装的功能(css预处理器,使用配置文件)

e.在配置页面勾选vue的版本和需要的预处理器

f.将刚才所有的配置保存为预设模板,方便下一次创建项目时直接复用之前的配置

5.基于命令行创建vue项目
vue create my-project

a.在终端下运行vue create 002demo命令,基于交互式的命令行创建vue的项目

b.选择要安装的功能(手动选择要安装的功能)

把babel,eslint等插件的配置信息存储到单独的配置文件中(推荐)

把babel,eslint等插件的配置信息存储到package.json中(不推荐)

erer

二、组件库

1.element-plus

地址:https://element-plus.org/zh-CN/

全局引入

npm install element-plus --save

npm install @element-plus/icons-vue

javascript 复制代码
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

也可以将element相关代码拆分

javascript 复制代码
element.js
import { ElButton,ElIcon } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export const setupElement = (app) =>{
    app.component(ElButton.name, ElButton)
    app.component(ElIcon.name, ElIcon)
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
      }
}

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {setupElement} from './element.js'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
setupElement(app)
app.mount('#app')
按需引入

npm install -D unplugin-vue-components unplugin-auto-import

javascript 复制代码
vue.config.js
const AutoImport = require('unplugin-auto-import/webpack').default;
const Components = require('unplugin-vue-components/webpack').default;
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus,
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  }
};
javascript 复制代码
<template>
  <div class="hello">
    <el-button color="#626aef">Default</el-button>
    <el-button>我是 ElButton</el-button>
    <el-button type="primary" circle>
      <el-icon :size="20">
        <Edit />
      </el-icon>
    </el-button>
  </div>
</template>
<script>
import { Edit } from '@element-plus/icons-vue'
export default {
  name: 'HelloWorld',
  components: {
    Edit
  }
}
</script>
javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import {setupElement} from './element.js'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
// setupElement(app)
app.mount('#app')

三、axios拦截器

拦截器会在每次发起ajax请求和得到相应的时候自动被触发。

应用场景:token身份验证,loading效果。

javascript 复制代码
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
axios.defaults.baseURL='http://localhost:3000'
app.config.globalProperties.$http=axios
app.mount('#app')

<template>
</template>
<script>
export default {
  methods:{
    async getData(){
      const {data:res} = await this.$http.get('/goodsList')
      console.log('res',res);
    }

  },
  created(){
    this.getData()
  }
}
</script>
配置请求拦截器,响应拦截器

通过axios.interceptors.request.use(成功的回调,失败的回调)可以配置请求拦截器。

通过axios.interceptors.response.use(成功的回调,失败的回调)可以配置相应拦截器。

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import 'element-plus/dist/index.css'
import { ElLoading  } from 'element-plus'
const app = createApp(App)
app.use(router)
axios.defaults.baseURL='http://localhost:3000'
// axios.interceptors.request.use(config=>{
//     config.headers.Authorization='Bearer xxx'
//     return config
// })
let loadingInstance=null
axios.interceptors.request.use(config=>{
    loadingInstance = ElLoading.service({fullscreen:true})
    return config
})
axios.interceptors.response.use((response)=>{
    loadingInstance.close()
    return response
},(error)=>{return Promise.reject(error)} )
app.config.globalProperties.$http=axios
app.mount('#app')

拆分axios

javascript 复制代码
// src/http.js
import axios from 'axios';
import { ElLoading } from 'element-plus';

const http = axios.create({
    baseURL: 'http://localhost:3000',
});

let loadingInstance = null;

http.interceptors.request.use(config => {
    loadingInstance = ElLoading.service({ fullscreen: true });
    if(localStorage.getItem('token')){
        config.hearders.token=localStorage.getItem('token')
    }
    return config;
});

http.interceptors.response.use(
    response => {
        loadingInstance.close();
        return response;
    },
    error => {
        loadingInstance.close();
        switch(error.response.status){
            case 404:console.log("您请求的路径不存在,或者错误");break;
            case 500:console.log("服务器出错");break;
        }
        return Promise.reject(error);
    }
);

export default http;

main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import http from './http'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.config.globalProperties.$http=http
app.mount('#app')

拆分发请求的api

javascript 复制代码
api.js
import http from "./http";
//获取商品列表
// export const getGoodsListApi=()=>{
//     return http.get("/goodsList")
// }
export const getGoodsListApi=()=>{
    return http({
        url:"/goodsList",
        methods:'get'
    })
}

四、proxy跨域代理

1.解决方法

a.把axios的请求根路径设置为vue项目的根路径

b.vue项目发请请求的接口不存在,把请求转交给proxy代理

c.代理把请求路径替换为devServer.proxy属性的值,发请真正的数据请求

d.代理把请求的数据,转发为axios

javascript 复制代码
vue.config.js
const AutoImport = require('unplugin-auto-import/webpack').default;
const Components = require('unplugin-vue-components/webpack').default;
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })
    ]
  },
  devServer: {
    proxy: {
      '/apicity': { //axios访问 /apicity ==  target + /apicity
        target: 'http://121.89.205.189:3000',//真正的服务器
        changeOrigin: true, //创建虚拟服务器 
         pathRewrite: {
            '^/apicity': '' //重写接口地址,去掉/apicity, 
        }
      }
    }
  }
});

api.js
import http from "./http";
export const getCitysListApi=()=>{
    return http({
        url: "/apicity/city/sortCity.json",
        methods:'get'
    })
}

注意:a.derServer.proxy提供的代理功能,仅在开发调试阶段生效

b.项目上线发布时,依旧需要api接口服务器开启cors跨域资源共享

相关推荐
别拿曾经看以后~7 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死10 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试13 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人22 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人22 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR28 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香30 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969333 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai38 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc43 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter