vue3：vue3+vite+ts+pinia

一、背景

记录一套技术方案。

二、项目基础

2.1、创建项目

yarn create vite

 输入名字后，这里出现了几个选项，不清楚都是干啥的，下来研究

 

选择后完成

2.2、vite.config.ts 配置alias：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

2.3、安装element-plus

https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8

2.4、配置环境变量：

CSDN

2.5、配置router

vite2+vue3+TS+vue-router_ChenNianA的博客-CSDN博客

https://www.jianshu.com/p/5f0301bca0ed

2.6、安装husky

【Vue】EsLint+Husky 实现代码提交时自动校验_夜雨Gecer的博客-CSDN博客_husky vue

2.7、安装sass

安装后重启项目

npm install sass sass-loader -D

经过测试不需要安装sass-loader，安装了会报错

2.8、使用pinia

学习Pinia 第一章（介绍Pinia）_小满zs的博客-CSDN博客

2.9、使用cookie

安装cookie

pnpm add @types/js-cookie

pnpm add js-cookie

页面引入

import cookie from 'js-cookie'

使用cookie