Webpack+vue.js realize the _javascript technique of component-detailed

Brief introduction

The Vue-specific file format is used to implement the component in Vue. Vue, in every. vue file is a component, in the component we will html,css,js all write, and then configure Webpack in the Vue-loader can be.

Building Vue Components

Create the Components folder in the SRC directory and create the App.vue file in it so that the directory structure of our project is as follows:

|--dist    //webpack folder generated after packaging
| |--build.js |--node_modules//  Project Dependencies folder
|--src    //File entry
| |--components//Component Storage Folder
|  | --app.vue//Component
| |--main.js  //main js file
|--index.html  //main HTML file
|--package.json
| Webpack.config.js//webpack configuration file

First write code in INDEX.HMTL:

<! DOCTYPE html>
 
 

Open the App.vue file in the editor and write the following code:

<template>
<div class= "message" >{{msg}}</div> 
</template>
<script>
Export Default {
 data () {return
 {
  msg: ' Hello to Vue-loader '
 }
}} </script >
<style>
message{
 color:red;
 font-size:36px;
 Font-weight:blod;
}
</style>

Write in Main.js:

Import Vue from ' Vue ' "
import App from"./components/app.vue '
new Vue ({
 el: ' Body ',
 Components:{app }
});

This runs the command webpack can see the effect

The ES6 module is used here-- importexport

exportCommand

The Export command is used to specify the external interface of the module. A module is a standalone file. None of the variables within the file can be obtained externally. If you want to be able to read a variable inside a module externally, you must expose the variable externally using the Export keyword. For example:

Export.js
export var firstName = ' Michael ';
Export var lastName = ' Jackson ';
Export var year = 1958;

This allows three variables to be exported externally.

importCommand

Using the export externally exposed interface, other JS files are import loaded by command on this module file. The three variables exposed above are introduced into another JS file as follows:

Import.js
Import {firstname,lastname,year} from './export ';
function SetName (Element) {
 element.textcontent = firstName + ' + lastName;
}

Webpack's Hot-reload

Front-end automatic refresh is now very common, that is, change the page, the browser automatically refresh, but this function in our single page application will be very difficult to use, so, Webpack support Hot-reload (hot replacement), when we modify the module will not page will not refresh, will be directly in the page entry into force.

The basic-webpack-dev-server of Hot-reload

Webpack-dev-server supports two modes of automatic refresh page:

iframe mode (the page embeds an IFRAME and renders the page changes)

Inline mode (a small webpack-dev-server client is packaged as a portal file, and the client refreshes the page when the backend code changes)

iframe mode

Use IFRAME mode without additional configuration, enter commands in DOS

$ webpack-dev-server

Enter in the browserhttp://loacalhost:8080/webpack-dev-server/index.html

Inline mode

Enter Commands in DOS

$ webpack-dev-server--inline--hot

Start the server, open in the browser http://loacalhost:8080 can see our page, at this time modify the CSS in App.vue, as well as the text in HTML, can be seen in the browser immediately rendered.

For detailed instructions on Webpack-dev-server, refer to the official documentation or blog Webpack Dev SERVER.

Here's a question to note

In many articles, it is said that the change in the script in the App.vue file of msg text in the browser will immediately render effect, but in fact I did not appear in the demo of this effect, Google a lot, found the answer, Yuda said: "Data is the initial value, However, the current state is retained when the hot update is in.

At this point, about the basic end of the Webpack+vue, although simple, but because in the process also encountered some pits, so summed up, on the study of Vue, this is just the beginning ...

Report:

My webpack config file:

var path = require (' path ');
Module.exports = {
 entry: './src/main.js ',
 output: {
 path: './dist ',
 publicpath: ' dist/'
 , FileName: ' Build.js '
 },
 //Configure automatic refresh, if open will make browser refresh instead of hot replace
 /*devserver: {
 historyapifallback:true,
 Hot:false,
 inline:true,
 grogress:true
 },*/
 module: {
 loaders: [
  //Convert ES6 syntax
  {
  test:/\.js$/,
  loader: ' Babel ',
  exclude:/node_modules/
  },
  //parsing. vue file
  {
  test:/\.vue$/,
  loader: ' Vue '
  },
  //image conversion, less than 8K automatically converted to base64 encoding
  {
  test:/\. ( Png|jpg|gif) $/,
  loader: ' url-loader?limit=8192 '
  }
 },
 vue:{
 loaders:{
  js: ' Babel '
 }
 },
 resolve: {
  //require omitted extension, such as: Require (' app ') do not need app.js
  extensions: [', '. js ' , '. Vue '],
  //alias, you can use the alias directly to represent the set path and other alias
  : {
   filter:path.join (__dirname, './src/filters '),
   Components:path.join (__dirname, './src/components ')}}} 

Package.json file:

{
 "name": "Webpackvue", "
 Version": "1.0.0",
 "description": "",
 "main": "Vue.js",
 "scripts": {
 "Test": "Echo \" Error:no test specified\ "&& exit 1"
 },
 "author": "",
 "license": "ISC",
 " Devdependencies ": {"
 Babel-core ":" ^6.9.1 ",
 " Babel-loader ":" ^6.2.4 ",
 " Babel-plugin-transform-runtime ":" ^6.9.0 ","
 babel-preset-es2015 ":" ^6.9.0 ",
 " babel-preset-stage-0 ":" ^ 6.5.0 ","
 babel-runtime ":" ^6.9.2 ",
 " Css-loader ":" ^0.23.1 ",
 " File-loader ":" ^0.8.5 ",
 " Style-loader ":" ^0.13.1 ","
 Url-loader ":" ^0.5.7 ",
 " vue ":" ^1.0.24 ",
 " Vue-router ":" ^0.7.13 ",
 " Vue-hot-reload-api ":" ^1.3.2 ","
 Vue-html-loader ":" ^1.2.2 ",
 " Vue-loader ":" ^8.5.2 ",
 " Vue-style-loader ":" ^1.0.0 ","
 webpack ":" ^1.13.1 ",
 " Webpack-dev-server ":" ^1.14.1 ",
 " Webpack-merge ': ' ^0.13.0 '
 }
}

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.