Vite新建一个vue3 ts项目

334 阅读5分钟

第一步 初始化项目

npm init vite@latest

接下来按照提示进入项目juejin,初始化和运行就可以在浏览器里查看效果了

运行后在终端提示:Network: use `--host` to expose,意思是需要把本机ip和端口暴露出来,要不然只能通过localhost本机访问,修改vite.config.js即可。

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

import { resolve } from 'path'  //引用解决别名

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
    //下面解决暴露本地地址和端口:Network: use `--host` to expose
    server: {
      host: '0.0.0.0',
      port: 8079,   //可以指定新的端口访问
      open: true
    },
    //解决暴露地址
    //下面别名,可以使用‘@’来代替src目录了
    resolve:{
      alias:[
        {
          find:'@',
          replacement:resolve(__dirname,'src')
        }
      ]
    }

})

注意:在vscode中禁用Vetur,安装Volar,vue-devtools需要安装beta版本,我的目前是6.0.0 beta 20

第二步 添加路由

安装

npm install vue-router@next --save

在src目录下,创建router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// createWebHashHistory hash 路由
// createWebHistory history 路由
// createMemoryHistory 带缓存 history 路由

import Login from '../views/login/index.vue'
import Main from '../views/main/index.vue'

const routes: RouteRecordRaw[] = [
    {
        path: "/login",
        // component: () => import("../views/login/index.vue")
        component: Login
    },
    {
        path: '/',
        component: Main
    }
]

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

export default router

在main.ts中挂载路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  //引入路由

createApp(App).use(router).mount('#app')  //路由挂载

在app.vue页面中添加

<router-view />

访问http://localhost:8079/login就可以到达login页面了

第三步 添加 element-plus

安装

 npm install element-plus --save

配置按需导入,需要额外安装unplugin-vue-components,而无需在main.ts中导入了

npm install unplugin-vue-components

打开vite配置文件vite.config.ts

//引入
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//添加
export default defineConfig({
  plugins: [vue(),
  Components({
    resolvers: [ElementPlusResolver()],
  }),
  ]
})

直接在vue页面使用plus组件即可,例如在App.vue中使用按钮:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <el-button>ElButton</el-button>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

第四步 添加axios

安装

npm install axios --save
npm install qs --save  //qs 模块,用来系列化数据

在src文件夹下,创建axios/request.ts

import axios,{AxiosRequestConfig,AxiosResponse,AxiosError} from "axios";

参考: