基于 Vite 搭建Vue3项目

如似如是

已于 2024-11-17 19:05:01 修改

阅读量2.1k

点赞数 24

文章标签： vue.js 前端 javascript

于 2024-11-17 19:04:11 首次发布

本文链接：https://blog.youkuaiyun.com/qq_71849595/article/details/143812008

版权

2.5 引入auoto-import自动导入（解决波浪线爆红）

2.6 配置@别名

2.7 引入router（解决波浪线爆红）

2.8 引入pinia

2.9 引入UI库 Ant-design-vue 和 ant-design/icons-vue图标

1.安装Vue3项目

进入cmd创建vite项目

pnpm create vite

输入项目名，选择Vue

选择ts

在vscode打开文件夹，下载依赖

pnpm i

启动项目

pnpm run dev

不想本地这个端口启动，可以在vite.conifg.ts配置port

访问http://localhost:6666/

2. 配置项目

2.1 完善目录结构

2.2 引入reset样式

去npm官网搜索reset.css,复制reset样式

在styles下创建reset.css和index,css文件，把reset样式copy进reset.css

删除默认style样式，引入styles下的index.css，这个文件导入这个文件夹下的样式、

这样就成功了

2.3 配置Vscode代码片段

点击设置 - 用户代码片段 - 全局配置

插入vue3setup模板

	"Vue3Setup模板": {
		"prefix": "-vue3",
		"body": [
		  "<template>",
		  "  <div>",
		  "",
		  "  </div>",
		  "</template>",
		  "",
		  "<script setup lang='ts'>",
		  "",
		  "</script>",
		  "",
		  "<style scoped lang='scss'>",
		  "",
		  "</style>",
		  ""
		],
		"description": "Vue3Setup模板"
	  },

在App.vuez中，删除默认代码，输入‘-v3’,显示提示

2.4 引入全局SCSS

pnpm i scss scss-loader sass-embedded

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/styles/global.scss";` // 此处全局的scss文件
      }
    }
  },

测试一下全局变量

成功

2.5 引入auoto-import自动导入（解决波浪线爆红）

项目中会频繁引入使用 vue、vue-router、pinia 内的API，如ref、reactive 等
使用自动引入插件进行全局引入即可

pnpm i -D unplugin-auto-import

ViteAutoImport({
      dts: true,
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        enabled: true
      }
    })

有可能有波浪线爆红，关闭vetur，添加auto-imports.d.ts

2.6 配置@别名

resolve: {
    //路径别名
    alias: {
      '@': resolve(__dirname, './src')
    }
  },

2.7 引入router（解决波浪线爆红）

pnpm i vue-router

在router文件夹下新建index.ts配置router

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

const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/home/index.vue'),
      children: []
    },
    {
      //任意路由
      path: '/:pathMatch(.*)*',
      redirect: '/404',
      name: 'Any'
    },
  ],
  history: createWebHistory()
})

export default router

在main.ts入口文件引入这个index.ts文件

这里会发现@/会有波浪线爆红（找不到模块“@/router”或其相应的类型声明）

在vite-env.d.ts里声明一下就行了

declare module '*.vue' {
    import { Component } from 'vue'
    const component: Component
    export default component
  }

declare module '@/*'

在App.vue文件引入router-view

成功

2.8 引入pinia

pnpm i pinia

在stores下新建idnex.ts

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

在main入口文件引入这个index.ts文件

测试pinia

成功

2.9 引入UI库 Ant-design-vue 和 ant-design/icons-vue图标

pnpm i ant-design-vue@4.x  @ant-design/icons-vue

引入Ant-design-vue

引入ant-design/icons-vue图标

// 全局注册图标
Object.keys(Icons).map((key) => {
    // @ts-ignore
    app.component(key, Icons[key])
  })

2.10 全局注册组件

不用在页面导入，直接使用

在component文件夹下新建index.ts用于注册全局组件

import type { App } from 'vue'
import HelloWorld from './HelloWorld.vue'

const components: any = { HelloWorld }

export default {
  install(app: App) {
    Object.keys(components).forEach((key: string) => {
      app.component(key, components[key]) //遍历挂载组件
    })
  }
}

然后在main入口文件引入index.ts

测试，默认样式被我删了，哈哈，成功！

2.11 配置路由拦截

在src根目录下新建permisson.ts文件

import router from './router'

router.beforeEach((to, from, next) => {
    // 用户权限和登录判断
    next()
})

router.afterEach((to, from, next) => {})

在main入口文件引入

2.12 添加NProgress进度条

pnpm i nprogress

在config添加nprogress配置

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})

export default NProgress

测试跳转页面，成功！

2.13 引入JSX

pnpm i @vitejs/plugin-vue-jsx -D

在utils下新建render函数

// @ts-nocheck
export default {
  props: {
    record: Object,
    column: Object,
    text: String,
    index: String,
    render: Function
  },
  render: function () {
    return this.render({
      record: this.record,
      column: this.column,
      text: this.text,
      index: this.index
    })
  }
}

在页面中使用

<template>
  <div><Render :render="render"/></div>
</template>

<script setup lang="tsx">
import Render from "@/utils/render"
const render = () =>{
  return <a-button>1</a-button>
}
</script>

<style scoped lang="scss"></style>