创建项目遇到的问题

下载vite创建项目

# 使用 npm
npm create vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
pnpm create vite

一. 在路由中添加引入文件

const router = createRouter({
    history: createWebHashHistory('./'),
    routes: [
        {
            path: '/login',
            name: 'login',
            component: () => import('@/pages/login/login.vue')
        }
    ]
});

需要配置@ 配置步骤

在vite.config.ts 中添加

"compilerOptions":{
    "baseUrl":"./",
    "paths":{
      "@/*": ["./src/*"],
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, "./src")
    }
  }

在 vite + typescript 中配置路径别名时需要注意, 直接使用__dirname的话, typescript 会报错cannot find name '__dirname', 这时候需要拉取依赖

npm install -D @types/node

在vscode 中import('@/pages/login/login.vue') 会报红线# Cannot find module ‘@/views/test/index.vue‘ or its corresponding type declarations.ts(2307)的原因

解决办法：在src 目录下创建 vue-shims.d.ts 文件内容为

declare module '*.vue' {
    import { Component } from 'vue';
    const component: Component;
    export default component;
  }

下载element-plus 并在项目中引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

在项目中从 vue 引入内容报红线

Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘, or to add ali

解决办法：

在项目中引用 ts 文件时报红线如Cannot find module '@/stores/user.ts' or its corresponding type declarations.ts

解决办法：

暂时没解决，去掉 @ 后使用 ../ 的方式不出现红线
在tsconfig.json 文件中配置 @

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

项目中使用 scss 全局变量

定义一个 scss 文件
添加解析全局变量插件

npm i @vitejs/plugin-vue

配置scss全局变量

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default () => {
    return defineConfig({
        plugins: [
          vue(),
        ],
        css: {
            preprocessorOptions: {
              scss: {
                additionalData: '@import "./src/var.scss";' // 加载全局样式，使用scss特性
              }
            },
        }
    })
}

提示 # An import path can only end with a ‘.ts‘ extension when ‘allowImportingTsExtensions‘ is enabled.

表示引入的 ts 文件扩展名可不写

vite 自定义环境变量

Vite内置了dotenv这个第三方库， dotenv会自动读取.env文件，在根目录下创建 .env .env.development .env.production

默认情况下

npm run dev 会加载 .env 和 .env.development 内的配置
npm run build 会加载 .env 和 .env.production 内的配置
mode 可以通过命令行 --mode 选项来重写。

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

我们在项目的根目录下，创建.env文件，写入测试内容；

HELLO = "小伙子，我是base数据" VITE_HELLO = "小伙子，我是base数据" 创建 .env.development 文件，写入测试内容；

HI = "小伙子，我是development数据" VITE_HI = "小伙子，我是development数据" 创建 .env.production 文件，写入测试内容；

MD = "小伙子，我是production数据" VITE_MD = "小伙子，我是production数据" 然后再main.js中打印一下

加载自定义的.env文件

假如，我们自定义一个test环境，想加载.env.test内的环境变量，要怎么做吗?

"scripts": {
    "test": "vite --mode test",
    "dev": "vite",
    "build": "vite build"
  },

根目录创建.env.test文件

env 文件有多个的时候可以创建env 目录，将env 文件放入文件目录中，在 vite.config.js中配置

import { defineConfig } from "vite";
export default defineConfig( {
  envDir:"env"
});

更改环境变量的VITE_前缀

使用envPrefix配置来改变以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

类型： string | string[]
默认： VITE_

piain 使用以及持久化

参考文档

安装

yarn add pinia
# or
npm i pinia

在main.js中挂载pinia

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia'
const pinia = createPinia()

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

新建文件store/counter.js

import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
   
  },
  actions: {
    
  },
})

export default useCounterStore

在组件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h1>根组件---{{ counter.count }}</h1>
</template>

<style></style>

如果直接从pinia中解构数据，会丢失响应式，使用storeToRefs可以保证解构出来的数据也是响应式的

<script setup>
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'

const counter = useCounterStore()
// 如果直接从pinia中解构数据，会丢失响应式
const { count, double } = counter

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

store模块化

import useUserStore from './user'
import useCounterStore from './counter'

// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

pinia 数据持久化

yarn add pinia-plugin-persistedstate
or
npm i  pinia-plugin-persistedstate

使用插件 在main.ts中注册

import { createApp } from "vue";
import App from "./App.vue";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);

模块开启持久化

const useHomeStore = defineStore("home",{
  // 开启数据持久化
  persist: true
  // ...省略
});

可以用配置式写法，按需缓存某些模块的数据。

import { defineStore } from 'pinia'

export const useStore = defineStore('main', s{
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  // 所有数据持久化
  // persist: true,
  // 持久化存储插件其他配置
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'storekey',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ['nested.data'],
  },
})

vue3 + vite 项目笔记