vue3+vite+ts+pinia+router4 （一）vue3项目初始化

使用vite搭建项目

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

话不多说直接来

npm install -g pnpm 
pnpm create vite my-vue3-ts --template vue-ts
cd my-vue3-ts
pnpm install
pnpm run dev
1
2
3
4
5

配置@别名

vite.config.ts

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('./src'), // @代替src
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "baseUrl": ".", // 查询的基础路径
    "paths": { "@/*": ["src/*"] } // 路径映射,配合别名使用
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
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

这时候path报错未找到模块 安装下面的依赖

@types/node 是一个 TypeScript 类型定义文件的包，主要用于提供 Node.js API 的类型定义

pnpm install @types/node --save-dev
1

项目格式化工具 Prettier - Code formatter

在vscode中安装插件

配置 .prettierrc.cjs

module.exports = {
  // 一行最多多少字符
  printWidth: 200,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾是否需要有分号。false 表示换行时，不要有分号，true 表示换行时，要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 在 JSX 中使用单引号
  jsxSingleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // 换行符使用 lf
  endOfLine: 'lf',
  // 强制在括号内使用一致的空格
  bracketSpacing: true,
  // 箭头函数，尽可能不用括号
  arrowParens: 'avoid',
  // 尾随逗号, 'none': 不要有尾随逗号, 'es5': 在 ES5 模式下要有尾随逗号, 'all': 在所有情况下都要有尾随逗号
  trailingComma: 'all',
  // 使用默认的折行标准
  proseWrap: 'preserve',
}

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

安装sass

pnpm install sass -D
1

删除 style.css

在src下新建styles

reset.scss

/* 
  Reset style sheet
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  padding: 0;
  margin: 0;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

common文件定义公共样式

index.scss

@import './reset.scss'; // 初始化样式scss
@import './common.scss'; // 公共样式scss
1
2

在main.ts中引入

import { createApp } from 'vue'
import '@/styles/index.scss' // 全局样式
import App from './App.vue'
createApp(App).mount('#app')
1
2
3
4

安装路由 Vue Router 4.x

pnpm i vue-router@4
1

在src中新建router

router/index.ts

import {
  RouteRecordRaw,
  Router,
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
let routes: RouteRecordRaw[] = [
  {
    path: "/login",
    name: "Login",
    component: () => import("@/views/login/index.vue"),
  },
];
// 路由实例
// history
// const router: Router = createRouter({ history: createWebHistory(), routes });
// hash #
const router: Router = createRouter({
  history: createWebHashHistory(),
  routes,
});

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

在main.ts中挂载router

import { createApp, App } from "vue";
import "@/styles/index.scss"; // 全局样式
import APP from "./App.vue";

const app: App = createApp(APP); // 创建vue实例
import router from "@/router"; // 注册路由

app.use(router)
app.mount("#app");
1
2
3
4
5
6
7
8
9

新建views/login/index.vue 文件

修改app.vue

<template>
  <router-view></router-view>
</template>
1
2
3

这样就可以访问 http://localhost:5173/#/login

安装pinia

pnpm i pinia
pnpm i pinia-plugin-persistedstate // 数据持久化插件
1
2

store/index.ts

import { createPinia } from 'pinia'
const pinia = createPinia()
// pinia-plugin-persistedstate 插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)
export default pinia
1
2
3
4
5
6

在main.ts引入

import pinia from '@/store' // 注册Pinia
app.use(pinia)
1
2

在modules下面的文件在后面登录会涉及到

安装 element-plus

pnpm i element-plus
1

在main.ts引入

import ElementPlus from 'element-plus' // ElementPlus
import 'element-plus/dist/index.css' // ElementPlus样式
app.use(ElementPlus)
1
2
3

封装axios

pnpm i axios
1

新建utils/request.ts

reques.ts

简单的封装了axios

import axios from "axios";
import type {
  AxiosInstance,
  AxiosResponse,
  InternalAxiosRequestConfig,
} from "axios";
const instance: AxiosInstance = axios.create({
  baseURL: "", // 基础 URL
  timeout: 50000, // 请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
  // AxiosRequestConfig 类型CreateAxiosDefaults不能赋值给AxiosRequestConfig
  (config: InternalAxiosRequestConfig) => {
    // 在请求发送之前可以做一些处理，比如添加请求头等
    return config;
  },
  (error: any) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 响应拦截器
instance.interceptors.response.use(
  (response: AxiosResponse) => {
    const { data } = response;
    if (data.code === 401) {
    }
    if (data.code !== 200) {
      return Promise.reject(data);
    }
    // 对响应数据做点什么
    return data;
  },
  (error: any) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
export default instance;
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

到时候数据的话 到时候会手撸一个node+express+mongodb简单的后台服务 敬请期待！！

最后

欢迎 点赞 收藏 有问题欢迎留言评论！！