Vite Vue 2 WindiCSS Starter 项目教程

Vite Vue 2 WindiCSS Starter 项目教程

vite-vue2-windicss-starterVite - Vue 2 starter template using composition-api and windiCSS项目地址:https://gitcode.com/gh_mirrors/vi/vite-vue2-windicss-starter

1. 项目目录结构及介绍

vite-vue2-windicss-starter/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── router/
│   │   └── index.ts
│   ├── views/
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── .gitignore
├── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
├── vite.config.ts
└── windi.config.ts

目录结构说明

• public/: 存放静态资源文件，如favicon.ico。
• src/: 项目源代码目录。
  • assets/: 存放项目中使用的静态资源文件，如图片。
  • components/: 存放Vue组件。
  • router/: 存放Vue Router的配置文件。
  • views/: 存放页面级别的Vue组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
  • shims-vue.d.ts: 用于支持Vue文件的TypeScript类型定义。
• .gitignore: Git忽略文件配置。
• index.html: 项目的HTML入口文件。
• package.json: 项目的依赖管理文件。
• pnpm-lock.yaml: pnpm的锁定文件，用于确保依赖版本一致性。
• README.md: 项目的说明文档。
• tsconfig.json: TypeScript配置文件。
• vite.config.ts: Vite配置文件。
• windi.config.ts: WindiCSS配置文件。

2. 项目启动文件介绍

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import './assets/main.css';

createApp(App).use(router).mount('#app');

文件说明

• createApp(App): 创建Vue应用实例。
• use(router): 使用Vue Router。
• mount('#app'): 将应用挂载到HTML中的#app元素上。

3. 项目配置文件介绍

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import WindiCSS from 'vite-plugin-windicss';

export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
  ],
});

文件说明

• defineConfig: 定义Vite配置。
• plugins: 配置Vite插件。
  • vue(): 支持Vue 2的插件。
  • WindiCSS(): 支持WindiCSS的插件。

windi.config.ts

import { defineConfig } from 'windicss/helpers';

export default defineConfig({
  // WindiCSS配置
});

文件说明

• defineConfig: 定义WindiCSS配置。
• 该文件用于配置WindiCSS的各种选项，如主题、插件等。

通过以上内容，您可以快速了解并上手使用vite-vue2-windicss-starter项目。

vite-vue2-windicss-starterVite - Vue 2 starter template using composition-api and windiCSS项目地址:https://gitcode.com/gh_mirrors/vi/vite-vue2-windicss-starter