introduction
Brief introduction
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 used in conjunction with a modern tool chain and various support libraries, Vue also fully capable of providing drive for complex one-page application.
Vue.js MVVM data binding also provides a system and a component may be combined with a simple, flexible API, which is responsive to the target binding data may be combined and implemented as much as possible by a simple API view component.
The main features of Vue.js
Vue.js is an excellent front-end interface development JavaScript library that very reason the fire, because there are many outstanding features, which has the following main features.
1) lightweight framework
Vue.js can automatically track and calculate an expression template-dependent attributes, provide MVVM data binding and a combination of components of the system, has a simple and flexible API, so that readers easier to understand, be able to get started faster.
2) two-way data binding
Declarative rendering is mainly two-way data binding, the core is also Vue.js, which allows the use of simple template syntax will declare rendering data integrated into the DOM.
3) instruction
Vue.js interact with the page, is mainly done through the built-in instructions, instructions that effect when the value of their expression accordingly certain behaviors to the DOM.
4) of the component
Component (Component) Vue.js is one of the most powerful features. HTML elements that could be extended, the package reusable code.
In Vue, the communication component is passed through Sons The props, one-way transmission from parent to child. Sub-assemblies and components parent communication, notify the parent component by changing the trigger event data. This forms a basic communication mode Sons.
In the development of components and HTML, JavaScript, etc. have a very close relationship, according to the actual needs of custom components, enabling developers to become more convenient, can greatly reduce the amount of code written.
Component also supports thermal overloads (hotreload). When we made changes will not refresh the page, but the component itself immediately overloaded and will not affect the current status of the entire application. CSS also supports hot overloaded.
5) The client routing
Vue-router is Vue.js official route plug-ins, integration with Vue.js depth, used to build single-page application. Vue single-page applications and components based on the routing, the route for setting the access path, and the path and the mapping assembly together, achieve the traditional handover and page jump pages by hyperlinks.
6) State Management
State management is actually a one-way data flow, rendering View State drive, the user operates to generate the Action View, State make a difference, so that re-rendering View, form a separate component.
SPA and MPA contrast
MPA
Most of the traditional project structure using a multi-page application (MultiPage Application, MPA), the time required to switch the content we tend to jump a single html file, by this time, the impact of network performance, there will be a blank browser interface uncertain time, the user experience is not good.
SPA
No refresh after switching single-page application SPA application (single page application) is a user changes the address bar url by certain operations and dynamic content of different templates, user experience is good.
Vue will use plug-vue-router official to use a single page, the principle is to switch (installed and uninstalled) detected by the routing component corresponding to the address bar will change.
Comparison between the two
| SPA vs MPA | Single-page application (single page application, SPA) | Multi-page application (MultiPage Application, MPA) |
|---|---|---|
| composition | Housing a plurality of pages and page fragments | Multiple full page composition |
| Sharing of resources (css, js) | Only need to load the common housing part | Do not share, you need to load each page |
| Refresh mode | Partial page refresh or change | Full page refresh |
| url mode | a.com/#/pagone a.com/#/pagtow |
a.com/#/pagone.html a.com/#/pagtwo.html |
| user experience | Page fragments switch fast, good user experience | Page switching loads slowly, fluency is not a poor user experience |
| Transition animation | easy to accomplish | can not achieve |
| Data transfer | easily | Url dependent parameter passing, or cookie, localStorage etc. |
| Search Engine Optimization (SEO) | Requires a separate program, more difficult to achieve, is not conducive to SEO retrieval can take advantage of server-side rendering (ssr) optimization | Easy Implementation |
| Scope | Experience of high demand, the pursuit of smooth application interface | Support for applications pursuit of a high search engine |
| Development costs | High, often need to rely on professional framework | Low, but multi-page duplicate code |
| Maintenance costs | relatively easy | Relatively complex |
Installation Tools
first step:
Install node.js, specifically refer to blog Node.js installation detailed steps tutorial (Windows version) .
Step two:
Installation webpack, with particular reference blog Webpack installation configuration and packing process in detail .
third step:
Installation vue-cli, enter a command, the global installation vue-cli, wherein cnpm Taobao mirror, installation speed, i is the abbreviation install, g is an abbreviation of global.
cnpm i vue-cli -g
vue-cli creation process
first step:
After the installation is complete, run CMD, and switch to the need to create a directory Vue project, enter the following command to start creating.
the init WebPACK the Test-VUE VUE // Note: One project name must be all lowercase, otherwise it will error
Step two:
Then began the project option is set as follows:
- Name Project --- item name, hit enter;
- The Description Project --- project description, enter "Vue project testing", hit enter;
- Author --- Author, enter "aizai846", hit enter;
- Runtime + Compiler: recommended for most users and Runtime-only: about 6KB lighter min + gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere two options --- first one is compiled to run plus recommended, only the second time running. By the keyboard up and down buttons to select, hit enter;
- ? The Install vue-Router <the Y-/ the n-> --- vue route plug-ins are installed, enter "Y", hit enter;
- ESLint lint your code to the Use? <The Y-/ the n-> --- whether ESLint management code, ESLint is a management tool style code, the code is used to uniform style, the general project will be used, but as a beginner, it is recommended not to installation, type "n", hit enter;
- Unit Tests up SET <the Y / n-> --- test unit is installed, the input where "n", hit enter;
- Setup e2e tests with Nightwatch? ? <The Y-/ the n-> --- whether to install e2e test, enter here "n", hit enter;
- WE RUN Should "npm install" for you at The Project has been the After the Created? <Recommended> <use arrow Keys> Yes, use NPM Yes, use the Yarn No, the I by Will handle that myself --- three options, here we choose the first three, since vue project dependencies installed by npm install, very slow, we can create the project themselves through "cnpm install" installation.
And that we create throughout the project, as shown below.
third step:
Since the last item a second step, we have chosen to install their own project to install package dependencies, so here enter the following command to complete the project package dependencies.
F. CD: \ JsCodeProject \ VUE-Test // switch to the project directory CNPM I // wherein, CNPM mirror is installed through Taobao, speed is very fast
the fourth step:
Enter the following command to test whether the project can operate normally.
npm run dev
After a successful run in the shell command box, the output of the following information.
In this case, in your browser, enter the URL of the top, you can visit our newly created vue project, as shown below
vue Contents Introduction
Our new open project through VSCode, specific directory structure shown in FIG.
In package.json file, we can go to the development and production environment configuration file entry.
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js" }
Wherein the inlet to document development environment "webpack.dev.conf.js"; file entry for production "build.js", they are in the build file, as shown in FIG.
Wherein part of the file as follows:
- build.js --- entry file production environment, packaged for building a file, the source code to build the package (compiled, compression, etc.);
- utils.js --- is a file use frequency, this document contains three utility functions: static resources generating path generates the object ExtractTextPlugin loader or string, generating style-loader configuration;
- webpack.base.conf.js --- appears webpack.base.conf.js in webpack.dev.conf.js, this document is the development and production environments, even test environment, public webpack configuration of these environments;
- Configuring entrance webpack.dev.conf.js --- development environment webpack of.
- webpack.prod.conf.js --- inlet is arranged in a production environment webpack. It also relies on the aforementioned webpack.base.conf.js, utils.js and config / index.js;
Package deployment
Project development files into src directory, after the completion of the development project, use the following command to package the project.
npm run build
After the completion of packaging will generate dist folder, as shown, when the line item, dist folder directly into server.
to sum up
This paper describes the process of creating Vue project, and explanations Vue directory structure allows us a clearer understanding of the development process Vue project, children's shoes for the beginner, can play a good role to lead the way, there is also a lot of projects did not explain place where shoes can add focus, we will explain in detail in a subsequent blog post, if there be shortcomings in the text, forgive us, at the same time, a problem is created, you can leave a message exchange!