vue boilerplate template Download - vue boilerplate template Código Fonte Download

vue boilerplate template

Outras categorias

vue-boilerplate-template V2.0.0

Baixar

Modelo de caldeira Vue

? (Vue webpack vuex vue-router vue-i18n element-ui)

? Bom modelo de caldeira para criar médio plus vue.js (2.*) Projeto

Wiki

Objetivo e filosofia

Para como criar projetos de vue de tamanho médio (+), forneça alguma referência baseada em experiência passada. O mais recente Boilerplate Vue baseado no vue-cli3 foi de código aberto: Awesome-Vue-Cli3-Exemplo, se você prestar atenção, acredito que vale muito a pena ?.

Pré -requisitos

Node.js (> = 4.x, 8.x preferido), npm versão 4+ (fio preferido) e git.

Demonstração

Página de demonstração online

Vantagem

Com base na compilação vue-cli , faça mais otimização sobre como facilitar o uso do VUE.
Já incluiu muitas bibliotecas comumente usadas, como vue-i18n , axios , lodash ...
Com alguns artigos de experiência sobre Vue , como: 如何写一手漂亮的 Vue. E ainda é atualizado.
Faça mais otimização sobre como criar o aplicativo usando WebPack .
- Webpack 打包优化之体积篇
- Webpack 打包优化之速度篇
- Otimize suas bibliotecas com Webpack
- Webpack bom tutorial

Uso

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

Vá para http: // localhost: 8080/. Se a porta 8080 já estiver em uso em sua máquina, o programa especificará a porta disponível (incremental) para você, por exemplo, 8081 / 8082 .... Obviamente, você pode substituir temporariamente a porta usando o seguinte comando:

 PORT=8888 npm run dev

Suplemento adicional : Você precisa garantir que a porta seja um comando que possa ser executado em sua máquina.

Mais comando

 npm run build

node build.js , inicie um projeto de compilação.

 npm run build:dll

Execução equivalente webpack --config build/webpack.dll.conf.js , para obter mais informações, consulte Webpack.dllplugin.

 npm run jarvis / yarn run jarvis

Execute o webpack-jarvis (um painel Webpack muito inteligente baseado no navegador) ， no seu navegador aberto: localhost: 1337, você o tem.

npm run pretest

Usando o NodeJS para criar o servidor local: http: // localhost: 3000/, faça um pré -teste simples para o código após o pacote.

 npm run analyz

O plug -in Webpack e o utilitário CLI que representa o conteúdo do pacote como o TreeMap Zoomable Interactive conveniente. Ele abrirá automaticamente este endereço: http: // localhost: 8888/.

Lista de plug -in dependente

Vue2
Vue-Router
Vuex
Vue-i18n
Axios
Bootstrap
Element-ui
Lodash
~~momento~~ Dayjs
JS-Cookie
... ...

Solicitação de operação

Seu back -end pode retornar os seguintes dados de formato ， é melhor.

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

No front -end, você pode lidar com a solicitação assim:

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

Tão atencioso, o modelo foi ajudado a lidar com a solicitação uniformemente, para que você possa ser tão fácil de usar, é claro, você pode alterar o seu próprio conforme necessário no arquivo helper/ajax.js .