Install node and NPM

Download the node installation package from node.js official website and perform the installation

NPM has been included in the node. After the installation is completed, check whether the installation is successful by checking the version, and prompt that the output version number is successful

node -v
npm -v

Create and release packages

Create the package directory and finish NPM initialization

mkdir npm-test
cd npm-test
npm init

Gitignore file, an official GitHub customized for visual studio project, can be submitted directly in the root directory of the project.

## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.

# User-specific files
*.suo
*.user
*.userosscache
*.sln.docstates

# User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs

# Build results
[Dd]ebug/
[Dd]ebugPublic/
[Rr]elease/
[Rr]eleases/
x64/
x86/
bld/
[Bb]in/
[Oo]bj/
[Ll]og/

# Visual Studio 2015 cache/options directory
.vs/
# Uncomment if you have tasks that create the

In the development process of Vue, there are sometimes problems of loading different routes according to the permissions of different people. After some tests, a solution is found, such as:

1. Create a new config.json file in the router folder as the router's data source

[
  {
    "title": "Dashboard",
    "path": "/main/",
    "src": "dashboard",
    "summary": "statistics, charts, recent events and reports",
    "children": []
  },
  {
    "title": "Menu Example",
    "heading": true
  },
  {
    "title": "Multi Level Menu",
    "summary": "",
    "children": [
      {
        "title": "Item 1",
        "summary": "",
        "children": [
          {
            "title": "Item 11",
            "summary": "",
            "path": "/main/1",
            "children": []
          },
          {
            "title": "Item 12",
            "summary": "",
            "path": "/main/1",
            "children": []
          },
          {
            "title": "Item 13",
            "summary": "",
            "path": "/main/1",
            "children": []
          }
        ]
      },
      {
        "title": "Item 2",
        "summary": "",
        "path": "/main/1",
        "children": []
      },
      {
        "title": "Item 3",
        "summary": "",
        "path": "/main/1",
        "children": []
      }
    ]
  }

Using jQuery's slidedown() and slideup() methods to achieve an accordion effect is very simple.

Its function is to adjust the height of the selected element with the effect of animation, so that it presents a "sliding" effect, while other attributes of the element do not change; the parameter speed is the speed of animation display, and the option [callback] is the callback function executed after the completion of animation display.

If CSS3 is used to achieve this effect, there are five features to be realized and five problems to be solved:

1. Dynamically adjust the display area with the animation effect of "sliding"
2. No height is set for the selected element, and its height is adaptive by the number of sub elements
3. It can adjust the display area without occupying the position
4. The animation display speed can be adjusted by parameters
5. Optional [callback] is the callback function executed after the completion of animation display

With the problem identified, I'm ready to start with building a panel.

In some cases, we may need to "double bind" a prop. In fact, this is what the. Sync modifier in Vue 1. X provides. When a child component changes the value of a prop, the change will also be synchronized to the value bound in the parent component. This is convenient, but it can also cause problems, because it breaks the assumption of "one-way data flow".

Because there is no difference between the code of the sub component changing the prop and the normal state changing code, when you look at the code of the sub component, you have no idea when it quietly changes the state of the parent component. This will bring high maintenance cost in the application of debug complex structure.