Projeto Vue global Menos configuração [prática do projeto Vue.js: sistema de autoteste COVID-19]

Documentos de design e desenvolvimento da Web do sistema de autodetecção COVID-19

O primeiro projeto de Sylvan Ding baseado em Vue.js. As informações fornecidas neste projeto são apenas para referência e a precisão, validade, atualidade e integridade das informações não são garantidas. Para obter mais informações, consulte a Comissão Nacional de Saúde e Comissão de Saúde local na rede Internet!
Explore a documentação »

Ver demonstração · Reportar bug · Solicitar recurso

Projeto Vue global Menos configuração

Usamos Lesscomo nosso pré-processador para o projeto. Você precisa instalar manualmente os carregadores de webpack correspondentes com as versões corretas:

# Less
npm i [email protected] [email protected] -D --legacy-peer-deps

Em seguida, adicione o carregador à sua webpackconfiguração build/webpack.base.conf.js. Por exemplo:

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

Para cada componente Vue, criamos um arquivo Less correspondente em formato src/assets/styles.

ambiente de desenvolvimento

nó	14.16.1
npm	8.18.0
visualizar-cli	2.9.6
vue	2.5.2

solução

Você pode importar arquivos automaticamente (para cores, variáveis, mixins…) seguindo os próximos passos.

Simplesmente usar o style-resources-loader ou vue-cli-plugin-style-resources-loader para definir menos variáveis ​​globais é para o Vue CLI 3, que cria um novo projeto executando vue create. Usamos Vue CLI 2, rodando vue initpara criar um projeto. Portanto, certifique-se de não usar esses pacotes no ambiente Vue CLI 2 porque vue.config.jsnão estão disponíveis.

Primeiro instale o pacote:

# install package
npm i sass-resources-loader -D --legacy-peer-deps

Em seguida, adicione função lessResourceLoaderà função cssLoadersno arquivo /build/utils.js:

function lessResourceLoader() {
    
    
    var loaders = [
      cssLoader,
      'less-loader',
      {
    
    
        loader: 'sass-resources-loader',
        options: {
    
    
          resources: [
            path.resolve(__dirname, '../src/assets/styles/common.less'),
          ]
        }
      }
    ];
    if (options.extract) {
    
    
      return ExtractTextPlugin.extract({
    
    
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
    
    
      return ['vue-style-loader'].concat(loaders)
    }
  }

Finalmente, modifique cssLoaderso item de retorno da função less:

less: lessResourceLoader()

Agora src/assets/styles/common.jsse torna seu arquivo de estilo global.

Indique a fonte ao reimprimir: ©️ Sylvan Ding 2022