Vue3 + Vite 后台登录开发教程，elementplus，windicss，tailwind，前端，vue教程

-------------------------------------------------  创建项目步骤  -------------------------------------------------  

创建项目步骤

安装nodejs

        https://nodejs.org/en/download/prebuilt-binaries

查看npm版本

        npm-v

查看镜像命令 

        npm config get registry

设置npm镜像

        npm config set registry=http://registry.npm.taobao.org

创建项目命令

        npm init vite@latest shop-admin -- --template vue

安装依赖

        npm install

运行项目

        npm run dev

-------------------------------------------------  安装插件  -------------------------------------------------  

安装插件

Vue 3 Snippets 

        代码提示插件

Vue - Official

        （Vue language Feature(Volar) 已改名为Vue - Official）

Chinese Language

        (Simplified) (简体中文) Language

-------------------------------------------------  安装Element Plus  -------------------------------------------------  

安装Element Plus

        安装 Element Plus npm install element-plus --save

Element Plus完整引入 

// main.js
import { createApp } from "vue";
// import "./style.css";

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");

测试Element Plus是否可用

//app.vue

<script setup></script>

<template>

  <div class="mb-4">

    <el-button>Default</el-button>

    <el-button type="primary">Primary</el-button>

    <el-button type="success">Success</el-button>

    <el-button type="info">Info</el-button>

    <el-button type="warning">Warning</el-button>

    <el-button type="danger">首页</el-button>

  </div>

</template>

<style scoped></style>

-------------------------------------------------  安装Windi CSS  -------------------------------------------------  

Vite 集成 | Windi CSS

安装Windi CSS

npm i -D vite-plugin-windicss windicss

配置Windi CSS插件

//vite.config.js

import WindiCSS from 'vite-plugin-windicss'

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

//vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), WindiCSS()],
});

//main.js

import 'virtual:windi.css'

// main.js
import { createApp } from "vue";
// import "./style.css";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus);

import "virtual:windi.css";

app.mount("#app");

友好提示：安装WindiCSS IntelliSense 插件

安装Windi CSS提示插件

测试Windi CSS是否可用

//app.vue

<script setup></script>

<template>

  <!--

   参考网址：https://cn.windicss.org/utilities/layout/spacing.html#padding

   背景颜色：bg-purple-500

   字体颜色：text-indigo-50

   左右间距：px-4   x是坐标就是左右

   上下间距：py-2   y是坐标就是上下

   按钮圆角：rounded-full

   鼠标悬停：hover:(bg-purple-900)

   鼠标悬停添加边框、边框大小、边框颜色： hover:(bg-purple-900 focus:(ring-8 ring-purple-600)

   动画效果：transition-all

   持续时间: duration-500

  -->

  <button class="btn">按钮</button>

</template>

<style scoped>

.btn {

  @apply bg-purple-500 text-indigo-50 px-4 py-2 rounded-full transition-all duration-500 hover:(bg-purple-900 focus:(ring-8 ring-purple-600));

}

</style>

-------------------------------------------------  安装Vue Router  -------------------------------------------------  

安装 | Vue Router

安装Vue Router

        npm install vue-router@4

配置Vue Router

在项目下的 src 文件夹中新建一个 router 文件夹，里面新建一个 index.js 文件

//index.js

//创建路由器实例
//路由器实例是通过调用 createRouter() 函数创建的:
import { createWebHashHistory, createRouter } from "vue-router";

//这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。
const routes = [];

const router = createRouter({
  //这里的 history 选项控制了路由和 URL 路径是如何双向映射的。
  history: createWebHashHistory(),
  routes,
});

export default router;

// main.js

import router from "./router";

app.use(router);

// main.js
import { createApp } from "vue";
// import "./style.css";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(router);

app.use(ElementPlus);

import "virtual:windi.css";

app.mount("#app");

-------------------------------------------------  设置系统路径别名  -------------------------------------------------  

设置系统路径别名

//vite.config.js

引入：import path from "path";

设置：

  resolve: {

    alias: {

      "@": path.resolve(__dirname, "src"),

    },

  },

//vite.config.js

import { defineConfig } from "vite&#