新建vue项目和安装第三方库_vue项目如何导入第三方库-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaobai_cpp/article/details/140558278

文章目录

安装vue
安装sass
安装axios
安装 Element Plus
安装Element Plus 提供的一套常用的图标集合：
安装unplugin-icons和iconify最全的图标库
安装VueUse
安装unplugin-vue-router(基于文件的vue-router插件)

安装vue

打开vscode编辑器，按Ctrl+`组合键打开终端，在命令行中运行以下命令

npm create vue@latest

项目初始化完成，可执行以下命令：

cd vue-project --切换到项目目录
npm install   -- 安装依赖包
npm run dev  -- 运行项目

安装sass

npm install -D sass

安装axios

npm install axios

安装 Element Plus

npm install element-plus --save

自动导入Element Plus组件，首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 配置文件中

// 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()],
    }),
  ],
})

添加此插件后，启动开发服务器(通常为 npm run dev )以生成 “auto-imports.d.ts”, “components.d.ts”,类型的第一个版本，该版本应与 “types”: [“element-plus/global”,]一起添加到 tsconfig.app.json 。它应该是这样的:

// tsconfig.app.json
  "include": [
  "auto-imports.d.ts",
  "components.d.ts",
],
 "types": [
   "element-plus/global",
]

安装Element Plus 提供的一套常用的图标集合：

npm install @element-plus/icons-vue

注册所有图标

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

按需注册图标

// main.ts
import { HomeFilled, Platform} from '@element-plus/icons-vue'
const app = createApp(App)
app.component('HomeFilled', HomeFilled)
.component('Platform', Platform)

安装unplugin-icons和iconify最全的图标库

点击这里在线寻找满意的图标

npm i -D unplugin-icons

npm i -D @iconify/json

Vue 3 / Vue 2.7+ support requires peer dependency @vue/compiler-sfc:

npm i -D @vue/compiler-sfc

在vite 配置文件中加下面这个属性

Icons({ compiler: 'vue3' })

ts类型

// tsconfig.app.json
{
  "compilerOptions": {
    "types": [
      "unplugin-icons/types/vue",
    ]
  }
}

然后把下列代码插入到你的 Vite 配置文件中

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver(),
      // 自动导入图标组件
      IconsResolver({
        prefix: 'Icon',
      }),
      ],
    }),
    Components({
      resolvers: [ElementPlusResolver(),
      // 自动注册图标组件
        IconsResolver({
          enabledCollections: ["ep"],
        }),    
      ],
      dirs: [],
    }),
    // 自动安装图标
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
  ],
})

按需注册图标

// main.ts
import IconAccessibility from '~icons/carbon/accessibility'
const app = createApp(App)
app.component('IconAccessibility ', IconAccessibility )

导入图标，直接使用图标组件

<script setup>
import IconAccessibility from '~icons/carbon/accessibility'
import IconAccountBox from '~icons/mdi/account-box'
</script>

<template>
  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>
</template>

使用前缀

import { Expand, Fold, Setting } from "@element-plus/icons-vue"
<i-ep-Fold></i-ep-Fold>

安装VueUse

npm i @vueuse/core

npm i @vueuse/core @vueuse/components

Element Plus使用VueUse自定义主题

import { useCssVar } from '@vueuse/core'

const el = ref(null)
const color1 = useCssVar('--color', el)

const elv = ref(null)
const key = ref('--color')
const colorVal = useCssVar(key, elv)

const someEl = ref(null)
const color2 = useCssVar('--color', someEl, { initialValue: '#eee' })

安装unplugin-vue-router(基于文件的vue-router插件)

npm install -D unplugin-vue-router

Unplugin-vue-router将添加一个虚拟的 vue-router/auto 模块，该模块导出 vue-router 中的所有内容以及 unplugin-vue-router/runtime 的一些额外特性。建议避免在新项目中使用 vue-router/auto 。它被保留是为了与使用它的现有项目兼容，将来可能会被删除。

你可以将 vue-router/auto 从VSCode的导入建议中排除，方法是将这个设置添加到 .vscode/settings.json : (编辑器当前项目的.vscode文件夹里新建一个settings.json)。这将确保VSCode不建议对导入使用 vue-router/auto 。或者，您也可以配置自动导入。

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.autoImportFileExcludePatterns": ["vue-router/auto$"]
}

添加此插件后，启动开发服务器(通常为 npm run dev )以生成 typed-router.d.ts 类型的第一个版本，该版本应与 “moduleResolution”: “Bundler” 一起添加到 tsconfig.app.json 。它应该是这样的:

{
  "include": [
    // other files...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler",
    // ...
  }
}

然后，如果你有一个像 npm vue create 创建的 env.d.ts 文件，添加 unplugin-vue-router/client 类型:

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

如果你没有 env.d.ts 文件，你可以创建一个并添加unplugin-vue-router类型，或者你可以将它们添加到 tsconfig.app.json types 属性中:

{
  "compilerOptions": {
    // ...
    "types": [
      "unplugin-vue-router/client"
    ]
  }
}

router/index.vue

import { createRouter, createWebHistory } from "vue-router";
import { routes } from "vue-router/auto-routes";

const router = createRouter({
  // ...
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

tsconfig.app.json

// tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", 
  "./typed-router.d.ts",
  "auto-imports.d.ts",
  "components.d.ts",
],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "moduleResolution": "Bundler",
    "types": [
      "element-plus/global",
      "unplugin-icons/types/vue",
  ]
  }
}

vite.config.ts

//vite.config.ts
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import VueRouter from "unplugin-vue-router/vite";

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";


export default defineConfig({
  plugins: [
    VueRouter({
      routesFolder: [
        {
          //路由页面所在目录
          src: 'src/views',
        },
      ],
    }),
    vue(),
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: "Icon",
        }),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ["ep"],
        }),
      ],
      dirs: [],
    }),
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    host: "127.0.0.1",
    port: 3000,
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8080",
        changeOrigin: true,
        // 其他可选配置...
        rewrite: (path) => path.replace(/^\/api/, ""), // 重写路径
      },
    },
  },
});

env.d.ts

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />