vue3 vite 初始化

目录

1.安装Vue3项目

2. 配置项目

2.1 完善目录结构

2.2 引入reset样式

2.3 配置Vscode代码片段

2.4 引入全局SCSS

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

2.6 配置@别名

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

2.8 引入pinia

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

2.10 全局注册组件

2.11 配置路由拦截

2.12 添加NProgress进度条

2.13 引入JSX

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>

测试，成功！

报错：JSX 元素隐式具有类型 "any"，因为不存在接口 "JSX.IntrinsicElements"

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.-优快云博客