vue3.2 setup语法糖+vite+tailwindcss+elment-plus 构建一个后台管理

jpruby
995 阅读2分钟

vue3.2 setup语法糖+vite+tailwindcss+elment-plus 构建一个后台管理

本文会持续更新请收藏关注 源码获取请私信我

技术栈

  • vite2
  • vue3
  • ts
  • pinia
  • vue-router
  • element-plus
  • tailwindcss
  • ##--react

目标： 管理模板

1、起始，项目搭建！

vue-router yarn add vue-router@4

vue-router ts写法 index

 import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHashHistory } from 'vue-router'
 ​
 const routes: RouteRecordRaw[] = []
 // vite2 新语法特性
 const modules = import.meta.globEager('./module/*.ts')
 for (const path in modules) {
   routes.push(...modules[path].default)
 }
 ​
 const router = createRouter({
   history: createWebHashHistory(),
   routes: routes,
 })
 ​
 export default router
 ​

module 的写法 modlule 模块下的

 import type { RouteRecordRaw } from 'vue-router'
 ​
 const routes: RouteRecordRaw[] = [
   {
     path: '/admin',
     component: () => import('../../pages/Admin.vue'),
   },
 ]
 ​
 export default routes
 ​
pinia 配置 yarn add pinia

官网 Home | Pinia (vuejs.org)

全局引入main.ts

 import { createPinia } from 'pinia'
 ​
 app.use(createPinia())

store 文件夹下实例

 import { createPinia } from 'pinia'
 import { createPinia } from 'pinia'
 import { defineStore } from 'pinia'
 ​
 const useCountStore = defineStore({
   id: 'count',
   // arrow function recommended for full type inference
   state: () => ({
     num: 1,
   }),
   actions: {
     increment() {
       this.num++
     },
   },
 })
 ​
 //store
 const instance = useCountStore()
 ​
 // save
 instance.$subscribe((_, state) => {
   localStorage.setItem('count-store', JSON.stringify({ ...state }))
 })
 //getter
 let old = localStorage.getItem('count-store')
 if (old) {
   instance.$state = JSON.parse(old)
 }
 ​
 export default useCountStore
 ​

使用

 <script lang="ts" setup="">
   import useCountStore from '../store/modules/useCountStore'
   import { storeToRefs } from 'pinia'
 ​
   const store = useCountStore()
   const refCount = storeToRefs(store)
   const { num } = storeToRefs(store)
   store.num++
   store.increment()
 </script>
 ​
 <template>
   <div class="container">
     {{ store.num }}
     {{ refCount.num }}
     {{ num }}
     <button @click="store.increment()">点我加一</button>
   </div>
 </template>
 ​
 <style lang="scss" scoped></style>
 ​

效果

image-20220430101100210

别名的配置 vite alias

这里必须安装一个依赖 yarn add @types/node@16.13.0 -D

注意版本号尽量和自己的node的版本号一致

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import * as path from 'path'
 ​
 //这里必须安装一个依赖 yarn add @types/node@16.13.0 -D
 const resolve = (p: string) => {
   return path.resolve(__dirname, p)
 }
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
       '@': resolve('./src'),
     },
   },
   plugins: [vue()],
 })

IDE进行联合

tsconfig.json 添加以下内容解决

  "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }
3、tailwindcss + element-plus

配置、安装

tailwind官网 Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS
 npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p

sass 也别忘记装了

 npm install --save-dev sass

装完配置一下

  1. Configure your template paths

     module.exports = {
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 }

  2. Add the Tailwind directives to your CSS

    Create a ./src/index.css file and add the @tailwind directives for each of Tailwind’s layers.

    index.css

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

  3. Import the CSS file

    Import the newly-created ./src/index.css file in your ./src/main.js file.

    main.js

     import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
 ​
 createApp(App).mount('#app')
element-plus
 # Yarn
 $ yarn add element-plus

局部安装

按需导入#

您需要使用额外的插件来导入要使用的组件。

自动导入推荐#

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

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()],
     }),
   ],
 }

iconify

官网:Iconify Icon Sets Package

 yarn add @iconify/iconify
 yarn add vite-plugin-purge-icons @iconify/json -D

 //vite.config.ts
 ​
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import * as path from 'path'
 //element 的按需加载
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 //iconify
 import PurgeIcons from 'vite-plugin-purge-icons'
 ​
 //这里必须安装一个依赖 yarn add @types/node@16.13.0 -D
 const resolve = (p: string) => {
   return path.resolve(__dirname, p)
 }
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
       '@': resolve('./src'),
     },
   },
   plugins: [
     vue(),
     AutoImport({
       resolvers: [ElementPlusResolver()],
     }),
     Components({
       resolvers: [ElementPlusResolver()],
     }),
     PurgeIcons({
       content: ['**/*.html', '**/*.js', '**/*.vue'],
     }),
   ],
 })

main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
 import '@/assets/styles/app.scss'
 import '@purge-icons/generated' // <-- this
 ​
 createApp(App).use(router).use(createPinia()).mount('#app')
 ​

后台模板首页搭建

\

avatar
文章
阅读
粉丝