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

配置@别名

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

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;

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

最后

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