赞
踩
npm create vite@latest
? Project name: vue3-ts
- ? Select a framework: » - Use arrow-keys. Return to submit.
- vanilla
- > vue
- react
- preact
- lit
- svelte
- ? Select a variant: › - Use arrow-keys. Return to submit.
- JavaScript
- ❯ TypeScript
- Customize with create-vue ↗
- Nuxt ↗
下一步就是创建完了。
vue add vuetify
- ✔ Successfully installed plugin: vue-cli-plugin-vuetify
-
- ? Choose a preset:
- Vuetify 2 - Configure Vue CLI (advanced)
- Vuetify 2 - Vue CLI (recommended)
- Vuetify 2 - Prototype (rapid development)
- ❯ Vuetify 3 - Vite (preview)
- Vuetify 3 - Vue CLI (preview)
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
npm run dev
在App.vue
文件里:
- <template>
- <v-app :theme="theme">
- <v-main>
- <v-btn @click="toggleTheme">点击切换主题</v-btn>
- <HelloWorld/>
- </v-main>
- </v-app>
- </template>
-
- <script setup lang="ts">
- import {ref} from 'vue'
- import HelloWorld from './components/HelloWorld.vue'
-
- const theme = ref('light')
- const toggleTheme = () => theme.value = theme.value === 'light' ? 'dark' : 'light'
- </script>
我们可以在vuetify.ts
文件里面配置主题颜色:
- //vuetify.ts
- import { createVuetify } from 'vuetify'
-
- const light = {
- dark: false,
- colors: {
- background: '#808080',
- surface: '#6200EE',
- primary: '#6200EE',
- 'primary-darken-1': '#3700B3',
- secondary: '#03DAC6',
- 'secondary-darken-1': '#018786',
- error: '#B00020',
- info: '#2196F3',
- success: '#4CAF50',
- warning: '#FB8C00',
- }
- }
-
- const dark = {
- dark: true,
- colors: {
- }
- }
-
- export default createVuetify({
- theme: {
- defaultTheme: 'light',
- themes: {
- light,
- dark
- }
- }
- })
效果: