搭建vue3项目

星光酱42403
123 阅读1分钟

pnpm 命令

pnpm create vue@latest

  cd vue-ts
   pnpm install
   pnpm format
   pnpm dev

 git init && git add -A && git commit -m "initial commit"

安装sass

pnpm add sass -D
  1. 项目配置示例‌
  • Vue项目需在main.js导入全局样式：import './assets/main.scss'
  • React+Vite项目可直接使用.scss文件无需额外配置

安装element plus

pnpm install element-plus

main.ts文件内引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

tsconfig.json  

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

tsconfig.node.json  

"types": ["node", "element-plus/global"],

按需引入

pnpm add  -D unplugin-vue-components unplugin-auto-import

vite  vite.config.ts

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

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

webpack   webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

全局配置

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入:

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

安装 unocss

pnpm add -D unocss

安装插件：

vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建 uno.config.ts 文件：

uno.config.ts

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

将 virtual:uno.css 添加到你的主入口中：

main.ts

import 'virtual:uno.css'

变体组转换器

pnpm add -D @unocss/transformer-variant-group

import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

有用法

<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />

转变为

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

指令转换器

pnpm add -D @unocss/transformer-directives

import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

用法

@apply

.custom-div {
  @apply text-center my-0 font-medium;
}

转变为

.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}

本地代理

vite.config.ts

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueDevTools from 'vite-plugin-vue-devtools'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vite.dev/config/export default defineConfig({  plugins: [    vue(),    vueDevTools(),    AutoImport({      resolvers: [ElementPlusResolver()],    }),    Components({      resolvers: [ElementPlusResolver()],    }),  ],  server: {    proxy: {      '/api': {        target: 'http://test.com/api',        changeOrigin: true,        // rewrite: (path) => path.replace(new RegExp('^/api'), '')        rewrite: (path) => path.replace(/^\/api/, ''),      },    },  },  resolve: {    alias: {      '@': fileURLToPath(new URL('./src', import.meta.url)),    },  },})

.env.development

VITE_APP_BASE_API='/api'

.env.production

VITE_APP_BASE_API='http://test.com'

axios.ts 安装

pnpm i axios

请求封装

import axios from "axios"import { toast } from '~/composables/util'import { getToken } from '~/composables/auth'import store from "./store"const service = axios.create({    baseURL:import.meta.env.VITE_APP_BASE_API,    // baseURL:'http://ceshi13.dishait.cn',})// 添加请求拦截器service.interceptors.request.use(function (config) {    // 往header头自动添加token    const token = getToken()    if(token){        config.headers["token"] = token    }    return config;  }, function (error) {    // 对请求错误做些什么    return Promise.reject(error);  });// 添加响应拦截器service.interceptors.response.use(function (response) {    // 对响应数据做点什么    return response.request.responseType == "blob" ? response.data : response.data.data;  }, function (error) {    const msg = error.response.data.msg || "请求失败"        if(msg == "非法token，请先登录！"){      store.dispatch("logout").finally(()=>location.reload())    }    toast(msg,"error")    return Promise.reject(error); })export default service

安装vueuse

pnpm  i @vueuse/integrations

安装 universal-cookie

pnpm i universal-cookie

封装 cookie 方法

import { useCookies } from '@vueuse/integrations/useCookies'const TokenKey = "admin-token"const cookie = useCookies()// 获取tokenexport function getToken(){    return cookie.get(TokenKey)}// 设置tokenexport function setToken(token){    return cookie.set(TokenKey,token)}// 清除tokenexport function removeToken(){    return cookie.remove(TokenKey)}
avatar
文章
阅读
粉丝