Manual foundation of Vue single page application

Keywords: Vue Webpack JSON github

;

1. Vue file

The. Vue file, known as single file component, is a file format customized by Vue.js. A. Vue file is a separate component, which encapsulates the component related code: html, css, JS

The. vue file consists of three parts: template, style, and script

 <template>
    html
 </template>

 <style>
     css
 </style>

 <script>
     js
 </script>

2. vue-loader

The browser itself does not think of the. vue file, so the. vue file must be loaded and parsed. At this time, the vue loader is required

Note that Vue loader is web based

3. webpack

webpack is a front-end resource templating loader and packaging tool, which can use and process all kinds of resources as modules

In fact, web pack is to load and package these resources through different loader s, and then output the packed files

In short, a web pack is a module loader. All resources can be loaded as modules, and finally the output can be packaged

[official website] (http://webpack.github.io/)   

webpack version: v1.x v2.x

Webpack has a core configuration file: webpack.config.js, which must be placed in the root directory of the project

4. Example, steps:

4.1 create a project with the following directory structure:

webpack-demo
|-index.html
|-main.js Entry file
|-App.vue vue file
|-package.json Engineering documents
|-webpack.config.js webpack configuration file
|-.babelrc Babel configuration file

4.2 write App.vue
<template>
   html
</template>

<style>
    css
</style>

<script>
    js
</script>
4.3 installation of relevant formwork
 cnpm install vue -S

 cnpm install webpack -D
 cnpm install webpack-dev-server -D webpack Own server

 cnpm install vue-loader -D
 cnpm install vue-html-loader -D
 cnpm install css-loader -D
 cnpm install vue-style-loader -D
 cnpm install file-loader -D

 cnpm install babel-loader -D
 cnpm install babel-core -D
 cnpm install vue-template-compiler -D //Precompiled template

Consolidation:

cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler
4.4 write main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    render:function(h){
        return h(App);
    }
})
4.5 write webpack.config.js
module.exports={
        //Configure portal file
        entry:'./main.js',
        //Configure portal file output location
        output:{
            path:__dirname, //Project root path
            filename:'build.js'
        },
        //Configure module loader
        module:{
            rules:[
                {
                    test:/\.vue$/, //All files ending in. vue are loaded by vue loader
                    loader:'vue-loader'
                },
                {
                    test:/\.js$/, //All files ending in. js are loaded by the Babel loader, except for node_modules
                    loader:'babel-loader',
                    exclude:/node_modules/
                }
            ]
        }
    }
4.6 write. babelrc
{
    "presets":[
        ["env",{"module":false}]
    ]
}
4.7 write package.json

Run cnpm install initialization
Change the test line to

{
     "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
            "dev": "webpack-dev-server --open --hot --port 8800"
        //Change this line
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
            "babel-core": "^6.26.0",
            "babel-loader": "^7.1.2",
            "babel-preset-env": "^1.6.1",
            "css-loader": "^0.28.7",
            "file-loader": "^1.1.6",
            "vue-html-loader": "^1.2.4",
            "vue-loader": "^13.6.1",
            "vue-style-loader": "^3.0.3",
            "vue-template-compiler": "^2.5.13",
            "webpack": "^3.10.0",
            "webpack-dev-server": "^2.9.7"
      },
      "dependencies": {
            "vue": "^2.5.13"
      }
}
4.8 operation test
npm run dev   


Posted by slands10 on Sun, 03 May 2020 09:29:56 -0700