Webpack + vue2.0 构建vue项目初始化详细过程

SWAING疯子

已于 2023-12-07 09:39:40 修改

阅读量1.4k

点赞数 31

文章标签： webpack vue.js 前端

于 2023-12-06 17:18:28 首次发布

本文链接：https://blog.csdn.net/weixin_44301648/article/details/134833490

版权

1、第一步，在本地文件夹下（C盘或者D盘）新建一个文件夹（webpack-project）

2、第二步，打开终端或者在新建的文件夹里右键打开PowerShell输入命令： npm init

会生成一个package.json文件

3、第三步，按照初始化项目结构创建以下文件：

webpack-project

|- index.html

+ |- main.js

|- package.json

+ |- webpack.config.j

//index.js
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>
        webVue 学习
    </title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

</style>
<body>
    <div id="app"></div>
</body>
</html>

//webpack.config.js

// // 这是一个 JavaScript 代码块

'use strict'



const path = require('path') // 引入'path'模块



// 导出一个对象，其中包含配置项

module.exports = {

    // 设置开发模式

    mode: 'development',

    // 指定入口文件的路径

    entry: path.join(__dirname, './main.js'),

    // 指定输出文件的配置

    output: {

        // 设置文件名

        filename: 'bundle.js',

        // 设置输出文件的路径

        path: path.join(__dirname, 'dist')

    },

}

4、在补充main.js之前，需要安装框架的基本依赖：

1 安装Webpack npm install --save-dev webpack webpack-cli；

默认给你安装了

+ webpack-cli@4.9.2

+ webpack@5.89.0

但是后面启动项目时会发现版本报错问题，所以建议webpack-cli下载4.10.0版本

2 启动服务

使用 webpack-dev-server 来启动本地服务

安装npm install --save-dev webpack webpack-dev-server
修改 package.json

  {
  "scripts": {
        "dev": "webpack serve",
        "build": "webpack"
    },
  }

3.webpack.config.js修改

module.exports = {

// ...

// 指定开发服务器的配置

    devServer: {

        // 启用压缩

        compress: true,

        // 设置主机为"localhost"

        host: "localhost",

        // 设置端口号为8080

        port: 8080,

        // 自动打开浏览器

        open: true,

        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项

        historyApiFallback: true, // 解决前端路由刷新404问题

    },

}

3 生成 HTML 文件

使用 html-webpack-plugin 来生成 HTML 文件

执行 npm install --save-dev html-webpack-plugin
修改webpack.config.js

module.exports = {

// ...

plugins: [

        new HtmlWebpackPlugin({ // 创建一个HtmlWebpackPlugin实例

            filename: `index.html`, //生成的文件名

            template: path.resolve(__dirname, `./index.html`), //源文件的绝对路径

        }),   

    ],

}

4 安装vue

执行 npm install --save-dev vue-loader vue-template-compiler
执行 npm install --save vue vue-router

避坑提示：vue下载默认是vue3.0最新版本，需自行找到vue2.0稳定版，我是vue@2.5.17，对应的vue vue-router也是需要修改vue@3.0.0，对应的vue-loader默认下载的是x17的，在构建时也是会报错，自己查找资料是需要把版本降到x15，我的是vue-loder@15.9.8

3.在 webpack.config.js 中配置 vue-loader 用于引入 .vue 类型文件

const { VueLoaderPlugin } = require('vue-loader') // 引入'vue-loader'模块并解构出VueLoaderPlugin属性

module.exports = {
  // ...
  plugins: [

//...

        new VueLoaderPlugin() // 创建一个VueLoaderPlugin实例

    ],

// module对象包含着用于解析和加载模块的规则

    module: {

        rules: [

            // 第一条规则，用于处理.vue文件

            {

                test: /\.vue$/,

                use: [{

                    loader: 'vue-loader'

                }]

            },

        ]

    },
}

5 配置 Babel

执行 npm install --save-dev @babel/core @babel/preset-env babel-loader
修改webpack.config.js

module.exports = {

// module对象包含着用于解析和加载模块的规则

    module: {

        rules: [

     //...       

// 第二条规则，用于处理.js文件

            {

                test: /\.js$/,

                exclude: /node_modules/,

                use: [{

                    loader: 'babel-loader'

                }]

            },

        ]

    },
}

3.创建一个 .babelrc 文件在根目录

// index.babelrc

{

    "presets": ["@babel/preset-env"]

  }

4、给main.js文件添加相关的内容

import Vue from 'vue'
import Router from "vue-router";

Vue.use(Router);

// 导入路由
import router from "./router";
// 导入App组件
import App from './app.vue'

const routes = [{
    path: "/",
    name: "index",
    component: () =>
        import ('../views/index.vue')
}]
const router = new Router({
    mode: "history",
    // base: process.env.BASE_URL,
    routes
});

// 创建一个新的Vue实例
new Vue({
    // 挂载元素选择器
    el: "#app",
    // 设置路由
    router,
    // 设置渲染函数
    render: h => h(App)
});

5、新建一个 app.vue 文件作为路由组件的容器

<template>
    <div id="app" style="height:100vh;overflow-x:hidden;overflow-y: hidden">
      <router-view />
      <!-- <el-backtop target="#app" :visibility-height="500"></el-backtop> -->
    </div>
  </template>
  
  <script>
  export default {
    name: "App",
  };
  </script>

6、新建一个子组件index.vue做为展示页

<template>
    <div>
      <h1>这是首页1</h1>
    </div>
    </template>
    
    <script>
    export default {}
    </script>
    <style scoped>
    
    </style>

7、vscode里打开终端输入npm run dev 成功打开浏览器

8、接下来是webpack的优化和vue项目的拓展，与vue-cli一样，给基础框架添砖加瓦