Chapter I Installation of Scaffolding

preface

The front end is a hodgepodge, with various technologies and frameworks emerging in an endless stream, from PC to mobile, from the front end to the back end, from web to desktop applications, and even native Android and ios. Can say JS in hand, the world I have (manual funny).

background

To tell you the truth, after several years of front-end, I still think that no matter what framework you have, what modular, my husband will use jquery, the whole gaudy, I can achieve the requirements of ok! Hum, but when I did get to VUE, WTF? Can you write that? Development is not too smooth ah! Don’t manipulate the DOM, just worry about the data layer, get the data from the interface, update the data, and then you don’t have to worry about the rest.

introduce

I’m going to share my transition from jquery to VUE, hoping to help you out. I believe that before reading this article, you should have seen a lot of information about VUE, but most of it is just a concept + simple fragments, I guess you are just like me after knocking on the wall. So I decided to write a document myself that I could understand, and probably most people could understand.

Install nodeJS

Nodejs requires a minimum version of 8.9.4 or higher (very important). I won’t tell you how to install nodeJS. There are a lot of tutorials online, but don’t forget NPM’s Taobao mirror source. To see what version of Node you have, open the command line and type node -v

(2) Install webpack

Once again, open the command line and type NPM install webpack -g to install webpack globally so that you don’t have to reinstall Webpack every time you create a new project. When you’re done, type webpack -v to see if the following image appears:

webpack -v

(iii) Installation of VUE scaffolding

Since it starts from 0, it is recommended that you start from scaffolding directly. If you build it yourself, it will be too big to just create various folders, let alone configure webpack by yourself. Go ahead and type NPM install vue-cli -g. After completing, type vue -v to check whether the installation is successful. Note that -v is uppercase.

The above steps have prepared the environment we need, and then start to enter the development phase

  1. Create a new folder, open it, hold down Shift + right mouse button in the blank of the folder, and clickOpen the command window here, the inputvue init webpack testHere,testYou can name it yourself, but don’t use Chinese. Then keep pressing enter, note:? Use ESLint to lint your code? (Y/n)It is recommended to type n when you see this line. This is an ES6 syntax detector. If you turn it on, you need to write code strictly according to ES6 rules.

    It’s almost done at this point. At this point, you will notice that there are a lot of things in the new folder:

  2. On the command line that you just opened, typecd test“, is to enter the directory you just created, your folder name, you CD whatever
  3. Continue to inputnpm install, will automatically install the various dependencies you need
  4. When you’re done, start running the project. Typenpm run dev, run successfully and open in the browserhttp://localhost:8080Look at this picture and you have succeeded

conclusion

Don’t worry, just started, this is just installation and operation of your project, the subsequent chapters I will continue to write from shallow to deep, want to see you can pay attention to me, today off work first.

All chapters

  • Chapter I Installation of Scaffolding
  • Chapter two: Initial experience
  • Chapter 3 Login page
  • The fourth chapter axios
  • Chapter 5: Routing hook and plug-in development