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

藏宝库编辑 2024-9-17 14:00:57 106 0 来自 中国
三分钟快速搭建Vue2+webpack项目
项目目次
如下图:
图1
1.png 此中:
【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
这个专栏的文章,内里重新至尾的详细的写了每一步的过程。
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-23 16:07, Processed in 0.193980 second(s), 35 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表