从零开始搭建Vite+Vue3的后台管理系统

皇家蓝

2023-08-12 953 阅读1分钟

由于公司一直没有启用新项目，一直用的是vue2的技术栈，决定搭一个vue3的demo项目可以快速应用在公司新项目的各个场景里。

也正好通过写文章来记录一下踩到的坑，和技术点，之后也方便回溯。

说干就干，现在都用vite+pinia+vue3的全家桶，先从零创建一个项目。

代码仓库：royal-vue3-project: vite+vue3+pinia+ts 后台管理系统 - Gitee.com

创建项目

    npm create vite@latest

添加依赖

添加一些vue3项目常用插件，顺便记录下插件的作用

Pinia

pinia是vue3项目里替代vuex的全局的状态管理方案，vue2也可以使用，使用简洁了不少，去掉了vuex中冗余的mutation,从action里可以直接操作state。

按需导入

unplugin-auto-import：为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。

unplugin-vue-components：Vue 的按需组件自动导入。

//vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
plugins: [
  AutoImport({
    resolvers: [
      ElementPlusResolver(),
    ]
  }),
  Components({
    resolvers: [
      ElementPlusResolver({
        importStyle: mode === 'development' ? false : 'less'
      })
    ]
  })
 ]

vite-plugin-vue-setup-extend:为setup属性的script标签添加name

vue3里有setup属性的script标签无法自己添加name，写起来就非常冗余。


<script lang="ts">
  import { defineComponent, onMounted } from 'vue'

  export default defineComponent({
    name: 'firstPage'
  })
  </script>

  <script lang="ts" setup>
  onMounted(() => {
    console.log('mounted')
  })
</script>

这个插件可以直接在script标签上设置name：

    <script lang="ts" setup name="firstPage"> 
        import { onMounted } from 'vue' 
        onMounted(() => { console.log('mounted') }) 
    </script>

vueuse是提供了很多工具的插件库，下面是官网给的几个例子，比如获取光标坐标，一键换肤，本地存储

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core' 
export default { 
    setup() { 
        // tracks mouse position 
        const { x, y } = useMouse() 

        // is user prefers dark theme 
        const isDark = usePreferredDark() 

        // persist state in localStorage 
        const store = useLocalStorage(
            'my-storage', 
            { name: 'Apple', color: 'red', }, 
        ) 
        return { x, y, isDark, store } 
    }, 
}