vite項目配置、安裝插件使用笔记

1、安装sass(Vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持)

cnpm i sass -D

2、安装tailwindcss

//1、安装 Tailwind 以及其它依赖项
cnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest

//2、生成您的 tailwind.config.js 和 postcss.config.js 文件：
npx tailwindcss init -p

//3、配置 Tailwind 来移除生产环境下没有使用到的样式声明
  // tailwind.config.js
  module.exports = {
   // purge: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

//4、在您的 CSS 中引入 Tailwind styles/index.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

//5、在main.ts 中引入
import '@/styles/index.scss'

3、安装element-plus

 1、安装

cnpm install element-plus --save

 2、按需导入

cnpm install -D unplugin-vue-components unplugin-auto-import

3、vite配置

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

4、在main.ts中引入样式

import 'element-plus/dist/index.css'

 4、安装pinia

1、安装pinia

cnpm install pinia

2、 安装pinia持久化插件

cnpm i pinia-plugin-persist

3、使用 

main.ts引入

import piniaPluginPersist from 'pinia-plugin-persist';
store.use(piniaPluginPersist)
const app=createApp(App)
app.use(store).use(router).mount('#app')

1、新建store/index.ts

import { createPinia } from 'pinia'
//pinia 持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

 2、新建user.ts

import { defineStore } from  'pinia'
import { ElLoading } from 'element-plus'
type Res = {
    nickname:string,
    age:number
}
const Login = ()=>{
    return new Promise<Res>((resolve,reject)=>{
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
        setTimeout(() => {
            resolve({
                nickname:'张三',
                age:22
            })
            loading.close()
        }, 5000);
    })
}
export const userStore = defineStore('user',{
    state:()=>{
        return {
           nickname:'',
           age:0
        }
    },
    getters:{
        
    },
    actions:{
        async getUserInfo(){
            const res = await Login();
            this.nickname=res.nickname;
            //this.age=res.age;
            //调用其他actions
            this.setAge(res.age)
        },
        setAge(age:number){
            this.age=age
        }
    },
    persist:{
        enabled:true,
        strategies:[
            {
                storage:localStorage,paths:['nickname']
            }
        ]
    }
})

3、使用

<template>
 <h1>用户组件</h1>
 <h2>昵称{{nickname}}--年龄{{age}}</h2>
 <el-button type="primary" size="large" @click="getUserInfo">获取用户信息</el-button>
 
</template>
<script setup lang='ts'>
import { ref,reactive} from  'vue'
import { userStore } from '../store/user';
import { storeToRefs } from 'pinia';
const user = userStore()
let {nickname,age} = storeToRefs(user)
const getUserInfo = ()=>{
    user.getUserInfo()
}
</script>
<style lang='scss' scoped>
</style>

5、配置别名

1、在vite.confing.ts中配置

import path  from 'path';
export default defineConfig({
  resolve:{
    alias:{
      "@": path.resolve(__dirname, "src"),
    }
  },
}

2、在tsconfig.json中配置

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "types": ["element-plus/global"],
    "baseUrl": ".",
    "paths": {
      "@/*":["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3、使用

import { createRouter,createWebHashHistory } from "vue-router";
const routes=[
    {
        path:'/',
        redirect:'/home'
    },
    {
        name:'home',
        path:'/home',
        component:()=>import('@/views/Home.vue')
    },
    {
        name:'about',
        path:'/about',
        component:()=>import('@/views/About.vue')
    },
]


const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })
 export default router

6、配置环境变量

1、在根目录下新建 .env.development 、.env.production文件

.env.development

#开发环境下的配置文件
NODE_ENV = 'development'
#基础请求路径
VITE_APP_BASE_API="/api"
VITE_APP_TITLE="开发环境"

.env.production

#生产环境下的配置文件
NODE_ENV = 'production'
#基础请求路径
VITE_APP_BASE_API="/api-prod"
VITE_APP_TITLE="生产环境"

2、添加ts智能提示

在src下env.d.ts文件

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_APP_BASE_API: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

 

 

3、使用

1、在组件中使用

console.log(import.meta.env.VITE_APP_BASE_API,import.meta.env.VITE_APP_TITLE)