symbolMe

symbole_moi

Configuration du projet

 npm install

Compile et recharge à chaud pour le développement

 npm run serve

Compile et minimise pour la production

 npm run build

Charpie et corrige les fichiers

 npm run lint

fonctionnalité

1. L'interface est relativement belle et vous pouvez personnaliser les informations de votre CV, y compris les informations personnelles, l'expérience scolaire, l'expérience du projet et les informations sur les compétences personnelles.
2. Les informations sur le projet sont stockées dans la base de données mongodb, les fichiers volumineux sont stockés à l'aide de gltf et le programme de service en arrière-plan est construit par express. Adresse du projet : https://github.com/Longbao521/symbolMeServer
3. Le projet contient plusieurs animations, notamment la bibliothèque animate.css et des animations personnalisées pour votre référence.
4. Le projet prend en charge le langage markdown, prend en charge la fonction d'aperçu des modifications du blog et prend en charge la fonction de téléchargement. Le blog téléchargé est enregistré dans la base de données et mis à jour en temps réel sur la page d'accueil de votre blog, permettant à chacun d'enregistrer ce qu'il a appris.
5. Prend en charge le césium, vous pouvez modifier le code de test en ligne et l'exécuter
6. Le projet utilise certains outils couramment utilisés dans les projets vue, tels que l'échafaudage vue-cli pour créer des projets, element-ui pour créer des styles de composants de base, etc.
7. Le projet sera maintenu et amélioré, et une version mini du programme (mpVue, adresse du projet : https://github.com/Longbao521/mpvue) et une version de bureau (Electron) seront lancées. Si possible, je continuerai à étudier. Flutter et développer des applications multiplateformes.
8. Le code du projet adhère strictement à la spécification ESLint
9. La plupart de la disposition du projet adopte une disposition flexible

pile technologique

Vue, Vue-CLI, Axios, LESS, Element-UI, Animate, ESLint

Problèmes rencontrés

• Problème avec le sélecteur de style de balise en v-html Si la balise écrite dans le modèle peut définir le style dans style scoped, mais que la balise dans v-html ne peut pas définir le style correspondant dans cette zone, il existe plusieurs solutions :
  • Supprimez la portée du style et définissez le style d'étiquette dans la feuille de style globale. Cela n'est pas recommandé car cela affectera les styles des éléments dans différents composants.
  • Utilisez le sélecteur profond /deep/(LESS, SCSS) ou >>>(CSS)
  • Dans le cycle de vie mis à jour, js configure dynamiquement les styles
• Comment lier différentes fonctions à chaque bouton de la boucle v-for ? Pourquoi ne pouvons-nous pas ajouter une fonction aux données ?
  • Ajoutez une fonction de routage de classe dans les méthodes. Chaque élément de v-for contient un champ de méthode, spécifiant la fonction à déclencher. À ce stade, vous pouvez spécifier @click comme fonction de routage et transmettre le champ de méthode, qui est utilisé. par la fonction de routage Déclenchez la fonction correspondante pour réaliser la liaison entre la couche Vue et la couche Modèle.
• Définir les styles pour les sous-composants dans vue Ceci est très similaire à la première question. Je suppose que la façon dont vue gère le contenu dans v-html est de créer dynamiquement un sous-composant pour celui-ci. Le principe est très simple. Le composant parent ne peut pas modifier le style des éléments du fichier. Sous-composant.C'est à ce moment-là que nous utilisons Element -UI est souvent rencontré lors de l'utilisation de bibliothèques tierces . La solution est la suivante :
  • Supprimez la portée du style et définissez le style d'étiquette dans la feuille de style globale. Cela n'est pas recommandé car cela affectera les styles des éléments dans différents composants.
  • Utilisez le sélecteur profond /deep/(LESS, SCSS) ou >>>(CSS)

Affichage des effets du projet :

Prochaines étapes

1. Améliorer les fonctions personnalisées
2. Ajouter les modules de fonction correspondants
3. Améliorer la vérification des jetons
4. Lancement de la version mini-programme (mpvue), de la version de bureau (ELectron) et multiplateforme (Flutter)

Journal des modifications

• 1.0.1 Utilisez des instructions personnalisées pour obtenir un anti-secousse du bouton de soumission
• 1.0.2 Implémenter la fonction d'édition et de mise à jour des étiquettes
• 1.1.0 Modifier le webpack, introduire Cesium et développer le module de plateforme de test Cesium
• 1.1.1 Prise en charge de l'édition et de l'exécution du code en ligne,