关于vite 与 v3 的使用的记录

一、通过npm 命令创建 vite 项目

# 控制台运行
npm init vite@latest <项目名称> --template vue

# 安装项目依赖
npm install

# 运行项目
npm run dev

二、使用 antD官网 框架

# 打开项目根目录在控制台运行
npm install ant-design-vue --save


# 在main.js 入口文件全局引入及实例该框架的组件和样式
# 为什么引入.less文件而不是.css？ 为了全局修改主题样式
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.less';

createApp(App).use(Antd).mount('#app')


#在vite.config.js 文件配置主题色
export default defineConfig({
             ……
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
        'primary-color': '#8400dc',
        'link-color': '#8400dc',
        'border-radius-base': '6px',
      },
        javascriptEnabled: true //开启less编译
      }
    }
  }
             ……
})

 三、使用 windiCss 框架

# 安装 windiCSs 框架
npm i -D vite-plugin-windicss windicss

# 在main.js 文件全局引入
import 'virtual:windi.css'

# 在vite.config.js 文件引入该框架
import WindiCSS from 'vite-plugin-windicss'

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

 

# 因为windiCss 就是操作类名修改样式，因此如果类名多了容易导致html 代码混杂
# 因此可用该框架的 @apply 来分割代码

# 原代码
  <div class="bg-gray-500/50 text-neutral-50 px-6 py-2 ring-8">
    大盒子
  </div>



# 分割代码之后
<template>
  <div class="box">
    大盒子
  </div>
</template>

<style scoped>
  .box{
    @apply bg-gray-500/50 text-neutral-50 px-6 py-2 ring-4
  }
</style>

四、安装 vueRouter 路由 (*vue3 项目应使用v4.x 版本）

# 安装 vue-router
npm install vue-router@4

# 在main.js 入口文件中引入路由并注册
import router from "./router";
createApp(App).use(router).mount('#app')

# 路由的使用

  # 1.在src 目录下新建 router 目录并在此目录下创建 index.js 文件


  # 2.在vite.config.js 文件里为src 目录配置别名为 ‘ ~ ’
    
    import path from 'path' #导入node.js 内置path 模块用于路径处理

    export default defineConfig({
                ……
      resolve:{
        //配置别名
        alias:{
          // __dirname:获取当前文件的路径
          '~':path.resolve(__dirname, 'src')
        }
      }
                ……
    })


  # 3.在scr 目录下新建 Views 目录用于存放路由页面文件

    # 3.1.在 Views 目录下新建 index.vue 和 404.vue 文件

    # 3.2.其中 404.vue 页面内容可用 antd 框架提供的 404.vue 页面代码（直接搜索 ‘404’）

   
  # 4.在src 目录下新建 router 目录并在此目录下创建 index.js 文件，再此文件中添加如下代码
      
      import {createRouter, createWebHashHistory} from 'vue-router';


      //引入pages的页面做路由
      import Index from '~/pages/index.vue'
      import NotFound from '~/pages/404.vue'


      const routes = [
        {
          path: '/',
          component: Index
        },
          // 若没有此路由则跳转至404.vue页面
        {
          path: '/:pathMatch(.*)*',
          name: 'NotFound',
          component: NotFound
        },
      ]

      const router = createRouter({
        history: createWebHashHistory(),
        routes, 
      })

      export default router