symbolMe

symbol_me

Project setup

 npm install

Compiles and hot-reloads for development

 npm run serve

Compiles and minifies for production

 npm run build

Lints and fixes files

 npm run lint

feature

1. The interface is relatively beautiful, and you can customize your resume information, including personal information, school experience, project experience, and personal skills information.
2. Project information is stored in the mongodb database, large files are stored using gltf, and the background service program is built by express. Project address: https://github.com/Longbao521/symbolMeServer
3. The project contains multiple animations, including the animate.css library and custom animations for your reference.
4. The project supports markdown language, supports the edit preview function of the blog, and supports the upload function. The uploaded blog is saved in the database and updated in real time on the homepage of your blog, allowing everyone to record what they have learned.
5. Supports Cesium, you can edit test code online and run it
6. The project uses some tools commonly used in vue projects, such as vue-cli scaffolding to build projects, element-ui to build basic component styles, etc.
7. The project will be maintained and improved, and a mini program version (mpVue, project address: https://github.com/Longbao521/mpvue) and a desktop version (Electron) will be launched. If possible, I will continue to study Flutter and develop cross-platform applications. Stay tuned
8. The project code strictly adheres to the ESLint specification
9. Most of the project layout adopts flex layout

technology stack

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

Problems encountered

• Problem with tag style selector in v-html If the tag written in the template can define the style in style scoped, but the tag in v-html cannot define the corresponding style in this area, there are several solutions:
  • Remove the scoped of style and define the label style in the global style sheet. This is not recommended because it will affect the styles of elements in different components.
  • Use /deep/(LESS, SCSS) or >>>(CSS) deep selector
  • In the updated life cycle, js dynamically configures styles
• How to bind different functions to each button in the v-for loop? Why can't we add a function to the data?
  • Add a class routing function in methods. Each element in v-for contains a method field, specifying the function to be triggered. At this time, you can specify @click as the routing function, and pass in the method field, which is used by the routing function. Trigger the corresponding function to realize the binding between the View layer and the Model layer
• Set styles for subcomponents in vue This is very similar to the first question. I guess the way vue handles the content in v-html is to dynamically create a sub-component for it. The principle is very simple. The parent component cannot modify the style of the elements in the sub-component. This is when we use Element -UI is often encountered when using third-party libraries . The solution is as follows:
  • Remove the scoped of style and define the label style in the global style sheet. This is not recommended because it will affect the styles of elements in different components.
  • Use /deep/(LESS, SCSS) or >>>(CSS) deep selector

Project effect display:

Next steps

1. Improve custom functions
2. Add corresponding function modules
3. Improve token verification
4. Launched mini program version (mpvue), desktop version (ELectron) and cross-platform (Flutter)

Change log

• 1.0.1 Use custom instructions to achieve anti-shake of the submit button
• 1.0.2 Implement label editing and update function
• 1.1.0 Modify webpack, introduce Cesium, and develop Cesium test platform module
• 1.1.1 Support online editing and execution of code,