Webpack and vue2 build vue project skeleton explanation

This article mainly introduces the method of building the skeleton of the Vue project with webpack+vue2. The editor thinks it is quite good. Now I will share it with you and give it a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The front-end project packaging tool webpack and the front-end development framework vue are now 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 using vue-cli scaffolding can help us build a project skeleton, I think it is still important to understand the principles, so this article mainly writes about building a basic project with webpack and vue. 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 project directory

We first need to create a new directory myApp to store our project, enter the project in the terminal, and then start Initialize the project.

Initializing the project

$ npm init

When initializing the project, if there is no special need, just press the "Enter key". After the project initialization is completed, a package.json file will be generated to mainly store the project dependency directory and configure the project startup command.

Installing dependencies

$ npm i style-loader --D

When using npm to install dependencies, we will add "--D" at the end because After adding "--D", a record will be left in package.json. If we open the project in other systems, we will find that the dependencies installed through npm during development cannot be used. This is because of system compatibility. And if you add "--D" to the installation dependencies when developing the project, the node_modules in the project do not need to be copied. Before opening the project, we only need to install all dependencies through npm.

$ npm i

Configuring the webpack.config.js file

All configurations of webpack are in the webpack.config.js file, so After initializing the project, we need to create a new webpack.config.js file and configure it. Since I have already written about the basic configuration of webpack last time, I will not repeat it here. I will paste my configuration code directly:

module.exports = {

 entry: './src/main.js',

 output:{

  path: __dirname + '/dist/',

  filename: 'bundle.js'

 },

 devtool:'source-map',

 devServer:{

  // 主要改变项目的根目录

  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文件想要解析必须要要加上这句才能成功

 resolve: { alias: { 'vue': 'vue/dist/vue.js' } }

}

Configuration package.json

The main things that need to be configured in package.json are the project startup command, a development mode start and the packaged project build.

Start the project

$ npm start

Package the project

$ npm run build

Directory of the entire project

src: The source files we develop are placed 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 files for all vue files

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

index.html: This file can be placed in the root directory myApp of the entire project, or in the directory dist generated by webpack packaging. If it is placed The root directory is contentBase: __dirname in webpack.config.js. If it is in dist, contentBase: __dirname + '/dist/'. The main purpose is to change the location of the project's service root directory, which is the directory displayed by the browser when we open localhos:8080. (After testing, it will be better to place it in the dist directory generated by the package, mainly in the development mode to achieve real-time updates. This may not be accurate, and will be modified after testing later)

index.html file code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>webpack+vue</title>
</head>
<body>
 <p id="app"></p>
 <script src="./bundle.js"></script>
</body>
</html>

main.js file code

//引入vue框架<br>
//import是es6的写法，其实和var Vue = require(&#39;vue&#39;)是相同的意义<br>import Vue from &#39;vue&#39;;<br>
//引入App.vue文件，这个文件也是vue所有组件的入口，我们的项目就是将这个文件追加到index.html文件里面
import App from &#39;./App.vue&#39;;
new Vue({
 el:&#39;#app&#39;,
 components: {App},<br>//主要目点就是将App追加到“#app”里面去
 render: h => h(App)
}) 
App.vue文件代码
<template>
  <p>Hello VueJS!</p>  
</template>
<script>
 export default{
   name:"app"
  }
</script>

At this point, the entire project has basically completed the basic structure. Enter it in the browser : localhost:8080, you can see the display:

Related recommendations:

vue project homepage loading speed optimization example sharing

About sharing of common components and framework structures of vue projects

How to create a new vue project

The above is the detailed content of Webpack and vue2 build vue project skeleton explanation. For more information, please follow other related articles on the PHP Chinese website!