electron 项目 第二篇 引入element-plus 布局页面

eslint 配置参考

1 按需导入 element-plus

• 安装element-plus

npm install element-plus --save

• 按需导入element-plus组件

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

• 配置 vite.config.ts 文件

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

至此，就可以开心的使用 element-plus 组件了。

2 配置别名 alias

文件导入过程中需要使用相对路径，比较繁琐，因此配置src、electron目录别名。

• 修改 vite.config.ts 文件

// vite.config.ts
resolve: {
    alias: [
      {
        find: '@',
        replacement: join(__dirname, 'src')
      },
      {
        find: '#',
        replacement: join(__dirname, 'electron')
      }
    ]
  }

• 修改 tsconfig.json 文件

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
      "#/*":["electron/*"],
    }
  },
  "include": [
    "electron/**/*.ts",
    "electron/**/*.d.ts",
  ],
}

3 全局配置 scss

每次使用全局变量时需要 @import “@/assets/scss/global.scss” 比较麻烦，因此需要viite 配置 css

• 安装 sass

npm install sass --save-dev
npm install sass-loader --save-dev

• 在 vite.config.ts 中配置

// vite.config.ts
export default defineConfig({
  .......,
  resolve: {
    alias: [
      {
        find: '@',
        replacement: join(__dirname, 'src')
      },
      {
        find: '#',
        replacement: join(__dirname, 'electron')
      }
    ]
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 两种方式都可以
        additionalData: '@import "@/assets/scss/global.scss";'
        // additionalData: '@use "@/assets/scss/global.scss" as *;'
      }
    }
  },
  ....
})

• 使用方式

// global.scss
$font-color-gray:rgb(147,147,147);


// App.vue
<style lang="scss" scoped>
.text-info {
   font-size: 12px;
   line-height: 12px;
   color: $font-color-gray; // 这里使用
}
</style>

• 注意事项
  此种方式配置后，不需要在main.js中再次引入global.scss文件，否则会报已经加载过的错误。

4 初始化样式

在 main.ts 中 导入bases.scss文件 import ‘@/assets/scss/base.scss’

// assets/scss/bases.scss

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
h1, h2, h3, h4, h5, h6{ font-size:100%; } 
address, cite, dfn, em, var { font-style:normal; } 
code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
small{ font-size:12px; } 
ul, ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub{ vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 

5 初始化界面

• 修改 App.vue 文件

// App.vue
<script setup lang="ts">

</script>

<template>
  <el-row class="container">
    <el-col :span="6" class="aside">
      左侧
    </el-col>
    <el-col :span="18">
      右侧
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.container {
  height: 100vh;
  .aside {
    background-color: #91BC74;
  }
}
</style>

至此，页面初始化布局完成。