# vue3r2

**Repository Path**: lulusayhi01/vue3r2

## Basic Information

- **Project Name**: vue3r2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-27
- **Last Updated**: 2023-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

参考网址

https://cn.vitejs.dev/guide/

vue3的官网
https://cn.vuejs.org/guide/essentials/application.html

https://zhuanlan.zhihu.com/p/448676871

创建项目的命令
npm create vite@latest my-vue-app -- --template vue

cd my-vue-app

npm install

npm run dev

问题列表
1.vite 如何配置端口
2.如何配置proxy 的接口代理
直接配置vite.config.js 里面的 
server: {
    host: 'localhost',
    port: 3000,
    open: true,
    cors: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }


3.如何接入 jsplumb
 npm install --save jsplumb
 参考链接
 https://blog.csdn.net/qq_37656005/article/details/123084850

 4.如何接入less 与 scss(sass)
 https://zhuanlan.zhihu.com/p/602466115

 https://www.jb51.net/javascript/294313isn.htm
scss的安装 （了解sass ,可以参考ruoyi的项目引入）
npm install sass sass-loader -d

//设置格式
css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" }
      }
    }
  },

//设置全局引入
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/style/mixin.scss";` // 此处全局的scss文件
      }
    }
  }



less 的安装
 (1)
npm install less
npm install less-loader
(2)
配置vite.config.ts
css: {
    // 预处理器配置项
    preprocessorOptions: {
      less: {
        math: "always",
      },
    },
  },
(3)使用
<style scoped lang="less"></style>

5.如何接入 element-plus
https://blog.csdn.net/m0_46309087/article/details/131277139
引入包：
npm install element-plus --save

main.js 内容：
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')
————————————————
版权声明：本文为CSDN博主「Saga Two」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46309087/article/details/131277139

6.如何引入路由
https://blog.csdn.net/LoveTMW1314/article/details/128420240

npm install vue-router@4

router/index.js 的写法

import { createRouter, createWebHashHistory } from "vue-router"
 
const routes = [
    {
        path: '/',
        name: 'login',
        component: () => import('@/pages/login/index.vue')
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('@/pages/home/index.vue')
    }
]
export const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})
 
export default router

main.js里面的写法
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
app.use(router)
app.mount('#app')

在App.vue文件中加入路由标签
<template>
  <router-view></router-view>
</template>

路由跳转
this.$router.push('/home')

路由补充一个小问题，就是@的使用
https://blog.csdn.net/m0_62811051/article/details/127725425
找不到@后面的路径


7.如何引入css 
@import 'path/to/var.scss';

<link rel="stylesheet" href="./my-component.css" />


8.如何引入font

9.如何引入store,做主体切换。同类 pinia。

10.如何做登入注销注册，免登入，微信登入，手机登入。