vue3+vite+windicss+element-plus 实用笔记，实现快速初始化项目

安装vite

npm create vite@latest 项目名称
// 选择 vue -> javasrcipt -> 结束

安装配置scss

 1、 下载 npm i sass -S
 2、 配置
  // vite.config.js
  export default defineConfig({
     css: {
        preprocessorOptions: {
          scss: {
            additionalData:'@import "./src/styles/mixins.scss";@import "./src/styles/variables.scss";' // 此处导入全局css样式，也可以放在app.vue文件上引入
          }
        }
      },
  })

安装配置unplugin-auto-import 插件

unplugin-auto-import 插件免除掉繁琐的import

1、下载
    npm i unplugin-auto-import -D 
2、配置
    // vite.config.js
    import AutoImport from 'unplugin-auto-import/vite'
    plugins: [
        vue(),
        AutoImport({
            imports: [
                'vue',
                'vue-router'
            ]
        })
    ],

配置@根目录

  1、下载
    npm install path --save
  2、配置
    // vite.config.js
    import path from 'path';
    const srcPath = path.resolve(__dirname, 'src');
    // 配置@目录
    export default defineConfig({
      resolve: {
          alias: [
              { find: '@', replacement: srcPath },
          ],
      },
    })

安装配置axios

1、下载  
    npm install axios -S
  2、初始化
    // utils/request.js
      import axios from "axios";
  
      const service = axios.create({
      baseURL : import.meta.env.VITE_BASEURL, // 当前环境变量
      timeout:30000,
      withCredentials:true,
      headers:{
      'Content-Type':'application/json',
      'Authorization': import.meta.env.VITE_TOKEN,
      }
      })
      
      // 添加请求拦截器
      service.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      console.log('config',config)
      return config;
      }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
      });
      
      // 添加响应拦截器
      service.interceptors.response.use(function (response) {
      // 2xx 范围内的状态码都会触发该函数。
      // 对响应数据做点什么
      return response.data;
      }, function (error) {
      // 超出 2xx 范围的状态码都会触发该函数。
      // 对响应错误做点什么
      return Promise.reject(error);
      });
      export default service
  3、api
     // api/index.js
      import request from "@/utils/request.js";
      export function search(params){
        return request({
          url:'/v1/search',
          method:'GET',
          params,
        })
      }
  4、使用
    // home.vue
      import {search} from '@/api/index.js'
      search().then(……)

安装配置pinia

  1、下载   
  npm install pinia -S
  2、配置
    // main.js
    import { createPinia } from 'pinia'
    app.use(createPinia())
  3、初始化（单模块）
    // store/index.js
   import { defineStore } from 'pinia'
    const indexStore = defineStore('index',{
  state: ()=>{
      return {
          conut:1
      }
  },
  getters:{},
  actions:{},
  })
  export default indexStore  
  4、引用
    // home.vue
    import indexStore from '@/store/index.js'
    const indexstore = indexStore()
  console.log(indexstore.conut) // 1

安装配置router

  1、下载
       npm install vue-router@4
    2、配置
    // main.js
    import router  from './router/router.js'
    app.use(router)
    // router/index.js
    import { createRouter,createWebHistory} from "vue-router";
    // 路由信息
    const routes = [
        {
            path:'/',
            name:'home',
            component: () => import('@/views/home.vue')
        },
        {
            path:'/index',
            name:'index',
            component: () => import('@/views/index.vue')
        }
    ];

    // 导出路由
    const router = createRouter({
        history: createWebHistory(),
        routes
    });

    export default router

安装配置element-ui-plus（按需导入）

element-ui-plus官网

1、 安装插件
  npm install -D unplugin-vue-components unplugin-auto-import
2、配置
  // vite.config.ts
  import { defineConfig } from 'vite'
    import AutoImport from 'unplugin-auto-import/vite'
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  
  export default defineConfig({
      // ...
      plugins: [
        // ...
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
      ],
    })
3、手动导入
  // app.vue
  <template>
      <el-button>I am ElButton</el-button>
    </template>
    <script>
      import { ElButton } from 'element-plus'
      export default {
        components: { ElButton },
      }
    </script>

4、 配置icon  
    // main.js
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
5、配置message （不配置这个会出现，提示窗样式出错的问题）
    import 'element-plus/theme-chalk/el-loading.css';
    import 'element-plus/theme-chalk/el-message.css';

安装配置element-ui-plus（全局导入）

  1、下载
    npm install element-plus --save
  2、配置
  // main.js
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'

    import 'element-plus/theme-chalk/el-loading.css';
    import 'element-plus/theme-chalk/el-message.css';
  const app = createApp(App)
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
  }
    app.use(ElementPlus)

安装windiCss 个人认为挺好用的，省了写样式的时间

windicss

 1、下载
    npm i -D vite-plugin-windicss windicss
  2、配置 
    // vite.config.js 
      import WindiCSS from 'vite-plugin-windicss'

      export default {
        plugins: [
          WindiCSS(),
        ],
      }
    // main.js
      import 'virtual:windi.css'

安装vueeuse vue提高的一个函数库

vueeuse

1、安装
  npm i @vueuse/core
2、使用-示例
  // app.vue
  <template>
      <div ref="target"></div>
  </template>
  import { onClickOutside } from '@vueuse/core' // 监听点击位置是否是元素以外
  const target = ref(null)
  // 切换显示隐藏
    onClickOutside(target, (event) => {
        emits("onClear")
    })

（以上是我觉得初始化有用的插件，欢迎评论补充嘻嘻）

vue3+vite+windicss+element-plus 实用笔记，实现快速初始化项目

推荐阅读更多精彩内容