vue2_blog

Why Learn and Use Vue

1.Development trend

Recently the past few years of the front circle, because the stage is generally brilliant, from MVC to MVVM, you just sing me play. Backbone, AngularJS has become yesterday's yellow, reactjs flourishing, while another more lightweight vue development momentum more fierce, known both the advantages of angularjs and reactjs both.

2.What can Vue do

Mobile Internet demand has been much higher than the pc-side, especially the hybrid H5 applications, but the performance problem has been pain points. If you use SPA (which is commonly known as Single Page Web Application), SPA restricts all activities to a Web page and loads the corresponding HTML, JavaScript, and CSS only when the Web page is initialized. Once the page is loaded, the SPA will not reload or jump the page for the user's operation. No page switch, there is no white screen block, you can greatly improve the performance of H5, close to the original smooth experience.

Continue to see vue has been more than two months, and in March the use of vue2.0 developed a simple blog, in the use of vue human advantages at the same time, also encountered a lot of pit, a lot of problems, I share the experience Problems and solutions

Vue2_blog

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

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080 (Local start)
npm run dev

# build for production with minification Generates a static file for packaging the upload server
npm run build

👏👏👏👏👏Look here: if it is just a beginner's small partner, do not know how to project clone to the local, how to run locally, here wrote a detailed documentation, and I hope to help you Documentation👏👏👏👏👏

The main function of the realization

1.User login

2.User registration

3.User published text

4.User comments text

5.User leave word

Construct

Use vue-cli to build the initialization project, very convenient, used to generate the project template.

vuex

Vue is used as a communication between components, of course, if the page is simple enough, you can also use other methods to communicate (value), but also the use of other methods to communicate, Such as props and so on.

axios

To tell the truth, the project began to use vue-resource, behind the unified use axios (Vue author recommended), both for the client and server communications, that is, as ajax request.

webpack

Webpack is a module loader and packaging tool, it can put a variety of resources, such as JS (including JSX), coffee, style (including less / sass), pictures, etc. as a module to use and deal with. For example, we vue component development, will use ". Vue" file, this file will not be resolved by the browser, so the need to use webpack to "format" them, so that they can be translated into a browser file format. Also, there, with webpack, you can be happy to use es6 syntax it!

express & mysql

The so-called "system", how can only a simple static page? Here is the express (express is based on the Node.js platform development framework) and mysql to prepare the data storage of the back-end api, for the user information stored in the database and read.

pm2

Pm2 is a process manager with a load balancing function for the Node application and ensures that the process is always alive and 0 seconds of overloading. In fact, its main role is nodejs cluster. According to my understanding, popular will, its role is that the local development environment, you have to open node services, to achieve certain functions (such as listening to a port), will be in the console implementation of "node app.js" (such as This file is called app!), The corresponding node service will be opened, but as long as you close the console window, he did not correspond to the service process, and every time the service had to "console -> node app. Js ". In the production environment, it is very troublesome, it will use the pm2, only need to implement a "pm2 start app.js". Ok, once and for all, the console window with you how to open and close, the corresponding service process is always running in the back.

Project preview

Vue_blog(Only fit the mobile side)

To sum up

Just when the development of vue, encountered a lot of problems, but also made a lot of mistakes, but now, their own harvest quite many. Own vue blog (message board) has been developed to complete. I want to say is that the sparrow is small, fully equipped, although only a small application, but it covers a lot of knowledge points, including front-end, back-end, database and other sites must be some of the elements, for me, Learning great meaning, willing to encourage each other!

Vue

MVC MVVM backboneAngularJS reactjs vue angularjs reactjs

2.Vue

pc hybrid H5 SPASingle Page Web ApplicationSPAWebWebHTMLJavaScript CSSSPA H5

vue3vue2.0vue

Vue2_blog

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

Build Setup

# install dependencies
npm install

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

# build for production with minification 
npm run build

👏👏👏👏👏clone 👏👏👏👏👏

vue-cli

vuex

vuevuexprops

axios

vue-resourceaxiosajax

webpack

webpackJSJSXcoffeeless/sassvue ".vue" webpack "" webpackes6

express & mysql

""expressexpress Node.js mysqlapi

pm2

pm2 Node,0 nodejs node()"node app.js"(app)node" -> node app.js"pm2"pm2 start app.js"ok

Vue_blog()

vuevue