Descarga vue boilerplate template - Descarga del código fuente vue boilerplate template

vue boilerplate template

Otras categorias

vue-boilerplate-template V2.0.0

Descargar

Plantilla repetitiva de Vue

?(vue webpack vuex vue-router vue-i18n element-ui) listo para usar

? Bonita plantilla repetitiva para crear un proyecto medium plus Vue.js(2.*)

中文 WIKI

Objetivo y Filosofía

Para saber cómo construir proyectos VUE de tamaño mediano (+), proporcione alguna referencia basada en experiencias pasadas. El último Vue Boilerplate basado en vue-cli3 ha sido de código abierto: awesome-vue-cli3-example. Si le prestas atención, creo que vale la pena .

Requisitos previos

Node.js (>=4.x, preferido 8.x), Npm versión 4+ (preferido Yarn) y Git.

Manifestación

Página de demostración en línea

Ventaja

Basado en la compilación vue-cli , realice más optimizaciones sobre cómo facilitar el uso de vue.
Ya ha incluido muchas bibliotecas de uso común, como vue-i18n , axios , lodash ...
Con algunos artículos de experiencia sobre Vue , como: 如何写一手漂亮的 Vue. Y todavía está actualizado.
Optimice más cómo construir la aplicación usando WebPack .
- Paquete web 打包优化之体积篇
- Webpack 打包优化之速度篇
- Optimice sus bibliotecas con webpack
- Bonito tutorial de paquete web

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

Vaya a http://localhost:8080/. Si el puerto 8080 ya está en uso en su máquina, 8082 programa especificará el puerto disponible (incremental), por ejemplo, 8081 .... Por supuesto, puedes reemplazar temporalmente el puerto usando el siguiente comando:

 PORT=8888 npm run dev

Suplemento adicional : debe asegurarse de que PORT sea un comando que se pueda ejecutar en su máquina.

Más comando

 npm run build

node build.js , inicie un proyecto de compilación.

 npm run build:dll

webpack --config build/webpack.dll.conf.js . Para obtener más información, consulte webpack.DllPlugin.

 npm run jarvis / yarn run jarvis

ejecute webpack-jarvis (un panel de Webpack basado en navegador muy inteligente), abra en su navegador: localhost:1337, lo tiene.

npm run pretest

Usando nodejs para construir el servidor local: http://localhost:3000/, realice una prueba previa simple para el código después del paquete.

 npm run analyz

Complemento de paquete web y utilidad CLI que representa el contenido del paquete como un conveniente mapa de árbol interactivo con zoom. Automáticamente abrirá esta dirección: http://localhost:8888/.

Lista de complementos dependientes

vue2
enrutador vue
vuex
vue-i18n
axios
oreja
elemento-ui
lodash
~~momento~~ diajs
galleta js
... ...

Solicitud de operación

Su backend puede devolver los siguientes datos en formato, es mejor.

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

En la interfaz, puede manejar la solicitud de esta manera:

 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
})

Por lo tanto, se ha ayudado a la plantilla a manejar las solicitudes de manera uniforme, por lo que puede ser tan fácil de usar que, por supuesto, puede cambiar la suya propia según sea necesario en el archivo helper/ajax.js .