webpack-03搭建vue2项目

最新推荐文章于 2024-05-27 15:20:52 发布

前端小菜姬

最新推荐文章于 2024-05-27 15:20:52 发布

阅读量462

点赞数 6

文章标签： webpack 前端 vue

本文链接：https://blog.csdn.net/weixin_65116989/article/details/136879165

版权

本文详细介绍了如何初始化一个基于Vue2和Webpack的项目，包括创建文件结构、安装依赖、配置Webpack并编写基本的HTML和Vue组件。

摘要由CSDN通过智能技术生成

初始化项目

生成package.js文件

npm i init -y

下载生产依赖

npm i vue@2

下载开发依赖

npm i -D webpack webpack-cli vue-loader@15.9.3 vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env

webpack-cli：提供终端命令去调用webpack

vue-loader：vue代码转换为js

vue-template-compiler：vue代码中template转换为html

下载loader：用于代码转换，比如sass->css es6->es5

创建基本文件目录

--dist
	index.html
--src
	App.vue	根页面
	main.js 入口文件
webpack.config.js
package.json

/dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

/src/App.vue

<template>
  <div>我是app</div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped></style>

/src/main.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
  el: "#app",
  render: (h) => h(App),
});

webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.s[ca]ss$/,
        use: ["style-loader", "css-loader", "scss-loader"],
      },
      {
        test: /\.m?js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: "asset/resource",
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

package.json

{
  "name": "vue2_webpack_base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve":"webpack --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.7.16"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@babel/preset-env": "^7.23.7",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "sass": "^1.69.6",
    "sass-loader": "^13.3.3",
    "style-loader": "^3.3.3",
    "vue-loader": "15.9.3",
    "vue-template-compiler": "^2.7.16",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

启动打包命令：

npm run serve

注意点

这里需要注意一下，下载vue时候需要指定vue2版本：npm i vue@2

而且vue-loader使用15.9.3即可

前端小菜姬

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
webpack-03搭建vue2项目

vue-template-compiler：vue代码中template转换为html。下载loader：用于代码转换，比如sass->css es6->es5。这里需要注意一下，下载vue时候需要指定vue2版本：npm i vue@2。webpack-cli：提供终端命令去调用webpack。而且vue-loader使用15.9.3即可。vue-loader：vue代码转换为js。生成package.js文件。
复制链接

扫一扫