三分钟快速搭建Vue2+webpack项目

藏宝库编辑 · 2024-9-17 14:00:57

三分钟快速搭建Vue2+webpack项目
项目目次
如下图：
图1

此中：
【package.json】：对项目举行形貌，包罗项目的根本信息、依靠模块的版本信息等等；
留意：可以手动创建大概通过npm init主动创建。
代码：

{
"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"
}
}

代码写好之后实行下【npm install】，如许才气下载项目的依靠模块；

【node_modules】：存放依靠模块的文件夹；
留意：实行npm install 之后会主动生产node_modules这个文件，并将下载的依靠模块放入此文件中。

【package-lock.json】：锁定依靠模块的版本；
留意：实行【npm install】之后主动生成的文件。

【webpack.dev.config.js】：webpack的设置文件，用来编译项目、打包项目、启动服务等等；
留意：本身手动创建，此项目的该设置文件主要是开发环境使用。

代码：

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】：和webpack.dev.config.js文件一样的，只不外这个文件是在生产环境使用；

【src】：这个文件夹下面一样寻常放的是项目代码；
留意：本身手动创建。

在src文件夹下分别创建
index.html
代码：

<!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
代码：
<template>
<div>
{{welcome}}
</div>
</template>
<script>
export default {
name:"vue2",
data() {
return {
welcome: "月影WEB 欢迎各人来学习各种技能知识！"
}
}
}
</script>
<style>
</style>

【build】：发布版本的时间，项目编译打包的文件所放的目次；
留意：文件是在编译打包的过程之中主动生成，该文件的名称是webpack.dev.config.js这个设置文件之中的设置设置的。

以上就是一个根本的Vue2+webpack项目的相干代码了；
假如必要对项目举行编译打包只必要实行：【npm run dev-build-server】
就会将这个项目编译打包到build 这个文件夹下了。

假如必要启动这个项目的服务只必要实行：【npm run dev-server】
就能启动该项目的服务了。

这一篇文章是快速的搭建一个简朴的【vue2+webpack】项目，因此没有非常详细的写每一步的代码，假如必要重新跟着每一步举行开发的话，可以去看
https://www.jianshu.com/c/324cfc38f401
这个专栏的文章，内里重新至尾的详细的写了每一步的过程。

三分钟快速搭建Vue2+webpack项目

所属分类: 问答交流

新帖推荐: 30日

推荐作品