Vite创建Vue3项目(二)——配置别名+Vue-Router+Pinia+Sass

1.路径别名配置

npm install @types/node --save-dev

在vite.config.ts文件中加入

import { resolve } from 'path'

export default defineConfig({
  plugins: [...],
  resolve: {
    // 配置路径别名
    alias: [
      {
        find: '@', //指向的是src目录
        replacement: resolve(__dirname, 'src')
      }
    ]
  }
})

在tsconfig.json文件中的compilerOptions下加入即可

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

2.安装vue-router

npm install vue-router@4

项目根目录下创建router文件夹，同时在文件夹内创建index.ts文件

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/components/HelloWord.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在mian.ts中引入并使用它

import router from '@/router'
createApp(App).use(router).mount('#app')

在App.vue文件template中加入<router-view />

<template>
  <router-view />
</template>

3.安装Pinia

3.1.Pinia安装部分

npm install pinia

在根目录创建store文件夹，同时在文件夹内创建index.ts文件

import { createPinia } from 'pinia'

const store = createPinia()

export default store

在mian.ts中引入并使用它

import store from '@/store'
createApp(App).use(router).use(store).mount('#app')

3.2.Pinia的基本用法

pinia的状态管理，不同状态可以区分不同文件

demo1.ts中添加state

import { defineStore } from 'pinia'
export const useDemo1 = defineStore('demo1', {
  state: () => {
    return {
      count: 0
    } as {
      count: number
    }
  }
})

读取state

<template>
  <div @click="handler">
    数量：{{ demo1.count }}
    <button>点击次数加1</button>
  </div>
</template>

<script lang="ts" setup>
import { useDemo1 } from '@/store/demo1'

const demo1 = useDemo1()
const handler = (): void => {
  demo1.count++
}
</script>

<style scoped></style>

例子：

注意：pinia解构出来的state也是可以调用，但会失去响应式，需要toRef或者pinia自带storeToRefs

<template>
  <div @click="handler">
    数量：{{ count }}
    <button>点击次数加1</button>
  </div>
</template>

<script lang="ts" setup>
import { useDemo1 } from '@/store/demo1'
// import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'

//解构出来会失去响应式,需要使用toRef或storeToRefs
// let { count } = toRefs(useDemo1())
let { count } = storeToRefs(useDemo1())
const handler = (): void => {
  count.value++
}
</script>

<style scoped></style>

3.3.pinia的核心部分

state，getter，action（相当于：data、computed、methods）

“state”:

• 访问

//默认情况下，您可以通过 store 实例访问状态来直接读取和写入状态：
const demo1 = useDemo1()
demo1.count++

• 重置状态

//您可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值：
const demo1 = useDemo1()
demo1.$reset()

• 批量改变状态

// 调用 `$patch` 方法。 它允许您使用部分“state”对象同时应用多个更改
store.$patch({
  count: store.count + 1,
  name: 'Abalam',
})

• 替换整个state（几乎不用）

//通过将其 $state 属性设置为新对象来替换 Store 的整个状态
store.$state = { count: 666, name: 'Paimon' }

“getters”:

• 定义

import { defineStore } from 'pinia'
export const useDemo1 = defineStore('demo1', {
  state: () => {
    return {
      count: 1
    } as {
      count: number
    }
  },
  getters: {
    doubleCount: (state): number => state.count * 2
  }
})

• 调用

<template>
  <div>{{ demo1.doubleCount }}</div>
</template>

<script lang="ts" setup>
import { useDemo1 } from '@/store/demo1'

const demo1 = useDemo1()
</script>

<style scoped></style>

• 访问其他 getter

import { defineStore } from 'pinia'
export const useDemo1 = defineStore('demo1', {
  state: () => {
    return {
      count: 1
    } as {
      count: number
    }
  },
  getters: {
    doubleCount: (state): number => state.count * 2,
    doubleCountPlusOne(): number {
      // 自动完成 ✨
      return this.doubleCount + 1
    }
  }
})

• 将参数传递给 getter

export const useDemo1 = defineStore('demo1', {
  getters: {
   getPlusCount: state => {
     return (num: number): number => num + state.count
   }
  },
})

//页面中调用
<template>
  <div>{{ demo1.getPlusCount(5) }}</div>
</template>

<script lang="ts" setup>
import { useDemo1 } from '@/store/demo1'

const demo1 = useDemo1()

• 访问其他 Store 的getter

import { demo2 } from './demo2'

export const useDemo1 = defineStore('demo1', {
  state: () => ({
    // ...
  }),
  getters: {
    otherGetter(state) {
      const demo2 = demo2()
      return state.count + demo2.count
    },
  },
})

“action”:

• 定义

注意：actions可以是异步的

//Actions 相当于组件中的methods，可以使用defineStore()中的actions属性定义
import { defineStore } from 'pinia'
export const useDemo1 = defineStore('demo1', {
  state: () => {
    return {
      count: 1
    } as {
      count: number
    }
  },
  getters: {...},
  actions: {
    increment() {
      this.count++
    }
  }
})

• 调用

<template>
  <div @click="handler">{{ demo1.count }}</div>
</template>

<script lang="ts" setup>
import { useDemo1 } from '@/store/demo1'

const demo1 = useDemo1()
function handler(): void {
  demo1.increment()
}
</script>

<style scoped></style>

3.4.pinia本地持久化

安装pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

在store/index.ts中将插件添加到 pinia 实例上

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const store = createPinia()
store.use(piniaPluginPersistedstate)
export default store

在store/demo1.ts使用persist

import { defineStore } from 'pinia'
export const useDemo1 = defineStore('demo1', {
  state: () => {
    return {
      count: 1
    } as {
      count: number
    }
  },
  getters: {...},
  actions: {...},
  //persist: true,
  persist: {
    // 在这里进行自定义配置
    key: 'my-custom-key', // 这个 Store 将被持久化存储在 localStorage 中的 my-custom-key key 中
    storage: sessionStorage, // 默认值：localStorage 这个 store 将被持久化存储在 sessionStorage中
    paths: ['count'] // 指定 state 中哪些数据需要被持久化
  }
})

4.安装sass

//Vite 提供了对 `.scss`, `.sass`, `.less`, `.styl` 和 `.stylus` 文件的内置支持,所以直接安装即可
npm install sass -D

另外关于样式前缀补全Vite自身已经集成PostCSS，无需再次安装

我们这里可以安装一下 postcss-preset-env 插件（或者 autoprefixer 插件，但现在 postcss-preset-env 用得更多）

npm install postcss-preset-env -D

然后在vite.config.ts中加入

import postcssPresetEnv from 'postcss-preset-env'

export default defineConfig({
  css: {
    postcss: {
      plugins: [postcssPresetEnv]
    }
  }
})

这样重启下vite项目样式前缀补全就完成了，如果看到样式没有生效。最后package.json补充下

"browserslist": [
  "> 1%",
  "last 2 versions"
]

基本上就能看到了。