Webpack + vue2 building Vue Project skeleton

Front-end Project packaging tools Webpack and front-end development Framework Vue, is now the front and rear end of the very popular technology, today is mainly about the use of Webpack and vue2 to build a front-end separation of the basic skeleton of the project. Although the use of VUE-CLI scaffolding can help us build good one project skeleton, but understand the principle I think is still very important, so this article mainly write Webpack and Vue to build a basic project. The premise is that Nodejs has been installed.

The entire project needs to be installed through NPM dependencies

Css:style-loader, Css-loader, Sass-loader, Node-sass

Js:babel-core, Babel-loader, babel-preset-es2015

Webpack:webpack, Webpack-dev-server

Vue:vuer, Vue-loade, Vue-html-loader, Vue-template-compiler

Create a new catalog for a project

We first need to create a new directory, MyApp, to put our project in, enter the project in the terminal, and start initializing the project.

Initialize Project

$ NPM Init

When initializing a project, simply press "enter" if there is no special need. After the project is initialized, a Packge.json file is generated that primarily holds the project dependent directory and configuration item start command.

Installation dependencies

$ NPM I style-loader--d

When using NPM to install dependencies, we will add "--d" at the end, since adding "--d" will leave a record in Packge.json. If we open the project in another system, we will find that the dependency on the NPM installation is not available at the time of development because of the compatibility of the system. And if the development of the project when the installation of dependency plus "--d", the project inside the Node_modules do not need to copy the past, and open the item currently, we only need to install all dependencies through NPM.

$ NPM I

Configuring the Webpack.config.js File

Webpack all the configurations are in the Webpack.config.js file, so after initializing the project, we need to create a new Webpack.config.js file and then configure it. Since the last time the basic configuration of Webpack has been specifically written, this is not repeated here, directly affixed to my configuration code:

Module.exports = {  entry: './src/main.js ',  output:{    path: __dirname + '/dist/',    filename: ' bundle.js '  },  devtool: ' Source-map ',  devserver:{    //main change the root directory of the project    contentbase: __dirname + '/dist/',    port:8080,    inline:true  },  module:{    loaders:[      {test:/\.css$/,loader: ' style-loader! Css-loader '},      {test:/\.js$/, loader: ' Babel-loader ', exclude:/node_modules/},      {test:/\.vue$/, Loader: ' Vue-loader '}    ]  },  //vue file wants to parse must be added in order to succeed  resolve: {alias: {' vue ': ' Vue/dist/vue.js '}}}

Configure Package.json

Package.json inside need to configure the main time project start command, a development mode of start and package project build.

Start Project

$ NPM Start

Packaging projects

$ NPM Run Build

Directory for the entire project

SRC: The source files We developed are all placed in this directory

Component: Used to put all the components

Styles: Store all the style files

Utils: Store All method functions that need to be written by themselves

App.vue: Entry file for all Vue files

Main.js: JS entry file for the entire project

Index.html: This file can be placed in the root of the project in MyApp, or can be placed in the Webpack package generated directory dist inside, if it is placed in the root directory webpack.config.js inside the contentbase: __ DirName, if the dist inside is contentbase: __dirname + '/dist/'. The main change in the location of the service root of the project is the directory that the browser displays when we localhos:8080 open. (It is better to test the Dist directory generated in the package, which can be updated in real time, mainly in development mode.) This may not be accurate, post-test after re-testing to modify)

Index.html File Code

<! DOCTYPE html>
Main.js File Code
Introducing the Vue framework
Import is the ES6 notation, in fact, and var Vue = require (' Vue ') is the same meaning
Import vue from ' Vue ';
Introducing the App.vue file, which is also the portal for all Vue components, our project is to append this file to the index.html file in the import App from './app.vue '; new Vue ({  el: ' #app ', Components  : {App},
The main point is to add the app to the "#app" inside  render:h + H (APP)})
App.vue File Code
<template>   <div>hello vuejs!</div>   </template><script>  export default{     Name: "App"  } </script>
Here the whole project basically completed the basic structure, in the browser input: localhost:8080, you can see the display:
Webpack + vue2 building Vue Project skeleton