iTaster admin template

índice

• generalizar
• Instalar
• usar
• renovar
• Configuração
• Arquitetura
• Problemas conhecidos
• licença

generalizar

Administrador modificado com base no modelo Webpack4.x do vue-cli. Não faça o download. O código preliminar não possui nenhuma função.

Instruções de atualização

• 19/06/2018 Atualize o webpack, use webpack4 e recomende o novo plug-in mini-css-extract-plugin

Instalar

 ＃克隆该项目
git clone https://github.com/iTaster/webpack4-template

# 安装依赖关系
npm install

# 编译开发环境
npm run dev

Por padrão, http://localhost:1988/ é aberto automaticamente.

usar

 # 编译生产环境
npm run build

# 构建生产环境
npm run build --report

renovar

Para garantir atualizações subsequentes dos módulos do projeto

 # 检测模块
npm outdated

# 更新模块
npm update

# 删除 node_modules 文件
npm install rimraf -g
rimraf node_modules

O comando npm outdated verificará seus módulos instalados e informará quais estão desatualizados.

As informações específicas incluem: a versão atualmente instalada (Current), a versão para a qual você deve atualizar (Wanted) e a versão mais recente no repositório (Latest).

Configuração

1. Se você deseja fazer upload da pasta dist , basta excluir /dist na configuração do arquivo ignorado (arquivo .gitignore ).

2. Por padrão, os arquivos de recursos compilados e processados ​​pelo webpack serão armazenados na pasta static . Se você quiser armazená-los apenas no diretório de arquivos raiz, modifique o parâmetro build.assetsSubDirectory em config/index.jx para deixá-lo em branco. Mas não recomendado! Desta forma, alguns caminhos de imagem estarão errados ao empacotar. Recomenda-se que recursos menores que 10kb e alguns ícones svg (coisas que geralmente não serão alteradas) sejam colocados na pasta src/assets , e outros sejam colocados na pasta static pasta.

3. Por padrão, os arquivos css/js empacotados possuem source map , que são muito úteis para depuração de código no ambiente de desenvolvimento. No entanto, não é recomendado no ambiente de compilação e produção modificar o arquivo config/index.js e alterar o valor. de build.productionSourceMap para: false .

4. Se o código estiver sendo executado no servidor e você não quiser ter #/ na barra de endereço, será necessário excluir mode: 'history' em router/index.js (a configuração de back-end também é necessária, caso contrário, a página atualizará 404); se a página precisar usar saltos de âncora Vá para o local especificado e exclua a anotação scrollBehavior .

5. Ele vem com autoprefixer . Escrever código CSS diretamente no arquivo vue adicionará automaticamente o prefixo.

Arquitetura

A seguinte estrutura de diretório é recomendada no desenvolvimento grande de página única:

src
    ├── README.md
    ├── assets                  // 全局资源目录
    │    ├── images            // 图片
    │    ├── css               // CSS 样式表
    │    └── fonts             // 自定义字体文件
    ├── components              // 公共组件目录
    │    ├── NavMenu.vue
    │    ├── Slider.vue
    │    └── ...
    ├── directives               // 公共指令
    ├── filters                  // 公共过滤器
    ├── i18n                     // 国际化
    │    ├── index.js           // 入口文件
    │    ├── zh.js
    │    └── en.js
    ├── router                   // 路由
    │    └── index.js
    ├── store                    // 状态管理
    │    ├── index.js        
    │    └── ...
    ├── views                    // 页面视图
    │    ├── login
    │    │    ├── index.vue
    │    │    ├── LoginForm.vue
    │    │    └── LoginSocial.vue
    │    ├── home
    │    │    ├── index.vue
    │    │    ├── HomeBanner.vue
    │    │    └── ...
    │    └── ...
    ├── App.vue                // 默认程序入口
    └── main.js

vantagem:

• Se você quiser usar /login em outro projeto, basta copiá-lo ou movê-lo para o diretório /components.

• Contanto que você tenha instalado quaisquer dependências externas e definido o mesmo carregador na configuração, o projeto deverá funcionar bem.

Problemas conhecidos

• Há um bug ao ocultar a barra lateral esquerda

contribuir

Você pode contribuir livremente para este projeto enviando problemas e/ou pull requests. Este projeto é orientado a testes, portanto, lembre-se de que todas as alterações e novos recursos devem ser cobertos por testes

licença

Este projeto está licenciado pelo MIT.