téléchargement vue boilerplate template - vue boilerplate template Téléchargement du code source

vue boilerplate template

Autres catégories

vue-boilerplate-template V2.0.0

Télécharger

Modèle passe-partout Vue

?(vue webpack vuex vue-router vue-i18n element-ui) prêt à l'emploi

? Joli modèle Boilerplate pour créer un projet Medium Plus Vue.js (2.*)

Dans WIKI

Objectif et philosophie

Pour savoir comment créer des projets (+) VUE de taille moyenne, fournissez des références basées sur l'expérience passée. Le dernier Vue Boilerplate basé sur vue-cli3 a été open source : Awesome-vue-cli3-example, si vous y prêtez attention, je pense que cela en vaut vraiment la peine ?.

Conditions préalables

Node.js (>=4.x, 8.x préféré), Npm version 4+ (Yarn préféré) et Git.

Démo

Page de démonstration en ligne

Avantage

Basé sur vue-cli build， Faire davantage d'optimisation pour faciliter l'utilisation de vue .
A déjà inclus de nombreuses bibliothèques couramment utilisées, telles que vue-i18n , axios , lodash ...
Avec quelques articles d'expérience sur Vue ,Par exemple : 如何写一手漂亮的 Vue. Et est toujours mis à jour.
Optimisez davantage la façon de créer l'application à l'aide de WebPack .
- Webpack 打包优化之体积篇
- Webpack 打包优化之速度篇
- Optimisez vos bibliothèques avec webpack
- Tutoriel Webpack Nice

Usage

 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

Accédez à http://localhost:8080/. Si le port 8080 est déjà utilisé sur votre machine, le programme spécifiera pour vous le port disponible (incrémental), par exemple 8081 / 8082 ... . Bien entendu, vous pouvez remplacer temporairement le port à l'aide de la commande suivante :

 PORT=8888 npm run dev

Supplément supplémentaire ： Vous devez vous assurer que PORT est une commande qui peut être exécutée sur votre machine .

Plus de commandement

 npm run build

node build.js , lancer un projet de construction .

 npm run build:dll

Exécution équivalente webpack --config build/webpack.dll.conf.js , Pour plus d'informations, voir webpack.DllPlugin.

 npm run jarvis / yarn run jarvis

exécutez webpack-jarvis (un tableau de bord Webpack très intelligent basé sur un navigateur) ， Dans votre navigateur, ouvrez : localhost:1337 , vous l'avez.

npm run pretest

En utilisant nodejs pour construire le serveur local : http://localhost:3000/ , effectuez un simple pré-test pour le code après le package.

 npm run analyz

Plugin Webpack et utilitaire CLI qui représente le contenu du bundle sous forme d'arborescence interactive zoomable pratique. Il ouvrira automatiquement cette adresse：http://localhost:8888/ .

Liste des plugins dépendants

vue2
vue-routeur
vuex
vue-i18n
axios
bootstrap
élément-ui
lodash
~~moment~~ jourjs
js-cookie
... ...

Demande d'opération

Votre backend peut renvoyer les données au format suivant, c'est mieux.

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

Au début, vous pouvez gérer la requête comme ceci :

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

Si prévenant, le modèle a été aidé à gérer la demande de manière uniforme, afin que vous puissiez être si facile à utiliser, bien sûr, vous pouvez modifier le vôtre selon vos besoins dans le fichier helper/ajax.js .