Vue3+Vite+Ts开发总结

Vue3 < script setup > 语法糖

官网地址：Go

响应式变量

<script setup>
  // 个人认为响应式变量和普通变量的最大区别是：响应式变量会同步更新视图模板中的显示，但是普通变量更改后不会触发视图更新
  import { ref, toRef, toRefs, reactive } from 'vue';
 
  const num1 = ref(0); // 任意数据类型的响应式变量
  const num2 = reactive({ num: 1 }); // reactive 多用于响应式对象定义
  const { num } = toRefs(num2); // 将响应式对象转换为普通对象
  const numCopy = toRef(num2, 'num'); // 将响应式对象num2中num字段创建为一个新的响应式变量
 
</script>

函数/方法使用

<template>
  <el-button size="small" @click="updateNum(1)">num变成1</el-button>
</template>
 
<script setup>
  import { ref } from 'vue';
  const num = ref(0);
  const updateNum = (val) => {
    num.value = val;
    console.log(num.value); // 1
  };
</script>

Router路由

1. 安装

npm install vue-router@4

2. 创建路由文件

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

// 2. 配置路由
const routes: Array<RouteRecordRaw> = [
  {
    path: '/redirect',
    component: () => import('@/layout/index.vue'),
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index.vue')
      }
    ]
  },
];
// 1.返回一个 router 实列，为函数，里面有配置项（对象） history
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 3导出路由   然后去 main.ts 注册 router.ts
export default router

3. 使用：

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'

// 注意：route、router必须声明在外层，放到函数里面获取不到
const route = useRoute(); // route 对应了 vue2 中的 $route 对象
const router = useRouter(); // router 对应了 vue2 中的 $router 对象

// 路由跳转
router.push('/register')

router.push({ path: 'register', query: { userId: '123' }})

router.push({ name: 'user', params: { userId: '123' }})

// 接收参数
let userId=route.query.userId;

let userId=route.params.userId;
</script>

Vite引入vue文件报错（注入.vue文件类型）

注意：引入vue文件需要添加 .vue 后缀名

在根目录添加xxx.d.ts文件

可以在配置环境变量的文件中放入一下代码

// 注入.vue文件类型
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

Vite配置项目路径别名

webpack中可以通过resolve.alias定义项目路径别名，这样可以在引入文件时，不再需要使用相对路径，统一以根路径（/src/）作为起点。

vite同样支持路径别名的定义：

import { join } from "path";
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': join(__dirname, "src"),
    }
  }
})

如果是ts项目需要增加下面配置：

{
   // ...
  "compilerOptions": {
    // ...其他配置
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  // ...
}

如果你是刚创建的TypeScript项目，有可能会遇到找不到模块“path”或其相应的类型声明的错误提示，安装@types/node即可。

npm install @types/node --save-dev

Vite配置环境变量

官网介绍：Go

1. 跟目录下创建 .env.xxx

VITE_TITLE = "测试env111"

VITE_API_URL = "123123-url-123123"

2. 根src下创建 env.d.ts（主要用途作为代码提示，不需要提示，此处忽略）

/*
三斜线指令：https://www.tslang.cn/docs/handbook/triple-slash-directives.html
*/
/// 

interface ImportMetaEnv {
  readonly VITE_TITLE: string
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

// 注入.vue文件类型 若其他地方配置了，删除即可
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

3. package.json中使用

"scripts": {
  "dev": "vite --host",
  "dev:test": "vite --mode test --host",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview"
},

Vite下使用Sass

官网介绍：Go

只要下载sass即可，不必下载sass-loader、node-sass

npm install -D sass

这样就直接可以使用了。

配置全局scss：

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/styles/index.scss";',
      }
    }
  },
  ...
})

Vite下使用svg

1. 下载插件：vite-plugin-svg-icons，版本：2.0.1
   插件地址：Go

node版本：node version: >=12.0.0
vite版本：vite version: >=2.0.0

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2. vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',

        /**
         * custom insert position
         * @default: body-last
         */
        inject: 'body-last', //body-last|body-first默认body-last

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

3. 在components中创建SvgIcon/index.vue

<template>
  <svg aria-hidden="true">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#333',
    },
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  },
})
</script>

4. 在main.ts中引入并全局注册

import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'

app.component('svg-icon', SvgIcon)

5. 在asstes中创建/icons/svg，将svg图片放入

- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

6. 使用svg

<SvgIcon name="icon1"></SvgIcon>

注意：

在下载后运行是若报错：Error: Cannot find module ‘fast-glob’

原因是缺少 fast-glob 这个模块包

只需要下载即可：npm install fast-glob；地址：Go

demo

**

一个简单的管理系统框架：vue3-ts-vite

演示地址：

http://120.46.214.138:8080/

gitee地址：

https://gitee.com/Divenl/vue3-vite-ts-admin

**

---

持续更新ing…