Webpack + vue2 to build the vue Project Skeleton, webpackvue2

Webpack + vue2 to build the vue Project Skeleton, webpackvue2

The front-end project packaging tool webpack and the front-end development framework vue are very popular technologies after the front-end and back-end separation, today, we mainly talk about using webpack and vue2 to build the basic skeleton of a front-end and back-end separation project. Although the use of vue-cli scaffolding can help us build a project skeleton, but I think it is very important to understand the principle, so this article mainly writes webpack and vue to build a basic project. The premise is that nodejs has been installed.

Dependencies to be installed through npm throughout the project

Css: style-loader, css-loader, sass-loader, and 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 project directory

First, we need to create a directory named myApp for storing our project, enter the project in the terminal, and then initialize the project.

Initialize a project

$ npm init 

If you do not need to initialize a project, simply press the "Enter key. After the project Initialization is complete, a packge. json file is generated to store the project dependency directory and configure the project startup command.

Install dependency

$ npm i style-loader --D 

When npm is used to install dependencies, we will add "-- D" at the end, because after "-- D" is added, records will be left in packge. json. If we open the project in another system, we will find that the dependencies installed through npm during development are unavailable because of system compatibility. If "-- D" is added to the dependency during development, node_modules in the project does not need to be copied. Before opening the project, we only need to install all dependencies through npm.

$ npm i 

Configure the webpack. config. js File

All the configurations of webpack are in the webpack. config. js file. Therefore, after initializing the project, we need to create a new webpack. config. js file and configure it. Since the basic configuration of webpack has been specially written last time, I will not repeat it here. I will directly paste my configuration code:

Module. exports = {entry :'. /src/main. js', output: {path: _ dirname + '/dist/', filename: 'bundle. js '}, devtool: 'source-map', devServer: {// mainly changes the project's root directory 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 '}]}, // to resolve a vue file, you must add this sentence to resolve: {alias: {'vue ': 'vue/dist/vue. js '}}}

Configure package. json

In package. json, You need to configure the main project startup command, a development mode start and a packaging project build.

Start the project

$ npm start 

Package Project

$ npm run build 

Directory of the entire project

Src: All the source files we developed are stored in this directory.

Components: used to store all components

Styles: stores all style files.

Utils: stores all method functions that need to be written by yourself.

App. vue: entry file for all vue files

Main. js: The js entry file of the entire project

Index.html: This file can be stored in the root directory myApp of a project, or in the directory dist generated by the webpack package. If it is stored in the root directory, webpack is used. config. contentBase: _ dirname in js. If it is in dist, contentBase: _ dirname + '/dist /'. It mainly changes the position of the Service root directory of the project, that is, the directory displayed by the browser when we open localhos: 8080. (It is better to put the tested dist directory in the package, which can be updated in real time in the development mode. This may not be accurate. Modify it after testing later)

Index.html File Code

<!DOCTYPE html>
Main. js file code
// Introduce the vue framework <br> // import is written in es6. In fact, it is similar to var Vue = require ('vue ') <br> import Vue from 'vue '; <br> // import to app.vuefile. This file is also the entrance of all vuekit. Our project will add this file to the index.html file and import the App from '. /App. vue '; new Vue ({el:' # app', components: {app }, <br> // append the App to the "# app" to render: h => h (App)}) App. vue File Code <template> <div> Hello VueJS! </Div> </template> <script> export default {name: "app"} </script>
Here, the entire project basically completes the basic structure. Enter localhost: 8080 in the browser and you will see the following:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.