webpack回顾

（移动端打包）一步一步,一步从代码到,打包成为手机App,上传至nginx服务器 (Vue项目)_0.活在风浪里的博客-CSDN博客_移动端打包一步一步,一步从代码到,打包成为手机App,上传至ngnix服务器 (Vue项目)https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165632131516782246419577%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165632131516782246419577&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-6-122500485-null-null.nonecase&utm_term=%E7%A7%BB%E5%8A%A8%E7%AB%AF&spm=1018.2226.3001.4450

为什么写这篇，因为使用vite构建项目，与cli、不同，需要自己新建router、vuex、sass

你需要有点基础，在博文中我全程以cnpm叙述，因为方便复制，cnpm镜像下载速度快，安装node自有npm，npm去下载cnpm, 念及此那就直接开始

安装和创建项目：

npm init @vitejs/app my-vue-app --template vue

还是那句话，在项目开始前配置好 vite.config.ts

配置vite.config.ts

我们在写vue3的时候每个组件都要频繁的引入下面这样借用插件可以不用引入直接用，默认只配置了vue vuex、element plus需要自己在配置

//非常的繁琐
import { ref, torefs, nextTick, onMounted..... } from 'vue'

这时候我们只需要下载一个插件

cnpm i -D unplugin-auto-import

找到 vite.config.ts/js 配置下

import AutoImport from 'unplugin-auto-import/vite';

  plugins: [vue(), AutoImport({
    imports: ['vue'],
    dts: 'src/auto-import.d.ts'
  })],

下面配置跨域和路径别名和element-plus组件库按需引入完整vite.config.ts/js代码

import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";

export default defineConfig({
  plugins: [
    vue(),
    //引入vue 插件
    AutoImport({
      imports: ["vue"],
      dts: "src/auto-import.d.ts",
    }),
    //plus按需引入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    //plus按需引入
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    },
  },

  resolve: {
    //配置根路径别名： import('@/pages/login/login.vue')
    alias: {
      "@": path.resolve(__dirname, "src"), 
      // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！
      "comp": resolve(__dirname, "src/components"),
      // 配置图片要这样引用
      "/img": "./src/assets",
    },
  },
  // 跨域
  server: {
    //使用IP能访问
    host: "0.0.0.0",
    // 热更新
    hmr: true,
    //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
    strictPort: false,
    //自定义代理规则
    proxy: {
      // 选项写法
      "/api": {
        target: "https://admin.itrustnow.com",
        // target: "http://192.168.0.50:8083",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

页面效果：

路径别名、跨域、自动引入api都配好了，现在整合路由

安装路由：

cnpm install vue-router@next

创建一个文件，用来配置route:

import { createRouter,createWebHistory} from "vue-router"

 
const routes = [
  {
    path:'/',
    redirect: 'login'
  },
  {
    path:'/login',
    component: () => import('@/pages/login/login.vue')
  },
  {
    path:'/home',
    component: () => import('@/pages/home/home.vue')
  }
]
 
// 导出路由
const router = createRouter({
  history: createWebHistory(),  //开启history模式
  routes
});
 
export default router;

创建好了router文件后，记得一定要导出，在main.ts中使用

//main.ts
 
import { createApp } from 'vue'
import App from '@/App.vue'
 
//导入router配置文件
import route from '@/route/router'
 
//类似于:
/**
vue-cli:
Vue.use(router)
const app = new Vue({
	render: h => h(App)
}).$mount("#app")
*/

const app = createApp(App)
//全局注册
app.use(route)
 
app.mount('#app')

安装 vuex：

cnpm install vuex@next --save

新建文件store.js/ts:

//store.ts:

import { createStore } from "vuex";
const store = createStore({
    state()
    {
        return {
            count: '666',
        };
    },
    getters: {
        getCount(state)
        {
            return state.count;
        },
    },
    mutations: {
        increment(state)
        {
            state.count++;
        },
    },
});

export default store;

在main.js中使用：

// main.js/ts：
 
import { createApp } from 'vue'
import App from '@/App.vue'
 
import route from '@/route/router'
import store from '@/store/store'
 
const app = createApp(App)
//全局注册
app.use(route)
app.use(store)
 
app.mount('#app')

在页面使用vuex:

// login.vue

<script setup lang="ts">
import { useStore } from "vuex";
import { computed, onMounted } from "vue";
let store = useStore();

const count = computed(() => store.state.count);
onMounted(() => {
  console.log("插件自动引入,上面没引入onMounted，这里直接用");
});
const addClick = () => {
  store.commit("increment");
};
</script>

<template>
  <router-link to="/home">跳转 home</router-link>
  <br />
  <hr />
  <!--这里是vuex的数据，不要直接在这里使用 不然修改vuex数据页面不能及时相应，需要在计算属性中处理下
      在vue3.0中，可以直接写，因为 proxy 可以监听到任意数据的变化
  -->
  <p>{
   
   { $store.state.count }}</p>

  <!-- 通过计算属性可以及时变化 -->
  <p>{
   
   {count}}</p>
  <button @click="addClick">增加</button>
</template>

安装：scss

cnpm install sass

使用：<style lang="scss" scoped></style>

vue3+vite 封装axios请求

//挂载全局属性或者方法，类似于 Vue.prototype.$api = api
app.config.globalProperties.$api = api

安装axios:

cnpm install axios

创建axios实例:

新建一个network文件夹

// network/index.js
import axios from 'axios'
import {
    ElLoading,
    ElMessage
} from 'element-plus';
//创建axios的一个实例 
var instance = axios.create({
    baseURL: import.meta.env.VITE_APP_URL, //接口统一域名
    timeout: 6000, //设置超时
    headers: {
        'Content-Type': 'application/json;charset=UTF-8;',
    }
})
let loading;
//正在请求的数量
let requestCount = 0
//显示loading
const showLoading = () => {
    if (requestCount === 0 && !loading) {
        loading = ElLoading.service({
            text: "Loading  ",
            background: 'rgba(0, 0, 0, 0.7)',
            spinner: 'el-icon-loading',
        })
    }
    requestCount++;
}
//隐藏loading
const hideLoading = () => {
    requestCount--
    if (requestCount == 0) {
        loading.close()
    }
}

//请求拦截器 
instance.interceptors.request.use((config) => {
        showLoading()
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = window.localStorage.getItem('token');
        token && (config.headers.Authorization = token)
        //若请求方式为post，则将data参数转为JSON字符串
        if (config.method === 'POST') {
            config.data = JSON.stringify(config.data);
        }
        return config;
    }, (error) =>
    // 对请求错误做些什么
    Promise.reject(error));

//响应拦截器
instance.interceptors.response.use((response) => {
    hideLoading()
    //响应成功
    console.log('拦截器报错');
    return response.data;
}, (error) => {
    console.log(error)
    //响应错误
    if(error.response&&error.response.status){
	   const status = error.response.status
	    switch (status) {
	        case 400:
	            message = '请求错误';
	            break;
	        case 401:
	            message = '请求错误';
	            break;
	        case 404:
	            message = '请求地址出错';
	            break;
	        case 408:
	            message = '请求超时';
	            break;
	        case 500:
	            message = '服务器内部错误!';
	            break;
	        case 501:
	            message = '服务未实现!';
	            break;
	        case 502:
	            message = '网关错误!';
	            break;
	        case 503:
	            message = '服务不可用!';
	            break;
	        case 504:
	            message = '网关超时!';
	            break;
	        case 505:
	            message = 'HTTP版本不受支持';
	            break;
	        default:
	            message = '请求失败'
	    }
		    ElMessage.error(message);
		    return Promise.reject(error);
       }
    return Promise.reject(error);
});


export default instance;

对 baseURL: import.meta.env.VITE_APP_URL, 解释

在根目录新建三个文件

.env.development

# 本地环境
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://192.168.0.50:8888/'
//与后台在同一局域网，这个他电脑的ip

.env.production

# 线上环境
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'

.env.test

# 本地环境
ENV = 'test'

# 本地环境接口地址
VITE_API_URL = 'https://testhg.itrustnow.com/'

封装请求方式

// http/request.js
import instance from "./index"


const axios = ({
    method,
    url,
    data,
    config
}) => {
    method = method.toLowerCase();
    if (method == 'post') {
        return instance.post(url, data, {...config})
    } else if (method == 'get') {
        return instance.get(url, {
            params: data,
            ...config
        })
    } else if (method == 'delete') {
        return instance.delete(url, {
            params: data,
            ...config
        }, )
    } else if (method == 'put') {
        return instance.put(url, data,{...config})
    } else {
        console.error('未知的method' + method)
        return false
    }
}
export default axios

封装请求接口

//api.js/ts
import axios from "../http/request"
//请求示例
//get
export const mokeGet = (data) => {
    return axios({
        url: "/api/xxxx",
        method: "get",
        data,
        config: {
            headers: {
                'Request-Type': 'wechat'
            },
            timeout: 10000
        }
    })
}
//post
export const mokePost = (data) => {
    return axios({
        url: "/api/xxxx",
        method: "post",
        data,
        config: {
            headers: {
                'Request-Type': 'wechat'
            },
            timeout: 10000
        }
    })
}

vue中调用

import { mokePost } from "@/api";
import {onMounted} from "vue"
export default {
  setup() {
     onMounted(() => {
      mokePost().then(res=>{
        console.log(res)
      })
    })
    return {};
  },
};

Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）

安装和创建项目：

配置vite.config.ts

页面效果：

安装路由：

安装 vuex：

安装：scss

vue3+vite 封装axios请求

安装axios:

创建axios实例:

封装请求方式

封装请求接口

vue中调用

猜你喜欢

Vite项目，vite + vue3 + ts + vuex + vue-router + axios + scss + 自动导入api（就是用v3不需要引入api直接使用）

安装和创建项目：

配置vite.config.ts

页面效果：

安装路由 ：

安装 vuex：

安装：scss

vue3+vite 封装axios请求

安装axios:

创建axios实例:

封装请求方式

封装请求接口

vue中调用

猜你喜欢

安装路由：