在vue项目中设置一些全局的公共样式

在 Vue 项目中设置全局公共样式，可以通过多种方法实现。以下是两种方法的示例说明：

方法一：使用全局样式文件

在项目中新建一个 styles 文件夹，并在其中创建一个 global.scss 文件。
在 global.scss 文件中定义需要设置的全局样式，例如：

body {
  font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

a {
  color: #007aff;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

在 main.js 文件中加载 global.scss 文件：

import Vue from 'vue';
import App from './App.vue';
import './styles/global.scss';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

通过以上步骤，全局样式文件（global.scss）中的样式会被应用到整个项目中。

方法二：使用 Vue 插件

创建一个 plugins 文件夹，并在其中创建一个 GlobalStyles.js 文件。
在 GlobalStyles.js 文件中创建一个 Vue 插件：

export default {
  install(Vue) {
    Vue.mixin({
      created() {
        if (this.$options.styles) {
          const styles = this.$options.styles;
          const head = document.getElementsByTagName('head')[0];
          const style = document.createElement('style');
          style.type = 'text/css';
          style.textContent = styles;
          head.appendChild(style);
        }
      },
    });
  },
};

该插件会在每个 Vue 组件实例创建时，检查组件选项中是否包含 styles 属性。如果存在，则将样式插入到页面的 <head> 中。

在项目中使用该插件：

import Vue from 'vue';
import App from './App.vue';
import GlobalStyles from './plugins/GlobalStyles';

Vue.use(GlobalStyles);

new Vue({
  styles: `
    body {
      font-family: "Helvetica Neue", "Helvetica", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
    }

    a {
      color: #007aff;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  `,
  render: (h) => h(App),
}).$mount('#app');

在这种方式下，我们需要在创建 Vue 实例时，将需要设置的全局样式通过 styles 属性传递进去。

以上就是两种设置全局样式的方法示例。第一种方式可以将样式和代码分离，管理更加方便，而第二种方式可以通过插件机制，更加灵活地控制样式的插入位置。根据实际情况，可以选择其中一种或多种方式来设置全局样式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在vue项目中设置一些全局的公共样式 - Python技术站

在vue项目中设置一些全局的公共样式

方法一：使用全局样式文件

方法二：使用 Vue 插件

相关文章