vue3 vite + router + axios

这次只是总结怎样去搭建一个vue3的开发框架，并不会写到vue3的特性和用法。

特别注意--坑

vite 优点：快。

vite 缺点：

1.无法使用require，这一点让你在使用 图片/img 的时候特别难受。

2.用不了eslint

在没想到办法解决require的问题之前，还是使用 vue-cli 香~

1.安装

vue3 中文文档-安装 这一步看着文档就可以简单完成。

升级最新版本：npm install vue@next

创建名为'test'的项目：npm init vite-app test

2.路由

安装router指定版本 vue-router@4.0.0-beta.13

npm i vue-router@4.0.0-beta.13 --save-dev

在src目录下创建 router/index.ts，用于存放路由页面：

import {createRouter, createWebHashHistory} from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('/src/pages/home.vue')
    }
  ]
});

export default router;

这时候ts会报错

需要在src目录下再建一个 sfc.d.ts 文件：

• 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
• 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。
• 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

然后把router注入到vue中，在 main.js 文件写上下面代码：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 路由配置
import Router from '/src/router/index.ts';

createApp(App).use(Router).mount('#app')

修改 App.vue 如下：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

最终目录结构如下：

到这里路由配置就完成了，router 路由的跳转和使用跟之前的一样并没有发生改变。

3.接口请求

安装 axios

npm i axios --save-dev

在src目录下创建 service/index.ts

import axios from 'axios';

// 请求域名-本地请求
const http: string = '/';

// url处理
const getUrl = (url: string) => {
  if (!url) {
    return '';
  }
  return `${http}${url}`;
};

// post请求
const Post = ({url = '', data = {}}) => {

  let theUrl: string = getUrl(url);

  return axios.post(theUrl, data)
    .then((response) => {
      if (response) {
        return response;
      } else {
        return Promise.reject();
      }
    })
};

export default {
  Post
};
export {
  Post
};

在 page/home.vue 中使用Post方法：

<template>
  <div>home</div>
</template>

<script>
import { Post } from '/src/service/index.ts';
export default {
  created() {
    Post({
      url: '测试接口1',
      data: {
        pagesize: 1,
      }
    })
  },
}
</script>

此时运行项目，浏览器报错：

因为还没有在vite里面去配置第三方插件，所以在test项目的根目录下建一个 vite.config.js 文件：

const path = require('path')

module.exports = {
  base: './',

  // 引入第三方的配置
  optimizeDeps: {
    include: ["axios"]
  },

  // 路径佚名
  // alias: {
  // 键必须以斜线开始和结束
  //   '/@/': path.resolve(__dirname, './src')
  //},

  // 代理请求
  proxy: {
    '/api': {
      target: 'https://xxxx',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  },

  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx']
  }

}

上面内容分别是：

• optimizeDeps   配置了第三方插件axios
• proxy       设置axios的代理请求，/api指定为 https://xxxx

* alias        路径佚名，方便后面文件引入 不需要佚名

稍微修改一下 service/index.ts:

import axios from 'axios';

// 代理参数
const http: string = '/api/';

// url处理
const getUrl = (url: string) => {
  if (!url) {
    return '';
  }
  return `${http}${url}`;
};

// Post方法
const Post = ({url = '', data = {}}) => {

  let theUrl: string = getUrl(url);

  return axios.post(theUrl, data)
    .then((response) => {
      if (response) {
        return response;
      } else {
        return Promise.reject();
      }
    })
};

export default {
  Post
};
export {
  Post
};

直接运行项目 okk~

最终项目结构如下：