打开后端输入框，用第二种方法搭建
清空画红圈文件夹里面的所有文件

图片.png

APP.vue文件清理图片.png

      App.vue 初始样式
              <template>

                <RouterView />

              </template>

              <script setup lang="ts">

              </script>

              <style scoped>

              </style>

给stores文件夹设置文件图片.png

持续化储存初始样式
    下载持续化储  npm install pinia-plugin-persistedstate 
       或者
       pnpm install pinia-plugin-persistedstate 
      import { defineStore } from 'pinia'
      export const useMain = defineStore('main',{

        persist:{

          key:"user",

          storage:sessionStorage

        },

        state(){

          return {

          }

        }

        }

      )

main.ts基础样式
图片.png

  下载 Element Plus---
      npm install element-plus --save
      或
      pnpm add @element-plus/icons-vue

下载全局组件库 ```

    npm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
    或
     pnpm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus
   
   
        import { createApp } from 'vue'

        import { createPinia } from 'pinia'

        import ElementPlus from "element-plus";

        import App from './App.vue'

        import router from './router'

        //引入组件css

        import "element-plus/dist/index.css";

        // 创造文件，里面是获取组件，然后导出在这里

        import IconElement from './impotElement/IconElement';

        import piniaPresist from "pinia-plugin-persistedstate";





        const app = createApp(App)

        app.use(ElementPlus);

        const pinia=createPinia();

        pinia.use(piniaPresist);

        app.use(pinia)

        app.use(router)

        for(const [key,value] of Object.entries(IconElement)){

            app.component(key,value);

        }

        app.mount('#app')

设置文件夹，在里面设置文件引入组件库图片.png

 // import { Edit,List } from '@element-plus/icons-vue';

 // export default {Edit,List}  //部分导入

 import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 export default ElementPlusIconsVue; //全局导入

router文件下index.ts基础样式图片.png

        import { createRouter, createWebHistory } from 'vue-router'


        const router = createRouter({

          history: createWebHistory(),

          routes: [

          ]

        })


        export default router

创造文件设置axios通信图片.png

下载  npm i axios --save
或
pnpm i axios --save
import axios from "axios"

const ins=axios.create({

    // 基础路径,访问代理 然后代理会走服务器

    baseURL:"http//localhost:5000/a",

    timeout:4000 //超时时间

})

export default ins

vite.config.ts 基础设置图片.png

   import { fileURLToPath, URL } from 'node:url'
   import { defineConfig } from 'vite'

   // element-plus组件按需加载

   import vue from '@vitejs/plugin-vue'

   import AutoImport from "unplugin-auto-import/vite"

   import Components from "unplugin-vue-components/vite"

   import {ElementPlusResolver} from "unplugin-vue-components/resolvers"

   import path from 'node:path'

   // https://vitejs.dev/config/

   export default defineConfig({

     plugins: [

       vue(),

       AutoImport({

         resolvers:[ElementPlusResolver()],

         // 引入vue和vue-router的

         imports:["vue","vue-router"],

         // 引入都dts,imports中

         dts:'auto-imports.d.ts'

       }),

       // 按需要加载文件

       Components({

         resolvers:[ElementPlusResolver()],

         // src下面的components.或则views都可以导入

         // 导入到dts components.d.ts中

         dirs:['src/components','src/views'],

         extensions:['vue'],

         dts:'components.d.ts'

       }),

     ],

     resolve: {

       alias: {

         '@': fileURLToPath(new URL('./src', import.meta.url))

       }

     },


  server: {
   port: 5000, // 设置端口号为 5000  

   proxy: { // 配置代理  

     "/a": { // 当请求的路径以 "/a" 开头时  

       target: "http://localhost:4000", // 将请求转发到 http://localhost: 4000 ,//这个地址  

       changeOrigin: true, // 允许跨域请求，更改请求的 origin 头信息  

       rewrite: path => path.replace(/^\/a /,"") // 重写请求的路径，将 "/ a" 前缀去掉  


     }

   },

     }

   })

用pnpm创建

先windows键+r打开命令行下载  npm install -g pnpm

然后关闭命令行，在打开输入pnpm create vue ,在输入项目名，输入包直接点回车。

```
照常进行。
```

vue正式项目搭建

下载全局组件库 ```

用pnpm创建