Vue3+TS+Vite+Pinia 搭建项目

搭建项目代码

npm i vite -g

npm create vite@latest

vue配置根目录详细步骤(用@代表src目录)

安装

加载 path 依赖

npm i path
npm i @types/node

配置

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    },
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

主要是添加

"baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    },

此时，已经可以完成编译，将导入地址调整为 @/components/HelloWorld.vue，可以看到界面可以正常展示，说明 @ 符号已经生效。

但是如果有使用 @ 导入 .ts 文件时，VS Code 会提示找不到路径，虽然不影响编译，但是看着难受。

配置 tsconfig.json 文件，在 compilerOptions 选择中增加 baseUrl 及 paths 配置

{
    "compilerOptions": {
        // ...省略其它配置项
        "baseUrl": ".",
        "paths": {
            "@/*": [ "src/*" ]
        }
    }
}

normalize.css

安装

npm i normalize.css

引入

// 在 main.js 中引入import’normalize.css’;

reset.css

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,
font,
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,
caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

table,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

button,
input,
textarea {
    margin: 0;
    padding: 0;
}

/* form elements 表单元素 */body,
button,
input,
select,
textarea {
    font: normal 12px/1.5'\5FAE\8F6F\96C5\9ED1', tahoma, arial;
}

/*设置的字体，行高*/h1,
h2,
h3,
h4,
h5,
h6,
th {
    font-size: 100%;
    font-weight: normal;
}

/*重置标题*/address,
cite,
dfn,
var {
    font-style: normal;
}

/* 将斜体扶正 */code,
kbd,
pre,
samp {
    font-family: 'courier new', courier, monospace;
}

/* 统一等宽字体 */
small {
    font-size: 12px;
}

/* 小于 12px 的中文很难阅读，让 small 正常化 */ul,
ol {
    list-style: none;
}

/* 重置列表元素 */button,
input[type="submit"],
input[type="button"] {
    cursor: pointer;
}

input[type="radio"],
input[type="checkbox"],
input[type="submit"],
input[type="reset"] {
    vertical-align: middle;
    cursor: pointer;
    border: none;
}

/** 重置文本格式元素 **/a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:focus {
    outline: 0;
}
sup {
    vertical-align: text-top;
}

/* 重置，减少对行高的影响 */
sub {
    vertical-align: text-bottom;
}

/** 重置表单元素 **/legend {
    color: #000;
}

/* for ie6 */fieldset,
img {
    border: 0;
}

/* img 搭车：让链接里的 img 无边框 */button,
input,
select,
textarea {
    background: transparent;
    font-size: 100%;
    outline: 0;
}


/* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 */table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    vertical-align: middle;
}


/** 重置表格元素 **//* 重置 HTML5 元素 */article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    display: block;
    margin: 0;
    padding: 0;
}

/*回复标签重置*/blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    display: none;
}

引入

// 在 main.js 中引入import’@/assets/css/reset.css’;

vue-router 路由配置

1. 安装

npm i vue-router@4

2. 配置

@/router/index.ts

//在vue-router引入createRouter和createWebHashHistory
import { createRouter, createWebHashHistory } from "vue-router";
//引入组件，及要跳转到的页面，也可以直接写在routes中的component里
import Login from '@/views/Login/index.vue'
import Register from '@/views/Register/index.vue'

//定义路由，每个路由都需要映射到一个组件。
const routes = [
    {
        path: '/',
        component: Login
    },
    {
        path: '/register',
        component: Register
    },
]

//创建路由实例并传递routes配置
const router = createRouter({
    //内部提供了history模式的实现。为了简单起见，我们在这里使用hash模式。
    history: createWebHashHistory(),
    routes, //'routes: routes' 的缩写
})

//暴露出router实例。方便在其他组件更改路由
//这样可以在任意组件中以 this.$router的形式访问它，并且以this.$route的形式访问当前路由
export default router;

@/main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

使用

<script setup lang="ts">

</script>

<template>
  <div>
    <router-link to="/">TO login</router-link>
    <hr>
    <router-link to="/register">TO register</router-link>
  </div>
  <router-view></router-view>
</template>

<style scoped></style>

Pinia

安装

npm install pinia

引用

import { createPinia } from "pinia"; createApp(App).use(router).use(createPinia()).mount('#app')

根目录新建store/index.js中写入

import { defineStore } from 'pinia'
 
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{},
  actions:{}
})

组件使用

<template>
    <div>
        <h1>Resiter!!!!</h1>
        <p>{{ store.counter }}</p>
    </div>
</template>
<script setup>
import { useStore } from '@/store'
const store = useStore();
</script>

Axios

详细地址

https://blog.csdn.net/weixin_59916662/article/details/127336840

安装

npm i axios

使用

创建src/utils/request.ts

import axios from 'axios'
// 创建axios实例
const request = axios.create({
    baseURL: '',// 所有的请求地址前缀部分(没有后端请求不用写)
    timeout: 80000, // 请求超时时间(毫秒)
    withCredentials: true,// 异步请求携带cookie
    // headers: {
    // 设置后端需要的传参类型
    // 'Content-Type': 'application/json',
    // 'token': x-auth-token',//一开始就要token
    // 'X-Requested-With': 'XMLHttpRequest',
    // },
})

// request拦截器
request.interceptors.request.use(
    config => {
        // 如果你要去localStor获取token,(如果你有)
        // let token = localStorage.getItem("x-auth-token");
        // if (token) {
        //添加请求头
        //config.headers["Authorization"]="Bearer "+ token
        // }
        return config
    },
    error => {
        // 对请求错误做些什么
        Promise.reject(error)
    }
)

// response 拦截器
request.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data
    },
    error => {
        // 对响应错误做点什么
        return Promise.reject(error)
    }
)
export default request

Sass

安装

npm i sass sass-loader -D

配置

在vite.config.ts中配置css预处理器

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import { resolve } from "path"; // 引入方法

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [ // 配置 @ 指代 src
      {
        find: "@",
        replacement: resolve(__dirname, "./src"),
      },
    ],
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/style/global.scss";',
      },
    }
  }
});

创建全局样式文件

我们这里默认加载global.scss中的样式，那么我们就需要创建一个这样的文件：

$primary-color: red; // 主题色

使用

<template>
    <div>
        <h1>Resiter!!!!</h1>
        <p>{{ store.counter }}</p>
    </div>
</template>
<script setup>
import { useStore } from '@/store'
const store = useStore();
</script>
<style scoped lang="scss">
div {
    color: $primary-color; // 主题色
}
</style>