Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！

温华从此不练剑

已于 2024-06-04 11:00:17 修改

阅读量1k

点赞数 29

文章标签： vue 前端框架 vue.js 前端 javascript

于 2024-06-03 14:47:38 首次发布

本文链接：https://blog.csdn.net/qq_33546296/article/details/139414615

版权

本文档详细介绍了如何使用Vite快速搭建Vue3项目，包括设置项目模板、配置路由、CSS预处理器、状态管理和组件库的选择。重点讲述了Vite的配置，如别名、路由、SCSS集成以及Pinia的状态管理，同时提到了Element-Plus的按需引入。最后，讨论了环境变量配置和Vite的基础配置。

摘要由CSDN通过智能技术生成

原链接：Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！

使用 Vite 快速搭建脚手架

命令行选项直接指定项目名称和想要使用的模板，Vite + Vue 项目，运行（推荐使用yarn）

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

这里我们想要直接生成一个Vue3+Vite2+ts的项目模板，因此我们执行的命令是: yarn create vite my-vue-app --template vue-ts，这样我们就不需要你单独的再去安装配置ts了。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

cd 到项目文件夹，安装node_modules依赖，运行项目

# cd进入my-vue-app项目文件夹
cd my-vue-app
# 安装依赖
yarn
# 运行项目
yarn dev

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

至此，一个最纯净的vue3.0+vite2+typescript项目就完成了。在浏览地址栏中输入http://localhost:3000/，就看到了如下的启动页，然后就可以安装所需的插件了。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

配置文件路径引用别名 alias

修改vite.config.ts中的reslove的配置

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'),
    },
  },
})

在修改tsconfig.json文件的配置

{
   
  "compilerOptions": {
   
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
   
      "@/*":["src/*"]
    }
  },
  "include": [
    "src/**/*.ts", 
    "src/**/*.d.ts", 
    "src/**/*.tsx", 
    "src/**/*.vue"
  ]
}

配置路由

安装

# npm
npm install vue-router@4

# yarn
yarn add vue-router@4

在src下新建router文件夹，用来集中管理路由，在router文件夹下新建 index.ts文件。

import {
    createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
   
    path: '/',
    name: 'Login',
    // 注意这里要带上文件后缀.vue
    component: () => import('@/pages/login/Login.vue'), 
    meta: {
   
      title: '登录',
    },
  },
]

const router = createRouter({
   
  history: createWebHistory(),
  routes,
  strict: true,
  // 期望滚动到哪个的位置
  scrollBehavior(to, from, savedPosition) {
   
    return new Promise(resolve => {
   
      if (savedPosition) {
   
        return savedPosition;
      } else {
   
        if (from.meta.saveSrollTop) {
   
          const top: number =
            document.documentElement.scrollTop || document.body.scrollTop;
          resolve({
    left: 0, top });
        }
      }
    });
  }
})

export function setupRouter(app: App) {
   
  app.use(router);
}

export default router

修改入口文件 mian.ts

import {
    createApp } from "vue";
import App from "./App.vue";
import router, {
    setupRouter } from './router';

const app = createApp(App);
// 挂在路由
setupRouter(app);
// 路由准备就绪后挂载APP实例
await router.isReady();

app.mount('#app', true);

更多的路由配置可以移步vue-router（https://next.router.vuejs.org/zh/introduction.html）。 vue-router4.x支持typescript，路由的类型为RouteRecordRaw。meta字段可以让我们根据不同的业务需求扩展 RouteMeta 接口来输入它的多样性。以下的meta中的配置仅供参考：

// typings.d.ts or router.ts
import 'vue-router'

declare module 'vue-router' {
   
  interface RouteMeta {
   
    // 页面标题，通常必选。
    title: string; 
    // 菜单图标
    icon?: string; 
    // 配置菜单的权限
    permission: string[];
    // 是否开启页面缓存
    keepAlive?: boolean;
    // 二级页面我们并不想在菜单中显示
    hidden?: boolean; 
    // 菜单排序
    order?: number; 
    // 嵌套外链
    frameUrl?: string; 
  }
}

配置 css 预处理器 scss

安装

yarn add sass-loader --dev
yarn add dart-sass --dev
yarn add sass --dev

配置全局 scss 样式文件在 src文件夹下新增 styles 文件夹，用于存放全局样式文件，新建一个 varibles.scss文件，用于统一管理声明的颜色变量:

$white: #FFFFFF;
$primary-color: #1890ff;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;

组件中使用在vite.config.ts中将这个样式文件全局注入到项目即可全局使用，不需要在任何组件中再次引入这个文件或者颜色变量。

css: {
   
  preprocessorOptions: {
   
    scss: {
   
      modifyVars: {
   },
      javascriptEnabled: true,
      // 注意这里的引入的书写
      additionalData: '@import "@/style/varibles.scss";'
    }
  }
},

在组件中使用

.div {
   
  color: $primary-color;
  background-color: $success-color;
}

统一请求封装

在src文件夹下，新建http文件夹，在http文件夹下新增index.ts，config.ts，core.ts，types.d.ts，utils.ts

core.ts

import Axios, {
    AxiosRequestConfig, CancelTokenStatic, AxiosInstance } from "axios";
import NProgress from 'nprogress'
import {
    genConfig } from "./config";
import {
    transformConfigByMethod } from "./utils";
import {
   
  cancelTokenType,
  RequestMethods,
  HttpRequestConfig,
  HttpResoponse,
  HttpError