vue element ui scaffold webpack4
1.0.0
Ele foi atualizado para webpack5 . Se precisar usar webpack4, você pode alternar as ramificações: git checkout webpack4 .
**vue3 + element-ui + versão webpack5: branch comutável: git checkout vue3 **
Este projeto é um projeto de andaime de várias páginas e vários ambientes que usa element-plus no Vue e é construído com base no webpack5.
Visualização do efeito do projeto 1 Visualização do efeito do projeto 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
Velocidade de construção mais rápida e tamanho de arquivo de pacote menor.
Duas maneiras de gerar automaticamente arquivos de páginas HTML (implementadas pelo html-webpack-plugin):
Durante o desenvolvimento, modifique, adicione ou exclua arquivos svg no diretório src/iconfont/svgs para gerar ícones de fonte automaticamente (suportando ttf, woff2, woff, eot, svg) e suportando estilos css e visualizações html ao mesmo tempo, recarregamento a quente; é imediato Você pode ver o efeito. Você também pode usar npm run build-font para gerar esses arquivos manualmente. Não há necessidade de acessar manualmente icomoon.io ou iconfont.cn para gerar e modificar ícones de fontes, CSS e visualizações de ícones. Implementado com base em webpack-iconfont-plugin-nodejs.
O projeto pode usar o mocker dinâmico como simulação de dados da interface back-end. Os dados da simulação estão localizados na pasta mock e são implementados em arquivos js, que são fáceis de entender, convenientes e flexíveis.
Método de ativação: 1. npm run dev iniciará o serviço simulado ao mesmo tempo por padrão. 2. Execute sozinho: npm run mock.
Arquivo de configuração: 1. O endereço do serviço de interface em config/serverMap.js é: base: '"//localhost:8085"' 2. O arquivo mock/mock-config.js configura vários parâmetros do mock.
A fonte do carregamento css sob demanda aponta diretamente para o arquivo scss do element-plus, não para o arquivo css pré-compilado. Anexe o arquivo src/assets/css/element-theme/theme-changed.scss ao arquivo de variável de tema element-plus theme-chalk/src/common/var.scss em tempo de compilação por meio do plugin join-file-content-plugin . É possível visualizar o efeito imediatamente após modificar a variável scss sem pré-compilar o arquivo element-plus scss em um arquivo css. Ao mesmo tempo, as variáveis scss do element-plus podem ser referenciadas em qualquer lugar do projeto.
Use o plug-in webpack-theme-color-replacer para extrair as regras de estilo contendo cores do tema no css ao construir o webpack e gerar um arquivo css/theme-colors.css. Então, quando a página da web estiver em execução, baixe este arquivo css e substitua dinamicamente as cores nele pela cor do tema personalizado. Como apenas o css relacionado à cor é extraído, a velocidade é muito mais rápida do que baixar todo o css do element-plus. E não apenas os estilos element-plus, mas também as cores do tema dos estilos auto-escritos no projeto podem ser substituídas.
Ao publicar código, os arquivos de mapeamento de código-fonte são gerados em uma pasta unificada de mapeamento de código-fonte e mapeados automaticamente no ambiente de teste. Por uma questão de segurança do código, o ambiente de produção não realiza mapeamento automático. Se a depuração for necessária, o Chrome oferece suporte ao mapeamento manual do código-fonte por meio da URL. De acordo com os requisitos de segurança, o nome da pasta de mapeamento do código-fonte é um nome de pasta que apenas os desenvolvedores conhecem. Ou use um algoritmo de criptografia dinâmica para gerar esse nome de pasta. Ou coloque esses arquivos de mapeamento de código-fonte no diretório do site que requer verificação de login. Modifique o nome do diretório na função getSourceMapPath do arquivo config/index.js conforme necessário. Dessa forma, quando ocorre um bug e a depuração on-line é necessária, o mapeamento do código-fonte pode ser adicionado rápida e manualmente para facilitar a depuração e o vazamento do código-fonte é evitado.
Use a solução simples de vw+rem para implementar layout responsivo. Use o plug-in postcss-pxtorem para converter automaticamente a unidade em css de px para rem. Durante o desenvolvimento, px ainda é usado como unidade de comprimento css. 1rem = 100px, fácil de converter durante a depuração. Comum para PC e terminais móveis (é melhor substituir o element-plus por outras estruturas de UI para terminais móveis).
Compatível com IE10 e superior, Chrome, Firefox, Safari, QQ, 360, 2345 e outros navegadores. Se você precisar mudar para a versão móvel, modifique .browsersrc para a versão móvel.
npm run dev
Desenvolvimento local e depuração. Use o endereço do serviço de interface de backend configurado por dev em config/serverMap.js.
npm run build-test
Usado para implantação do ambiente de teste. js possui mapeamento de código-fonte, css não possui mapeamento de código-fonte. Use o endereço de serviço de interface configurado por test em config/serverMap.js.
npm run build
Para implantação em ambiente de produção. Use o endereço de serviço de interface configurado por prod em config/serverMap.js.
npm run build-demo
A configuração é a mesma do ambiente de produção, apenas o endereço do serviço de interface é diferente. Use o endereço do serviço de interface configurado pela demonstração em config/serverMap.js.
npm run build-dev
Usado para publicar e implantar no servidor do ambiente de desenvolvimento, adequado para situações em que a publicação no servidor é necessária para depuração. Use o endereço do serviço de interface configurado por dev em config/serverMap.js.
npm run build-preview
Os dados simulados estáticos serão habilitados, nenhum serviço de back-end será necessário e os dados simulados serão usados para simular chamadas ajax (desde que a interface API correspondente tenha gravado dados simulados). Equivalente a npm run build --preview && npm run play-dist .
npm run play-dist
Com o diretório dist como diretório raiz, inicie um serviço http estático local para visualizar os resultados de execução do diretório dist após a publicação.
npm run mock
Quando o serviço de interface de back-end não for concluído, ele poderá ser usado para simular os dados da interface de back-end para depurar a função de front-end.
npm run proxy80
Ao fazer proxy da porta existente (porta 80xx) para a porta 80 ou porta 443, a porta pode ser ocultada durante o acesso e o acesso https também pode ser alcançado. Combinado com os hosts do sistema e configurando 127.0.0.1 como o nome de domínio especificado, você pode usar diretamente o nome de domínio para acessar a página de depuração local, que é usada para depurar alguns cenários onde o acesso ao nome de domínio deve ser usado (como depuração do WeChat, para obter detalhes, consulte: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html).
