With the official launch of Vue2.0, I also took this opportunity to restructure my open source project Markcook. This reconstruction not only killed the boring time when I was stuck in traffic jam on the expressway, but also deepened my understanding of Vue2.0 and Vuex2.0. It can be said that it has done more with one stroke.

Project address:https://github.com/jrainlau/m …
Online address:http://jrainlau.github.io/mar …
Desktop program download (windows only):markcook2.0-win32-x64.zip

What is Markcook?

In the last version, I wrote an article calledMarkcook 1.2, Ultralight Open Source markdown EditorHowever, there is still a lack of a complete definition of Markcook. In version 2.0, Markcook is defined as:

A smart and beautiful markdown editor.

A smart and pretty markdown editor.

Update content

Version 2.0 uses Google’sMaterial DesignAs a design specification, the UI part has been completely reconstructed, providing more convenient operation and visual comfort. There is also a more detailed and humanized design for the user experience, providing the most comfortable editing environment to the greatest extent.

The new version allows multitasking, which means that you can open multiple markdown files at the same time through Markcook, and you can easily switch between them in the sidebar:

You can add files directly to Markcook’s workspace by dragging them:

The biggest change lies in the upgrade of the toolbar. You can insert markdown format statements into the page by clicking on the toolbar button, or you can directly change a paragraph of text into markdown format:

You may wonder why Markcook does not provide the function of “saving progress” like other editors. In fact, Markcook will automatically save the content for you during the input process, so that even if you close the page, the next time you open Markcook, you will find that your previous content is still in place.

Dig deeper into Markcook.

Version 2.0 usesVuex2.0As a global state management tool, components are completely decoupled and can be easily maintained and customized. Its main directory structure is as follows:

|__  index.html
 |__ src
 |__ App.vue
 |__ components
 |__ inputer.vue
 |__ navBar.vue
 |__ outputer.vue
 |__ sideMenu.vue
 |__ main.js
 |__ vuex
 |__ store.js

As you can see, Markcook has been split into five components, including a root component.App.vueAnd four on/componentsFunctional components under folders. The status between components passes completely/vuex/store.jsManagement, the process can be explained by the following architecture diagram:

The key logic is also put instore.jsInside, the following is a brief analysis of the implementation principles of some key functions:

• Enter the input contentstore.jsAfter processing, it is output to theoutput.vueTo achieve the effect of synchronous input and output.

• Each article is an object with three attributes:id,content,current. Instore.jsThere is one insidearticleListArray, specially used to store article objects. Each time a new file is created, a new article object is added to the array. When switching files, only the article object is switched according to the corresponding ID.currentProperty.

  articleList: [
   {
   id: createID(),
   content: 'Untitled\n---\n',
   current: true
   }
   ]

• The automatic saving progress function of the article is realized throughlocalStorageIt was achieved. Every article is inlocalStorageLocation is allocated according to ID, and the content under the corresponding ID will be updated in real time during the input process. At the same timelocalStorageThere is a man namedidArrThe object of the, specifically used to store the ID of the article. The automatic reading of articles is based onidArrGet the article ID and then get the article content under the corresponding ID.

Please read more details directlySource codeDue to the limited space, I will not make too many introductions here.

Postscript

The feeling of coding while stuck in a traffic jam on the freeway is really amazing. Without the Internet and google, it greatly stimulates the ability to think independently and benefits a lot.

What I want to say most is UI design. Material Design is my favorite design style. It has been used in the previous version, but it is still ugly. Although there is still a big gap between this edition and professional designers, it is really pleasing to me, and it doesn’t waste me thinking about what Markcook2.0 should look like even when I sleep.

Upgrading to Vue2.0 has not changed much in the development experience. On the contrary, the use of VUE 2.0 makes me a little unaccustomed, because it is quite different from the usage of the old version. However, thanks to the details of the document, after reading the document carefully, the problems encountered can basically be solved. After some exploration and development, Vuex2.0 is actually easier to understand and use because it putsstore,mutation,actionAndgetterAll put together, only need to pass through in the assemblythis.$storeCan be rightstoreOperation, logic is very clear and easy to understand, so it is easy to understand why the logic of each component in my project is very simple and the amount of code is very small.

Due to the limited level, there will inevitably be mistakes, omissions and imperfections in the project code. I very much look forward to receiving suggestions from everyone and will continue to maintain Markcook in the future.

Thank you all ~