First, what is the VUE
[ Official description ] Vue (pronunciation / vjuː /, similar to the view) is a progressive frame for constructing user interfaces. The other frame difference is large, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, is not only easy to use but also easy to integrate third-party libraries or existing project. On the other hand, when the modern tool chain and various support libraries when used in combination, Vue also fully capable of providing drive for complex one-page application.
Second, why should learn VUE
In the past, the development of business management procedures are used in MVC architecture, front-end V generally just show strong dependence of the back-end control end, developers either a demand has been developing from the front-to-back, or front-end, back-end development of separate , but the front and rear ends are tightly coupled, front and back end developers often have to wait for each other, the application can not be deployed separately, there is no flexibility, so in order to solve these problems, gradually developed into separate front and rear end of the way, good front and rear end defined interfaces after mutually dependent, you can separate the development, debugging, very convenient and very easy to separate the deployment, enhance flexibility. Of course, VUE can also be embedded directly in the previous development approaches, but generally not recommended.
I plan to write a series of blog posts to bring you develop a VUE + SpringBoot + SpringSecurity + Mybatis + Mysql front and rear end of the separation-based management system, this is the front part blog series.
Third, build VUE environment
1, installed Node
vue operation is dependent on the node's npm management tools to implement, so the first step you need to install Node, into http://nodejs.cn/download/ official website, according to their own windows operating system is 32 or 64 bits select the appropriate version, as shown below, I used to download the zip, unzip download directly to a directory, then the directory path of the windows environment variable added to the path, then run cmd in windows, into the command line, the input node -v, displays the version of node means that the installation was successful, as shown below:
2, mounting VUE-CLI
VUE-CLI is based on a phase of Webpack vue template project, our project development project based on this template, so to build a project before the first need to install the VUE-CLI, back then the new project is not required.
In the Windows command line execute the following command: npm install vue-cli -g can be.
3, New Project
First create a project in the windows folder, enter this directory on the windows command line, execute the following command:vue init webpack，然后根据提示输入项目名等，如下图：
4, the installation project dependencies
Continue on the windows command line (under the project directory): npm install Note: Now new node version does not need to execute this command, if it is using the old version of the node is required to perform.
5, run the project
Continue on the windows command line (under the project directory): npm run dev, after a successful operation in the following figure, open IE enter: http: // localhost: 8080 to open the project, see below II:
Note: Since I have opened a vue project, so the slogan chart below automatically become a figure of 8081, which is a specific port, we can look red box part of the figure
Figure I
Figure II
Fourth, the installation of development tools
Theoretically built vue can use any text file development tools to develop, but a good tool can be more effective, I recommend using VSCode, enter in your browser https://code.visualstudio.com/ , select the appropriate version Download installed. After installation open vscode, select Open folder, select their own project folder, you can see all open source code for the project in the File menu.
