Vue template web

Vue-template-web é um modelo de página inicial simples usando vue element-ui

Introdução:

Este projeto é um template de página simples e de estrutura básica, que pode ser facilmente transformado em algumas páginas promocionais, páginas temáticas, páginas de sites oficiais, etc.

Implementação do projeto:

1. Página âncora de rolagem com encadernação bidirecional.
2. Suporte à internacionalização i8n do vue element-ui.
3. Modifique o tema da cor do tema.
4. O Vuex armazena em cache persistentemente o tema e o idioma selecionados pelo usuário.
5. Usei a biblioteca de ícones de fontes iconfont.
6. Encapsula uma solicitação de axios.

Estrutura do projeto:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

Renderização:

Como correr:

-.Clone o projeto ( git clone https://github.com/pjqdyd/Vue-template-web.git ).

-. Execute npm install para baixar as dependências (se o download for lento: npm install --registry=https://registry.npm.taobao.org ).

-. Execute npm run serve para iniciar o projeto e visite http://localhost:8080 para navegar na página.

-.Execute npm run build para compilar e empacotar o projeto.

Perceber:

1. A nova ramificação Vue-template-web-cdn usa CDN para carregar algumas dependências, evitando que o arquivo js fique muito grande após o empacotamento e que a primeira tela demore muito para carregar.

Testado:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

Portanto é recomendado usar o branch Vue-template-web-cdn;

2. Após otimizar a rolagem usando o ponto de ancoragem window.scrollTo(options), preste atenção à compatibilidade do navegador: window.scrollTo é compatível Claro, você pode escolher a versão de envio anterior para ser compatível com outros navegadores;

dica:

1. O projeto implementa a internacionalização vue element-ui i8n. A comutação em chinês e inglês define dois conjuntos de idiomas, que são definidos em i18n/langs/.

2. Implementação da mudança de tema:

Anteriormente, ele era implementado com referência ao caso oficial de mudança de skin. A cor pode ser alterada junto com os componentes do ElementUI. Como esse método é mais complicado e pode causar bugs desconhecidos, atualmente usamos o salvamento direto de um valor de cor para alterar o tema. , e passar this.$ no projeto store.state.theme pode obter o valor da cor do tema.
(Mais recomendado: você pode usar variáveis ​​css var para vincular ao elemento raiz para alterar o estilo).

3. A rolagem da âncora da página refere-se a este projeto de código aberto.

4. O projeto encapsula a solicitação axios e vincula o atributo global $globalRequest. Você pode chamar o método de solicitação assíncrona test4() em qualquer página por meio de await this.$globalRequest.test4(arg);

5. Se o projeto encontrar áreas que podem ser melhoradas, você poderá levantar uma questão para melhoria.