Vue: Modular

Modular

webpack> vue single file component> vue Scaffolding 

 

1, ES6 modular basic syntax:

　　1-1, default export: export all    export default {}

let a = 10
let b = 20
let c = 30

function show(){
    console.log('123456')
}

export default{
    a,c,show 
}

　　Default import: import m1 from './m1'

import m1 from './m1'
console.log(m1)

 　　1-2, export demand: introduction portion according to the needs of

// export demand 
Export the let A = 'AAA' 
Export the let B = 'BBB'

// demand introduced, by a as an alias 
import {a, b} from ' ./m1'

 　　1-3, modular code and executed directly introduced: Once imported, the code is executed inside

import ‘m1.js’

 2, WebPACK : official documents  https://www.webpackjs.com/concepts/

 　　New configuration package management file, the command input terminal

asl s init

　　Installation jQuery

npm i jquery -S

 　　-1 related packages installed webpack

npm install webpack  webpack-cli -D

　　-2 webpack.config.js file is created in the main project directory, add content

= module.exports {
     // compilation mode 
    MODE: 'Development' // Development compilation mode production mode of production 
}

　　-3 add content webpack.json of scripts

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dec":"webpack"
  },

　　-4, the project is compiled using npm run dev

　　2-2, the entrance and exit documents

 

　　2-3, the automatic packing function

　　　　-1 automatic packaging installation tool npm install webpack-dev-server -D

　　　　-2 webpack.json modify the "dev": "webpack-dev-server"

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

　　　　-3 modify the pace of references inside html <script src = "../ dist / bundle.js"> </ script>, after repackaging, visit http: // localhost: 8080

　　2-4, generates preview page when entering http: // localhost: 8080, instead of displaying the folder, but directly into the HTML main page

 

 　　2-5, loader loader

webpack can only handle JavaScript file, Loader  let webpack able to deal with those non-JavaScript files. Essentially, webpack loader all types of files, is converted to the module dependency diagram of the application (and eventually the bundle) can be directly referenced.

 

　　2-5-1, and mounting style-loader css-loader

npm i style-loader css-loader -D

　　2-5-2 configuration

    module:{
        rules:[
            {test: /\.css$/, use:['style-loader','css-loader']}
        ]
    }

　　test indicates the type of file matching, use represents loader to call.

　　Processed in order to call the loader file is fixed, calling from the back

 

　　Processing less file:

　　　　installation

npm i less-loader less -D

　　　　Add Rule

{test: /\.less$/, use:['style-loader','css-loader','less-loader']}

　　Processing sass file:

npm i sat-loader node-sass -D

　　2-6, packaged css stylesheets pictures and font file of loader

　　Download loader

npm i url-loader file-loader -D

　　Configuration Rules

{test: /\.(jpg|png|gif|bmp|jpeg|bmp|ttf|svg)$/,use: 'url-loader?limit=50480'}

 　　2-6, processing packaged loader js advanced grammar

 

 3, vue single-file assembly

<template>
  
</template>

<script>
export default {
    data:{

    },
    methods:{
        
    }
}
</script>

<style>

</style>

App.vue

　　Loader -1 loader downloads

i-loader nper view view-template-compiling -D

　　-2 added loader configuration rules

        rules: [ 
            {test: /\.vue$/,loader:'vue-loader ' } 
        ]

　　-3, add plug-ins

const VueLoaderPlugin = require('vue-loader/lib/plugin')

    plugins:[
        new VueLoaderPlugin()
    ],

　　 Use code

 

 　　Packaged and released

 

 4, scaffolding vue-cli

 　　Official documentation installation steps: https://cli.vuejs.org/zh/guide/installation.html

 

 

 

。