一 vite + vue3 + ts + vant

小刘想编程
579 阅读4分钟

是的，在vue3出来这么长时间之后，终于我要开始写vue3的代码了，我是一个做事拖拉的人，在重新入职了一家公司之后。终于开始要从头开始写vue3的项目了。我的vue3学习一直在看文档和看项目里面，没有亲自写过。之前一直有写这项目的打算。一直拖拖拉拉是我性格的问题。懒惰，贪玩反正一切形容人的贬义词都适合不学习的我。这方面的话题暂时先不讨论了，进入正题。 我电脑上是安装的有node环境的 如没有node环境请移步node环境下载

我做的第一步在需要创建项目的文件夹里面 打开cmd窗口创建vite项目 执行

一 初始化项目

npm init vite

1. 在Project name 后面输入你想要创建的项目名称

image.png

2.我在这里创建的项目名称是 "test-vue3-admin"(以test-vue3-admin举例),选择vue回车

image.png

3.选择vue或者vue-ts都可以(因为项目需要用到ts，所以我选择vue-ts) ，选中回车

image.png

4.根据他的提示

cd test-vue3-admin (就是你创建的项目名称)

npm install (下载依赖)

npm run dev (运行 项目就可以跑起来了)

image.png

二 配置项目路由

创建src/router/index.ts文件，使用路由懒加载，优化访问性能。

1.安装

npm install vue-router --save

2. 配置router文件

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'App',
        component: () => import('../views/index.vue') // 建议进行路由懒加载，优化访问性能
    },
]



const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

router.beforeEach((to, from, next) => {

    // store.store.commit("closeMNav")
    next() //执行进入路由，如果不写就不会进入目标页

})

export default router

3.在main.js里面引入router

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
//可改写成这种样式
const app = createApp(App);
app.use(router);
app.mount("#app");

4.使用router

 在App.vue文件中使用router-view组件，路由匹配到组件会通过router-view组件进行渲染

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

三 安装、引入vant

执行安装命令 npm i vant

通过 npm 安装 npm i unplugin-vue-components -D

配置插件(此处之贴了vite项目的配置，如果想了解更多请去官网查看Vant项目配置

import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

四 配置代理 创建多环境文件

关于多环境文件请了解官网 这是一个链接 关于多环境文件通过我在网上找大佬们写的文章 我就了解了一个测试环境和生产环境 如果有知道的大佬希望教教小弟

tip：在vite.config.ts 里面获取环境变量请先引入 loadEnv 具体请看配置文件代码

一切就绪之后就是改package.json里面的代码了 请看贴图

image.png Tip：关于上图的问题的两种解决方式: 1.使用nginx做转发 2.在请求的baseurl进行设置 第二种解决方式代码贴图（思路是在请求封装的时候判断是否是生产环境）

image.png image.png 具体配置文件代码

const configOptions:any = ({ mode }) => {
  const env = loadEnv(mode, process.cwd());  //获取环境变量
  const port = 1234 // 项目启动端口号
  return defineConfig({
      plugins: [
        vue(),
        Components({
          resolvers: [VantResolver()],
        }),
      ],
      envDir: "./viteEnv",//这里使用相对路径，绝对路径其实也可以 
      server: {
        port: port,
        open: true,
        proxy: {
          "/api": {
            target: env.VITE_BASE_API,
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ""),
          },
        }
      },
    })
}

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a87706e76ef4ab78212674351cd7b4f~tplv-k3u1fbpfcp-watermark.image?)
export default configOptions

四 安装、封装axios

1.执行命令 npm install axios --save

2.二次封装axios

//二次封装axios
import axios from "axios";
 
//创建一个实例
const instance = axios.create({
  baseURL: "",基础路径
  timeout: ,//请求超时时间
});
 
//拦截器
instance.interceptors.request.use(
  (config) => {
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);
 
instance.interceptors.response.use(
  (result) => {
    return result.data;
  },
  (err) => {
    return Promise.reject(err);
  }
);
 
export default instance;

2.在request单独建一个文件（api.ts）写接口(接口就可以在其他文件夹中引入直接调用)

import request from "./request";
export const adminLoginApi = (data) =>
  request.post("url", data)

真不是一个自律的人，四、五个小时弄了这些东西。今天就先到这了 因为这是我构建着项目写的文章，可能不是太好理解，请大佬们指正。第一次写文章轻点喷哥哥们，如果有问题欢迎评论区讨论。明天继续更新路由守卫。。。暂时就先定一个吧，突然想起来明天还要给公司去薅花生。不知道兄弟们怎么看给公司干活这件事，我内心是不太情愿的，但是不太好拒绝领导的要求。还加上最近工作不是太紧张。

avatar
文章
阅读
粉丝