Vue-cli + express constructed SPA Blog (front and rear end of the separation scheme)

Why learn and use Vue

1. Development Trend

In recent years, the front end of the circle, because the stage is generally brilliant, from MVC to MVVM, you just Changba me play. backbone, AngularJS has become a thing of the past, reactjs heyday, while the other lighter vue momentum of more violent, combines the advantages of both known and reactjs of angularjs.

Why can 2.Vue

Demand for mobile Internet terminals have been much higher than the pc, particularly H5 application hybrid scheme, but the performance has been the sore point. If you use the SPA (which is commonly known single-page application (Single Page Web Application)), SPA all activities will be limited to a Web page, load the appropriate HTML, JavaScript and CSS only when the Web page is initialized. Once the page loads, SPA will not be carried out because the user's operation to reload the page or jump. No page switch, there is no black and white blocked, can greatly improve the performance of H5 achieve near native fluency 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

Main function

1. The user logs

2. User Registration

3. User post

4. User comments post

5. User comments

Construct

Use vue-cli project to build the initialization, very convenient, equivalent to build the project template like this.

vuex

vue far as I understand, is data-driven, component-based pages to achieve development, better management and maintenance, vuex is used as the communication between components, of course, if the page is simple enough, you can also use other methods of communication (by value), For example, props and so on.

axios

To be honest, I also use pre-project was vue-resource, only later switching to unified axios (esp I have greatly pushing), both for the client and server communication, which is used as an ajax request of.

webpack

webpack is a module loader and packaging tools, it can all kinds of resources, such as JS (including JSX), coffee, style (with less / sass), so the picture as to the use and handling modules. For example, we vue component-based development, will use ".vue" file, this file will not be parsed by the browser, so it is necessary to use webpack "Format" them so that they become the browser can parse file format. There, there, with webpack, you can have fun using the syntax es6 friends!

express & mysql

A so-called "system", how can a simple static page? Used here to express the backend data storage api prepared for storing and reading information in the user database (express Node.js is a platform-based development framework) and mysql.

pm2

pm2 Node Manager process is applied with a load-balancing capabilities, and to ensure that the process is always alive, 0 seconds overloaded. According to my understanding, the popular will, it is the role of local development environment, you have to open the service node, perform certain functions (such as listening on a port), it will perform the "node app.js" in the console (for example, this file is called app bar), the corresponding node service will open up, but as soon as you close the console window, he would no corresponding service process, and every time the service had to play "console -!> node app. js ". In a production environment, it is very troublesome, it can be used on the pm2, only you need to perform a "pm2 start app.js". ok, once and for all, how the console window as you open and close freely, the corresponding service process is always running in the back.

Directory server

static and index.html are vue-cli build production environment static files, server to write server-side interfaces, use pm2 ran (using nginx did a port forwarding), service run service, static page is a static page, and do not influences.

1517569947(1).jpg

Github Address

Github source

Project preview

Vue_blog (mobile terminal adapted only)

Guess you like

Origin www.cnblogs.com/jlfw/p/11802337.html