This article is mainly about the single-page application of Webpack +vue.js before development. Since node NPM is required, make sure you have Node installed. It is recommended to install the latest stable version on the official website. In addition, some NPM packages need to be loaded in the project. Since the NPM server is in a foreign country, it may be slow for us to download, so we suggest using ali’s image CNPM to install, and update the NPM image every 10 minutes in real time. For specific download configuration, please refer to the CNPM official website of Ali. This article is just to discuss how to use Webpack to make a single page application with vue.js. The specific content of VUE is not within the scope of this article. For details, please refer to the official documentation, which provides a detailed introduction to the syntax of VUE.

It is recommended to prepare the content before reading

  • Read the Webpack documentation

  • Read vue-Router documentation

  • Know what a single page app is

1. Define our demo base directory

├ ─ ─ the README. Md ├ ─ ─ index. The HTML / / project entry documents ├ ─ ─ package. The json / / project configuration file ├ ─ ─ the SRC directory / / production │ ├ ─ ─ vue / / component │ | ├ ─ ─ home. Vue │ | ├ ─ ─ blog. Vue │ | ├ ─ ─ the about the vue │ | ├ ─ ─, vue │ ├ ─ ─ the components / / various components │ ├ ─ ─ views / / CSS file │ ├ ─ ─ SCSS / / SCSS document │ └ ─ ─ └─ └─ └─ └.js // Webpack config fileCopy the code

2. Configure our webpack.js file

NPM install < module > –save-dev this command means that we installed the package and wrote its basic information to the package.json file in the directory. Another command is to run CNPM install directly and automatically download packages written in package.json.

In the configuration file of Webpack, we need to use four NPM modules respectively: path, webpack, extra-text-webpack-plugin,vue-loader remember to download the package before importing it with require command

Var path=require('path'); Var webpack = require('webpack'); Var ExtractTextPlugin = require('extract-text-webpack-plugin'); Var vue = require("vue-loader"); var vue = require("vue-loader");Copy the code

Ok, now that we have the required modules in, let’s define some of the folder paths that we will use next

Var ROOT_PATH = path.resolve(__dirname); var ROOT_PATH = path.resolve(__dirname); Var APP_PATH = path.resolve(ROOT_PATH, 'SRC /main.js'); Var BUILD_PATH = path.resolve(ROOT_PATH, 'build');Copy the code

Now that the basic file path is defined, we need to use the extra-text-webpack-plugin

Var plugins = [/ / public js to common. The new webpack.optimize.Com monsChunkPlugin js file (' common. Js), New ExtractTextPlugin("style.css"), // Use ProvidePlugin to load the dependency library new webpack.providePlugin ({$: 'webpack-zepto' }) ];Copy the code

Next is the focus of Webpack loader, Webpack idea is to load each static resource file as a module, we need to do some configuration, here we need to compile CSS, SASS module, We also need to install ‘CSS-loader ‘,’style-loader’,’node-sass’,’ MD5′

Module. exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = {// exports = { BUILD_PATH, // packaged js named filename: build.js' // points to the asynchronous loading path publicPath: Md5 chunkFilename: '[id].build.js? [chunkhash]' }, module: { loaders: [ { test: /\.vue$/, loader: 'vue', }, { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", 'css-loader') }, { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.(png|jpg)$/, loader: 'url? Limit =40000'}]}, // In this particular note, vue advocates taking a component as a page, so it is possible to write HTML, style, javascript on a page, and also to import and write SCSS files vue: {CSS: ExtractTextPlugin.extract("css"), sass: ExtractTextPlugin.extract("css! sass-loader") }, plugins: plugins }Copy the code

3. Configure our import file main.js

Here we need three NPM modules, vue, VUe-Router and Vue-Resource, which we installed and introduced in sequence

Var VueRouter = require('vue'); var VueRouter = require('vue'); var VueRouter = require('vue'); Var VueResource = require('vue-resource'); var VueResource = require('vue-resource');Copy the code

Declare and register empty components in vUE

Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend({});Copy the code

Instantiation VueRounter

Var router = new VueRouter({// When hashbang is true, all paths will be formatted #! Start, hashBang: true, history: false, saveScrollPosition: true, transitionOnLoad: true});Copy the code

Next, write down our routing path. You can also write the route in a separate file. Our side is just a demo, so we write together, it doesn’t matter. , will be very detailed.

It is important to note that WebPack provides asynchronous loading, which is used in conjunction with vue-Router routing. When a component needs to be rendered, it will load its dependent components and load them in asynchronously. Isn’t that great?

Component: function (resolve) {require(['./vue/home.vue'],resolve)}}, '/home':{name: Component: function (resolve) {require(['./vue/home.vue'],resolve)}}, '/blog':{name: Component: function (resolve) {require(['./vue/blog.vue'],resolve)}}, '/blog/topic':{name: Component: function (resolve) {require(['./vue/ top.vue '],resolve)}}, '/about':{name: Component: function (resolve) {require(['./vue/about.vue'],resolve)}}})Copy the code

Add a sentence of code to test whether the access route access was successful

AfterEach (function (transition) {console.log(' successfully browse to: '+ transition.to.path)})Copy the code

Finally, let’s register vUE

router.start(app, "#app");
Copy the code

4. Fill in the structure of the index. HTML file

Used to render matching components based on Vue’s dynamic component system. Our index.html structure looks like this

Personal stand
       
    
        
    
       

    
    


Copy the code

5. How to write a component

In terms of components, VUE advocates that a module write a specific component such as list components can be list.vue, and then load specific components according to the route. Components can also refer to each other, referring to the VUE documentation.

For the sake of our testing, we’ll use home as an example, and the other components will be similar, so you can test later and add the contents of the components yourself when the project is complete.




     /*style*/

Copy the code

6. Run webpack

We have a general framework for a single page, now we can run webPack directly to load the file. Then open index.html and test directly.

A more detailed demo has been submitted to Github for demo

Remarks:

If you think this article is helpful, you can pay attention to me. In the later stage, we will give some thoughts about the development of single page based on vue.js, thank you!