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

原链接：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
1
2
3
4
5
6
7
8
9
10
11

这里我们想要直接生成一个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
1
2
3
4
5
6

至此，一个最纯净的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'),
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在修改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"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

配置路由

安装

# npm
npm install vue-router@4

# yarn
yarn add vue-router@4
1
2
3
4
5

在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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

修改入口文件 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);
1
2
3
4
5
6
7
8
9
10
11
12
13

更多的路由配置可以移步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; 
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

配置 css 预处理器 scss

安装

yarn add sass-loader --dev
yarn add dart-sass --dev
yarn add sass --dev
1
2
3

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

$white: #FFFFFF;
$primary-color: #1890ff;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;
1
2
3
4
5
6

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

css: {
   
  preprocessorOptions: {
   
    scss: {
   
      modifyVars: {
   },
      javascriptEnabled: true,
      // 注意这里的引入的书写
      additionalData: '@import "@/style/varibles.scss";'
    }
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在组件中使用

.div {
   
  color: $primary-color;
  background-color: $success-color;
}
1
2
3
4
5

统一请求封装

在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
1
2
3
4
5
6
7
8
9
10