vue+ Vue-router + webpack Pit Tour

It's a pit trip. In fact, when you think about some of the problems and then want to implement the plan, slowly find out that the old driver can ignore the following content

1) The cause takes into account the problem of data separation because the server is the nature of Express Res.render ("XX", data) that means to find the appropriate template file and then use the data to render the page to be rendered back to the browser, To the browser to parse, rendering the template is actually doing the replacement string + splicing strings of the live various template engine also has various optimization points (such as the corresponding template can be compiled into memory, and then in the data to render so that does not have to compile the rendering) but this is not a front-end separation of the scheme I understand that the backend only provides APIs for the data interface, and then the front end uses the API to get the data to render the page, because recently learning vue, I was thinking of using Vue to do these things.

2) Thinking about the idea of realization my first idea was to configure the route in Express to be managed via Vue (file) after the page is returned to the front end (res.sendfile) (using Vue-rosource to get specific data) But when it is such a URL user/11 user/22 we return to the front end the same page front end how to use this 11 22 to get a specific user's data to render the page we actually returned is the template and then learned that Vue-router can be $route The. Params obtains the following 11 and 22 so that we can dynamically get to the data rendering template, which can be understood as a component directly in the template is not friendly to look at the online example when the aspect of Webpack + Vue.loader

3) Solution Webpack + vue + vue-loader +express (backend data available)

4) encounters with various pits

4.1 Babel configuration Issues (should be a transition environment that requires configuration of Bebel)

The Vue template is written using ES6 syntax to be configured in Webpack (install Babel-loader babel-preset-es2015 vue-loader)

Always error when loading vue es6 configuration problem I resolved this issue through the following configuration

4.1.1 is generated under Webpack.config.js's sibling directory. BABELRC content is as follows

4.1.2 Configuration for Babel in Webpack.config.js This is my webpack.config.js configuration.

4.2 Template Error in component

Found Nodo_modules in Vue Package.json in main is dist/vue.common.js instead of dist/vue.js found the answer to the question on the official web

That is, to support the template approach, introduce dist/vue.js

4.3 vue-router version of the issue below is an introduction to Vue-router2 's official translation document Vue-router2

4.4 Processing of URL changes after page routing

When we click on the following router-link when we visit index.html the URL will change from index.html to Index.html/first should be my configuration there is a problem why did not become index.html#f Irst This problem is not very clear when the URL becomes this time to refresh the page will go to express the route, there is no such route will be an error my solution is to add a end of the middleware back index.html

5) Summary

　　In fact, stepping on the pit is a learning process, Vue official website of the example is also generally seen but the actual use of the time is not the same, the best way is to find some examples on the official web site and then their own in the local re-make it a learning process above can be roughly a simple single page application also realizes the front-end separation There is an example of the official website to look good

6) Summary of learning materials

　　6.1 Webpack Related

Webpack Journey into the pit (the Vue-router is vue1.0)

Webpack Fool's Guide (three articles are good)

Webpack official website

6.2 Vue Related

The Chinese document on the Vue website

Vue-resource official website Vue-resource all tips

Vue-loader official website

VUE-ROUTER2 official website Chinese document

6.3 A blog friend of the trampled pit article

　　　　

vue+ Vue-router + webpack Pit Tour