从零到一搭建vue3项目vue3+typescript+vite+elementplus+axois+pinia

从零到一搭建vue3项目，将创建步骤完整地总结下来，方便日后查看。

1、使用vite创建vue+ts的项目

1）全局安装vite

确定已经全局安装了vite，安装命令如下

npm install -g vite

2）创建vue3+typescript项目

创建命令中my-vue3-ts-project为项目名称，根据需要进行修改

npm create vite@latest my-vue3-ts-project -- --template vue-ts

3）进入项目目录，安装依赖，运行项目

cd my-vue3-ts-project

npm install

npm run dev

这样vue项目就创建完成了。

2、集成组件库element-plus

1）安装element-plus

npm install element-plus

2）按需导入-自动导入

安装插件unplugin-vue-components和unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

vite的配置文件中增加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 自动导入element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import { resolve } from "path";
const pathSrc = resolve(__dirname, "src")

export default defineConfig({
  resolve: {
    extensions: ['.js','.vue','.json','.ts'],
    alias: {
      "@": pathSrc
    }
  },
  plugins: [
    vue(),
    // 自动导入element-plus
    AutoImport({
      imports: ['vue'],
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    
  ],
  server: {
    host: '0.0.0.0',
    port: 3001,
    open: true,
    proxy:{
      '/api':{
        target: 'http://x.x.x.x:xxxx',
        changeOrigin: true,
        rewrite:path=>path.replace(/^\/api/,'')
      }      
    }
  },
})

3）安装和注册element-plus的图标

npm install @element-plus/icons-vue

// main.ts
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

3、封装axios

1）安装axios

npm install axios

2）创建axios实例

创建axios实例，并添加请求和响应拦截器，新建ts文件，添加如下代码，此处文件名为http.ts。

// src/api/http.ts
import axios from 'axios'
import {ElMessage} from 'element-plus'
import router from '@/router'
// 设置请求超时
axios.defaults.timeout = 20000;
axios.defaults.withCredentials = true
const requestInstance = axios.create({
    baseURL:'/api'
})
// 请求拦截器
requestInstance.interceptors.request.use(
    async config=>{
        // 判断是否需要增加token
        if (config.url.indexOf('login')<0){
            let token = localStorage.getItem('token')
            token&&(config.headers.Authorization = `${token}`)
        }
        return config
    },
    error=>{
        return Promise.error(error)
    }
)
// 响应拦截器
requestInstance.interceptors.response.use(
    response=>{
        // 2xx 范围内的状态码都会触发该函数。
        return Promise.resolve(response.data.data)
    },
    error=>{
        // 超出 2xx 范围的状态码都会触发该函数。
        // 如果有登录失败的情况，需要跳转到login页面
        // router.push({
        //     path: '/login'
        // })
        ElMessage({
            message: error.data.message || '操作错误',
            type: 'error',
            plain: true
        })
        return Promise.reject(error);
    }
)
export default requestInstance

3）定义接口方法

在定义接口方法时，引入http.ts，例如login的接口

// src/api/loginServer.ts
import http from './http'
// 定义一个接口来描述登录参数
interface LoginParams {
    userName: string;
    password: string;
}
export function login(params: LoginParams){
    return http.post('/login', params)
}

4、配置router

1）安装vue-router

npm install vue-router@4

2）定义路由

定义路由，在router文件夹下新建routes.ts

import { RouteRecordRaw } from 'vue-router'
const Home = () => import('@/views/Home.vue') // Home是布局组件
const Login = () => import('@/views/Login.vue')
const Page = () => import('@/views/Page.vue')

const routes: Array<RouteRecordRaw> = [
    {
        path: '/login',
        name: 'login',
        meta: {
            title: '登录'
        },
        component: Login,
        children: []
    },
    {
        path: '/',
        redirect: '/page',
        meta: {
            title: '首页'
        },
        component: Home,
        children: []
    },
    {
        path: '/page',
        name: 'page',
        meta: {
            title: '主页面'
        },
        component: Home,
        children: [{
            path: '/page',
            component: Page
        }]
    }
]
export default routes

3）创建路由和设置全局前置守卫

在router文件夹下新建index.ts

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'

const router = createRouter({
    history: createWebHistory(),
    routes
})
// 全局前置守卫  
router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('token')
    const isAuthenticated = !!token
    if (to.name === 'login') {
        localStorage.clear()
    }
    if (to.name !== 'login' && !isAuthenticated) {
        // 如果用户未登录且即将访问的页面不是登录页面，则重定向到登录页面  
        next({ path: '/login' });
    } else {
        // 确保一定要调用 next()
        next();
    }
});
export default router

4）在main.ts中集成

import router from './router'
//...
app.use(router).mount('#app')

5）在App.vue中加入router-view

<template>
  <router-view />
</template>
<script setup lang="ts">
</script>

6）在组件中获取路由信息

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
const router = useRouter() // 获取路由实例，用于导航和其他路由操作。
const route = useRoute() // 获取当前路由信息，如路径和查询参数等。
</script>

5、配置状态管理

1）安装pinia

npm install pinia@next

2）在main.ts中配置pinia

import { createPinia } from 'pinia';
// 创建 Pinia 实例
const pinia = createPinia();
const app = createApp(App)
app.use(pinia).mount('#app')

3）创建store

// src/store/index.ts
import { defineStore } from 'pinia';
 
export const useMainStore = defineStore('main', {
  state: () => ({
      userId: ''
    // 一些属性
  }),
  actions: {
    // 一些方法
    getUserId(){
        return this.userId    
    }
  },
})

4）在组件中使用store

<template>
  <div>
    {{ myStore.userId }}
  </div>
</template>
<script setup lang="ts">
    import { useMainStore } from '@/store'
    const myStore = useMainStore()
</script>

6、完整main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入mock
// import './mock'

// 样式
import "@/assets/styles/index.scss"

// 创建 Pinia 实例
const pinia = createPinia();

const app = createApp(App)
// 全局注册图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(pinia).use(router).mount('#app')