https://www.toutiao.com/article/7343595947081450036
使用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
配置@别名
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
},
},
})
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" }]
}
这时候path报错未找到模块 安装下面的依赖
@types/node 是一个 TypeScript 类型定义文件的包,主要用于提供 Node.js API 的类型定义
pnpm install @types/node --save-dev
项目格式化工具 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',
}
安装sass
pnpm install sass -D
删除 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%;
}
common文件定义公共样式
index.scss
@import './reset.scss'; // 初始化样式scss
@import './common.scss'; // 公共样式scss
在main.ts中引入
import { createApp } from 'vue'
import '@/styles/index.scss' // 全局样式
import App from './App.vue'
createApp(App).mount('#app')
安装路由 Vue Router 4.x
pnpm i vue-router@4
在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;
在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");
新建views/login/index.vue 文件
修改app.vue
<template>
<router-view></router-view>
</template>
这样就可以访问 http://localhost:5173/#/login
安装pinia
pnpm i pinia
pnpm i pinia-plugin-persistedstate // 数据持久化插件
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
在main.ts引入
import pinia from '@/store' // 注册Pinia
app.use(pinia)
在modules下面的文件在后面登录会涉及到
安装 element-plus
pnpm i element-plus
在main.ts引入
import ElementPlus from 'element-plus' // ElementPlus
import 'element-plus/dist/index.css' // ElementPlus样式
app.use(ElementPlus)
封装axios
pnpm i axios
新建utils/request.ts
request.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;
文档更新时间: 2024-04-12 07:09 作者:admin