Vue3+Vite+TypeScript 项目：创建，配置与基本使用

最新推荐文章于 2024-06-09 20:20:39 发布

故人_KUNKUN

最新推荐文章于 2024-06-09 20:20:39 发布

阅读量967

点赞数 1

文章标签： typescript javascript vue.js vue

本文链接：https://blog.csdn.net/qq_38665682/article/details/126776532

版权

一，创建vite项目

1. Vite 项目

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

构建项目

在这里插入图片描述

安装依赖

 npm install

运行项目

 npm run dev

在这里插入图片描述

二，项目初始配置

（一）路由配置

1. 引入路由

下载依赖

npm install vue-router

main.ts

// 引入路由
import router from './router'

/src/router.index.ts

// 引入需要的模块
import { createRouter,  createWebHistory } from 'vue-router'

// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
    {
        path: '/',
        redirect: 'home'
    },
    {
        path: '/home',
        component: () => import('@/views/home/index.vue')
    },
    {
        path: '/login',
        // 已经配置了路径别名，@/view 就可以写成 view
        // 配置了extensions，login.vue可以写成login
        component: () => import('@/views/login/index.vue') 
    }
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 导出路由
export default router

（二）vuex

1. vuex配置

下载依赖

npm install vuex

/src/store/index.ts

import { createStore } from 'vuex'

declare let SessionStorage: any;

const store = createStore({
  state: {
    isLogin: false
  },
  mutations: {
    setUser (state, value) {
      console.log("store user：", value);
      state.isLogin = value;
    }
  },
  actions: {
  },
  modules: {
  }
});

export default store;

main.ts

// vuex
import store from './store'

app.use(store)

2. 具体使用

import store from "@/store";

const login = ref(store.state.isLogin); // 使用变量
store.commit("setUser", false); // 调用方法

（三）axios

1. axios配置

下载依赖

npm install vuex

/src/utils/request.ts

import axios from "axios";
import NProgress from "nprogress";
import router from "@/router";
import config from "../../config/index";
// import { getToken } from '@/utils/auth'
import { getCookie, delCookie, getStore, removeStore } from "./util"; // 引入工具包的getCookie


// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  baseURL: config.mainApi,
  timeout: 5000 // 超时时间5秒
});
// 设置post请求头
(service.defaults.headers.post["Content-Type"] =
  "application/json;charset=utf-8"), // 服务器/格式/字符集
  // http request 拦截器，通过这个，把token传到后台
  service.interceptors.request.use(
    config => {
      const token = getCookie("VUE_ADMIN_TOKEN"); // 调用 util 包进行按key取出需要的 cookie
      config.headers = {
        "admin-token": `${token || ""}` // 请求头带上jwt的token
      };
      return config; // 正确返回token
    },
    err => {
      return Promise.reject(err); // 错误返回
    }
  );

service.interceptors.response.use(
  response => {
    // 进度条开启代码
    NProgress.start();

    const res = response.data;
    // 进度条关闭代码
    NProgress.done();
    return res;
  },
  error => {
    const err = error.response.data;
    if (err.errCode === 401) {
      delCookie('VUE_ADMIN_TOKEN')
      router.push({ path: "/401" }); // cookie 失效后跳转回登录
    }
    // return Promise.reject(error.message)
    return Promise.reject(err);
  }
);

export default service;

/src/api/login.ts

import request from '@/utils/request'

export function login(data: Object) {
  return request({
    url: '/admin/auth/login',
    method: 'post',
    data
  })
}

export function info(data: Object) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: data
  })
}

export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}

// 获取验证码
export function captcha() {
  return request({
    url: '/admin/auth/captcha',
    method: 'get'
  })
}

2. 具体使用

import {defineComponent, onMounted, ref, reactive, toRef} from 'vue';
import { login, info, logout, captcha } from '@/api/login'
import { useRouter } from 'vue-router'

export default defineComponent({
	setup() {
		const router = useRouter()
		
		const loginReq = () => {
            console.log('退出')
            store.commit("setUser", true);
            ElMessage({
                    type: 'success',
                    message: '登录成功'
            });
            router.push({
                path: '/'
            })
            login().then((res: any) => {
            	console.log(res)
            })
        }
		return {
			loginReq
		}
	}
})

三，环境配置

（一）开发环境

.env.development

## 开发环境

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV=development

# base api
VITE_APP_BASE_API = 'dev'

（二）生产环境

.env.production

## 生产环境
NODE_ENV=production

# base api
VITE_APP_BASE_API = 'production'

（三）匹配环境

/config/index.ts

const config: any = {
    dev: {
        mainApi: 'http://192.168.2.4:8085'
    },
    production: {
        mainApi: 'http://192.168.2.4:8085'
    }

}
export default config[import.meta.env.VITE_APP_BASE_API || 'dev']

（四）具体使用

import config from "../../config/index";

baseURL: config.mainApi,

四，vite.config文件配置

1. 配置config

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'views': '@/views',
      'assets': '@/assets',
      'common': '@/common',
      'components': '@components',
      'network': '@/network',
      'router': '@/router',
      'store': '@/store'
    },
    // 省略文件后缀
    extensions: ['', '.js', '.json', '.vue', '.scss', '.css', '.ts', '.tsx']
  },
  server: {
    // 修改端口
    port: 9696
  }
})

五，第三方依赖引入

（一）Element Plus

1. 安装依赖

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

main.ts

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

使用

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

（二）第三方引入报红

1. ts语法错误

/src/@type/vue-slick-carousel/index.d.ts

declare module "vue-slick-carousel"

六，功能实现

**注意：**setup 是旧的写法

1. 具体业务代码

<template>
    <div class="test">
        {{ text }}
    </div>
</template>

<script lang="ts">
import { onMounted, ref } from 'vue';

export default ({
    setup() {
        const text = ref('业务代码');

        onMounted(() => {
                
        });

        return {
            text
        }
    },
})
</script>

<style lang="scss" scoped>
.test {
    font-size: 16px;
}
</style>