Shulou(Shulou.com)06/01 Report--

Why learn and use Vue

1. Trend of development

In the front-end circle in recent years, as the stage is generally brilliant, from MVC to MVVM, you just sang and I made my debut. Backbone,AngularJS has become a thing of the past, reactjs is in its heyday, while another lighter vue has a stronger momentum, claiming to have both the advantages of angularjs and reactjs.

What can 2.Vue do?

The demand for Internet access on the mobile side is much higher than that on the PC side, especially in the H5 application based on hybrid, but the performance problem has always been a pain point. If you use SPA (commonly known as a single page application (Single Page Web Application)), SPA limits all activities to a single Web page and loads the corresponding HTML, JavaScript, and CSS only when the Web page is initialized. Once the page is loaded, SPA will not reload or jump the page as a result of the user's actions. Without page switching, there will be no white screen blocking, which can greatly improve the performance of H5 and achieve a near-native smooth experience.

I have been watching vue for more than two months. In March, I used vue2.0 to develop a simple blog. While using the humanized advantages of vue, I also encountered many pits and problems. Share the problems and solutions I encountered.

Vue2_blog

Vue2,vuex,vue-cli,axios,webpack,express,MySQL

Build Setup# install dependenciesnpm install# serve with hot reload at localhost:8080 (locally launched) npm run dev# build for production with minification (generates static files for packaging and uploading servers) what are the main functions implemented by npm run build1234567812345678

1. User login

two。 User registration

3. User posts

4. User comment post

5. User message

Construction

Using vue-cli to build an initialization project is very convenient, equivalent to generating a project template.

Vuex

Vue, as far as I understand it, is data-driven, to achieve page component development, better management and maintenance, vuex is used for communication between components, of course, if the page is simple enough, you can also use other methods for communication (passing values), such as props.

Axios

To tell you the truth, I also used vue-resource in the early stage of the project, and then switched to axios (especially pushed by me), both of which are used for client-side and server-side communication, that is, for ajax requests.

Webpack

Webpack is a module loader and packaging tool, it can use and process a variety of resources, such as js (including JSX), coffee, style (including less/sass), pictures, etc., as modules. For example, we vue component development, will use ".vue" files, such files will not be parsed by the browser, so we need to use webpack to "format" them, so that they can be parsed by the browser file format. And, with webpack, you can happily use the syntax of es6!

Express & mysql

How can a so-called "system" only be a simple static page? Here, express (express is a development framework based on Node.js platform) and mysql are used to write the back-end api of data storage, which is used to store and read user information in the database.

Pm2

Pm2 is a process manager for Node applications with load balancing and ensures that the process is always alive with a 0-second overload. As far as I understand it, popularly, its function is that in the local development environment, if you want to open node services and implement certain functions (such as listening on a port), you will execute "node app.js" on the console (for example, this file is called app!) The corresponding node service will be opened, but as soon as you close the console window, it will have no corresponding service process. Every time you start the service, you have to "console-> node app.js". In a production environment, it's troublesome, so pm2 is used, and you only need to execute "pm2 start app.js" once. Ok, once and for all, the console window can be opened and closed as you like, and the corresponding service process is always running behind.

Github address

Github source code

Project Preview

Vue_blog (only adapted to the mobile end)

Summary

When I first developed with vue, I encountered a lot of problems and made a lot of mistakes, but now I have gained a lot. My own vue blog (message board) has been developed. What I want to say is that although the sparrow is small and full of internal organs, although it is only a small application, it covers many knowledge points, including front-end, back-end, database and other necessary elements of a website. For me, learning is of great significance. I would like to share!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.