The Vue2 + webpack + express4 build single-page application (a) has built a small basic applications, but have not solved the jquery ajax request, style module is used less problems
First, the asynchronous requests and forwards
1. The client initiates a request
Been achieved with asynchronous requests are ajax (XMLHttpRequest) to achieve, the recent rise of alternative technologies ajax fetch, XMLHttpRequest is a rough design API, does not comply with the principle of separation of concerns (Separation of Concerns), configuration and invocation very confusing and to write asynchronous event-based model nor the modern Promise, generator / yield, async / await friendly.
Fetch appear to solve the problem of XHR.
I chose to fetch the plug end around a support homogeneous on GitHub: https://github.com/matthew-andrews/isomorphic-fetch
Implementation of npm install --save isomorphic-fetch es6-promise download the plug-in project, you can use the following way where it is needed:
import es6Promise from 'es6-promise';
import fetch from 'isomorphic-fetch'; es6Promise.polyfill(); fetch('//offline-news-api.herokuapp.com/stories') .then(function(response) { if (response.status >= 400) { throw new Error("Bad response from server"); } return response.json(); } ) .then(function(stories) { console.log(stories); }); In general the project will be written over the code pulled out into a method of separately pulled out of a document file incorporated call the method used
2.node forward end of the asynchronous request
There node middleware http-proxy-middleware http forwarded a
npm install http-proxy-middleware --save download middleware
Middleware is then introduced and registered in app.js
var proxy = require('http-proxy-middleware'); app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true})); Use detail, reference https://github.com/chimurai/http-proxy-middleware#options
Second, the use of less pre-compiled language
Now writing style can generally use pre-compiled language or less sass
I choose according to personal habits of less, use less need to have some configuration:
1. In .vue file <style> need to add lang = "less" attributes, such as:
<style lang="less"> 2. Download the less-loader, less plug-ins, npm install --save-dev less-loader less
3. webpack.base.conf.js plus the postcss: [require ( 'autoprefixer') ()], as follows:
vue: {
loaders: { js: 'babel' }, postcss: [require('autoprefixer')()] } This can be in the style inside the .vue write less grammar
Third, in the .vue css singled out as a file css
Webpack need to use the extract-text-webpack-plugin plugin
Reference documents: https://vue-loader.vuejs.org/en/configurations/extract-css.html
npm install extract-text-webpack-plugin --save-dev
Generally only need to be extracted in the build environment, so the added webpack.prod.conf.js
vue: {
loaders: {
css: ExtractTextPlugin.extract('vue-style-loader', 'css'), // you can also include <style lang="less"> or other langauges less: ExtractTextPlugin.extract('vue-style-loader', 'css!less') } } Add new ExtractTextPlugin ( "static / css / style.css") in the plugins, so css is generated style.css file output / static / css in
Fourth, the reference picture
If the template or style referenced in the picture, you need to add file-loader
Reference: https://vue-loader.vuejs.org/en/configurations/asset-url.html
1. Download the Loader npm install --save-File-dev File-Loader
2. loaders in webpack.base.conf.js the inside add
{
test: /\.png$|\.jpg$|\.gif$|\.ico$/,
loader: "file?name=static/img/[name].[hash].[ext]", exclude: /node_modules/ } Fifth, implement lazy loading (demand loading)
In the relatively large number of pages, single-page application packaged in accordance with the previous js way into a home can lead to very slow to load, in order to solve this problem, you can modify the package, let Homepage load only common code and home use to code, jump go to another page reload js corresponding page, so you can solve the larger problem of slow loading Home project.
1. Modify the routing
Will be rewritten by routing compenent lazy loading
const Plugin = r => require.ensure([], () => r(require('../views/Plugins/plugin')), 'Plugin'); Specific Routing page as follows:
2. Modify configuration webpack
Add in webpack.prod.conf.js in output in
chunkFilename: 'static/js/[id].[name]_[chunkhash:7].js'
Run npm run build this time we can see that each module require.ensure introduced individually generated a js
Run npm run prod start production processes, visit the page http: // localhost: 3001 /
because I have not defined route home, it will jump to the following modules:
View request, requested only index.js and notFoundComponent.js.
I define access routes HTTP: // localhost: 3001 / plugin (defined according to the route of your own view), you can see that in addition to common index.js, and other js not loaded, if the route through the words do not jump reload index.js
Careful if you look closely, you will find that a problem, in addition to css app.vue inside the package to style.css, other vue in the package did not go js
Thus the need in the plugins in webpack.prod.conf.js
new ExtractTextPlugin("static/css/style.css") change into
//实现css分块，讲所有vue文件中的css打包到一个一个入口css中
new ExtractTextPlugin('static/css/[id].[name]_[chunkhash:7].css', { allChunks: true }) //加上这个插件，可以将通用的css和js单独打包成一个vendors.css和vendors.js new webpack.optimize.CommonsChunkPlugin({ name:'vendors', filename:'static/js/[id].[name].[hash].js', minChunks: function () { return true } }) minChunks: num num This represents only require a place inside CommonChunk
Execution npm run build again will generate about directory
App.vue css will find inside are packed into the vendor.css in the, app.vue in the js and vue / vue-router are packaged in a vendor.js.
This completes the lazy loading.
But it has not been achieved on how to install vue css files into a single file, the god of the exhibitions!
Memo: Life Cycle ( Reference )
Author: lion Ai Zhama end of
the link: https: //www.jianshu.com/p/1696e256d774
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.