Why learn and use Vue

1. Development trend

In recent years, the front end of the circle, due to the stage like wonderful, from MVC to MVVM, you just sing and I come on stage. Backbone, AngularJS is gone and ReactJS is on the rise, while a lighter vue that claims to combine the best of both AngularJS and ReactJS is gaining momentum.

2. Vue can do

The demand for Internet access on mobile terminals is much higher than that on PC terminals, especially in hybrid H5 applications, but the performance problem is always a pain point. If you use SPA (commonly known as a Single Page Web Application), SPA limits all activity to a Single Web Page and only loads the appropriate HTML, JavaScript, and CSS when the Web Page is initialized. Once the page is loaded, SPA does not reload or jump the page due to user action. No page switching, no white screen blocking, which can greatly improve the PERFORMANCE of the H5 for a near-native smooth experience.

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,mysql ,pm2,nginx

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
Copy the code

Main functions implemented

1. User login

2. User registration

3. User posts

4. User comment posts

5. Leave a message

build

Using vue-CLI to build initialization projects is very convenient, equivalent to generating project templates.

vuex

As far as I am aware, VUE is data-driven to implement componential development of pages for better management and maintenance. Vuex is used for communication between components. Of course, if the page is simple enough, other methods can also be used for communication (passing values), such as props, etc.

axios

To be honest, I used vue-Resource at the beginning of the project and then switched to AXIos (which was promoted by Me), both of which are used for client and server communication, i.e. ajax requests.

webpack

Webpack is a module loader and packaging tool, it can use and process various resources, such as JS (including JSX), coffee, style (including less/ Sass), images, etc., as modules. For example, our vUE component development will use “.vue” files, which will not be parsed by the browser, so we need to use Webpack to “format” them into a file format that the browser can parse. Plus, with Webpack, you can have fun using es6 syntax!

express & mysql

How can a “system” only be a simple static page? Express (Express is a development framework based on node.js platform) and mysql are used here to write the back-end API of data store, which is used for storing and reading user information in the database.

pm2

Pm2 is a Node application process manager with load balancing, and ensures that the process is always alive, 0 second overload. If you want to enable the Node service to perform some function (such as listening on a port), you will execute “Node app.js” on the console. “, the corresponding Node service will start, but once you close the console window, it will no longer have the corresponding service process, each time the service will be “console -> Node app.js”. In a production environment, this is cumbersome, and pm2 is used. You only need to execute “pm2 start app.js” once. Ok, once and for all, the console window is free to open and close, the corresponding server process is always running behind.

Server directory

Static and index. HTML are static files constructed by VUe-CLI, server is written to the server, pM2 running (using nginx to do a port forwarding), service running, static pages are static pages, each other.

Making the address

Making the source code

Project preview

Vue_blog(mobile only)