Quickly build Vue2+webpack project in three minutes
project directory
As shown below:
figure 1
in:
【package.json】: Describe the project, including the basic information of the project, version information of dependent modules, etc.;
Note: It can be created manually or automatically through npm init.
code:
{
"name": "yydpt_vue2_base",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev-build-server": "webpack --config ./webpack.dev.config.js --progress",
"dev-server": "webpack-dev-server --open chrome --config ./webpack.dev.config.js --progress"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.0.5",
"css-loader": "^3.5.3",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"vue": "^2.7.0",
"vue-cli": "^2.9.6",
"vue-loader": "^15.10.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.7.0",
"vue-cli": "^2.9.6",
"webpack": "^4.46.0",
"webpack-dev-server": "^3.11.0"
}
}
After the code is written, execute [npm install], so that the dependent modules of the project can be downloaded;
[node_modules]: the folder for storing dependent modules;
Note: After executing npm install, the node_modules file will be automatically produced, and the downloaded dependent modules will be put into this file.
【package-lock.json】: Lock the version of the dependent module;
Note: The file is automatically generated after executing [npm install].
[webpack.dev.config.js]: webpack configuration file, used to compile projects, package projects, start services, etc.;
Note: Manually created by yourself, the configuration file of this project is mainly used in the development environment.
code:
const path = require('path');
const { VueLoaderPlugin }=require("vue-loader")
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 把打包后的文件直接注入到html模板中
module.exports = {
mode:'development', // 设置开发模式
output:{
path:path.resolve(__dirname,'./build/development'), // 动态获取出口路径(绝对路径)-文件编译后的位置
filename:'bundle.js' // 出口文件名
},
devServer:{
port:8888, // 设置端口号，如果没有设置，会默认端口号
},
module: {
rules: [
{
test: /\.(js)$/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
}
},
exclude: /node_modules/
},{
test:/\.(css)$/,
use:[{
loader:"style-loader" // 将所有的计算后的样式加入页面中,html页面中插入css代码
},{
loader:"css-loader", // 解析CSS样式,可以用模块的方式手动对象形式写样式,style-loader自动处理了这个注入
},//能够使用类似@import 和 url(...)的方法实现 require()的功能
]
},{
test:/\.(vue)$/,
use:{
loader:"vue-loader"
}
}
],
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({ // 把打包后的文件直接注入到html模板中
title:'平台',
template:path.join(__dirname, "./src/index.html"), // 指定模板页面
filename: 'index.html', // 模板的名称
inject: 'body', // 将编译的vue的js文件注入到模板页面的body内
})
],
}[webpack.prod.config.js]: It is the same as the webpack.dev.config.js file, except that this file is used in the production environment;
[src]: The project code is generally placed under this folder;
Note: Create it manually by yourself.
Create them separately under the src folder
index.html
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue2</title>
</head>
<body>
<div id="app"></div>
</body>
</html>app.vue
code:
<template>
<div>
{
{welcome}}
</div>
</template>
<script>
export default {
name:"vue2",
data() {
return {
welcome: "月影WEB 欢迎大家来学习各种技术知识！"
}
}
}
</script>
<style>
</style>[build]: When the version is released, the directory where the compiled and packaged files of the project are placed;
Note: The file is automatically generated during the process of compiling and packaging. The name of the file is the configuration setting in the configuration file webpack.dev.config.js.
The above is the relevant code of a basic Vue2+webpack project;
If you need to compile and package the project, you only need to execute: [npm run dev-build-server]
The project will be compiled and packaged into the build folder.
If you need to start the service of this project, you only need to execute: [npm run dev-server]
The service of the project can be started.
This article is to quickly build a simple [vue2+webpack] project, so there is no very detailed code for each step. If you need to follow each step to develop from scratch, you can read it
https://blog.csdn.net/qq_34297287/category_11897387.html
The article in this column describes every step of the process in detail from beginning to end.
Pay attention to the official account (Moon Shadow WEB) to learn more front-end and back-end knowledge;
Welcome everyone to pay attention to mutual exchange and learning;