Vue3 + TS + Vite + Element Plus 项目搭建

项目准备

Visual Studio Code

VSCode 有着各种方便我们开发的插件，能让我们更加舒心的编写代码。

为 Vue3 和 TS 安装一些插件来方便我们开发

• Volar 解决了 template 的 TS 提示问题，但是使用前要先禁用或卸载 Vetur ，以免造成冲突。
• TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件。
• Prettier - Code formatter 用于代码规范，格式化文档。使用
• ESlint 语法检测工具

创建应用

检查 node 版本是否支持

开始创建 npm init vue@latest ， 然后根据提示添加相应模块

cd demo
npm install 
npm run dev

安装 Element ui

npm install element-plus --save

完整引入

在 main.ts 写入

import ElementPlus from 'element-plus'
app.use(ElementPlus)

如果使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

{
    "compilerOptions": {
        // ...
        "types": ["element-plus/global"]
    }
}

自动导入

使用组件方式，选择自动导入

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 const app = createApp(App)

// main.ts
const app = createApp(App)
npm install -D unplugin-vue-components unplugin-auto-import

// vite.config.ts
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()],
    }),
  ],
})

设置组件尺寸及层级

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

element 图标的使用

npm install @element-plus/icons-vue

// main.js
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用
<el-icon size="30" color="#409eff"><ChromeFilled /></el-icon>

安装 sass

npm add -D sass

公共变量

// constant.scss
$color-red: #ff0000;
$large-size: 40px;
$font-oblique: oblique;

公共样式

@import "./constant.scss";
.main-scss {
    color: red;
}

// main.ts
import '@/assets/main.scss'

vite.config.ts 加载到全局使用常量

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // Vite路径别名配置
        alias: {
            '@': path.resolve('./src')
        }
    },
    /*主要看下面这段*/
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/styles/constant.scss";'
            }
        }
    }
})

使用 阿里图标库

点击复制代码

新建 iconfont.css 文件，将复制的代码粘贴

在 index.html 中引入

// index.html
<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" />
// 使用
<i class="iconfont icon-shanchu" style="font-size: 30px;color: red;"></i>

安装 Echarts

npm install echarts --save 在 app.vue 中使用 provide ，在子组件使用 inject 注入

// app.vue
import * as echarts from 'echarts'
provide('echarts', echarts)

// 使用
const echarts = inject<any>("echarts");
onMounted(() => {
  console.log("挂载完成");
  let myChart = echarts.init(document.getElementById("myChart"));
  let option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
});

使用 axios

npm install axios

使用

import axios from "axios";
axios.defaults.headers["Content-type"] = "application/json;chartset=utf-8";
const service = axios.create({
  baseURL: "http://192.168.0.111/v3",
  timeout: 10000,
});
export default service;

相应配置设置

引用模块路径问题

在文件根目录中的vite-env.d.ts文件中加入几行代码

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: ComponentOptions | ComponentOptions['setup']
    export default component
}

找不到模块“”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?

// tsconfig.json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ],
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "useDefineForClassFields": true,
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "*.ts"
  ]
}

类型“ImportMeta”上不存在属性“env”

// vite-env.d.ts 添加以下
interface ImportMetaEnv {
  BASE_URL: string | undefined
	readonly VITE_BASE_API: string
    readonly VITE_BASE_OS: string
} 

interface ImportMeta {
  readonly env: ImportMetaEnv
}

tsconfig.app.json 文件报错：在没有 “node” 模块解析策略的情况下，无法指定选项 “-resolveJsonModule”

在 tsconfig.json 文件的 "compilerOptions"中配置 "moduleResolution": "node" 。

修改 tsconfig.app.json 文件中 compilerOptions 选项配置 "moduleResolution": "node" 就可以了。

使用 ElMessage 报红问题

// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    // ...
    AutoImport({
    
      imports: ['vue', 'vue-router'],
      // 添加下列行
      dts: "./auto-import.d.ts",
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
      // '@': path.resolve('./src')
    }
  },
  css: {
    preprocessorOptions: {
            scss: {
                additionalData: '@import "@/assets/styles/constant.scss";'
            }
        }
    }
})

auto-import.d.ts 文件

//auto-import.d.ts
export {}
declare global {
  const ElMessage:typeof import('element-plus')['ElMessage'] 
  const ElLoading:typeof import('element-plus')['ElLoading'] 
}

然后在 tsconfig.json 文件添加一行代码

"include": [
    "auto-imports.d.ts"
  ]