怎么从零搭建vue项目（使用webpack手动搭建）

news2024/11/17 8:51:46

目录

  • 一、前提条件
  • 二、手动搭建vue项目的步骤：
    • 1. 创建项目
    • 2. 生成package.json文件
    • 3. 引入webpack和创建webpack.config.js文件
    • 4. 创建index.html，main.js文件
    • 5. 使用webpack命令编译
    • 6. 引入vue2，修改index.html，main.js文件
    • 7. 引入babel
    • 8. 再次执行webpack命令，完成搭建
  • 三、Webpack的常用配置：
    • 1.HtmlWebpackPlugin插件(复制index.html)。
    • 2.webpack-dev-server插件(实时加载)
    • 3. css加载器(css-loader和style-loader)
    • 4. 图片资源和字体的加载
    • 5. vue-loader
    • 6. 热重载

一、前提条件

在开始以下步骤之前需先安装好nodejs环境（最好直接安装nvm，然后再通过nvm管理node版本），如未安装，可参考：https://www.taoxtao.cn/archives/235824

二、手动搭建vue项目的步骤：

1. 创建项目

执行以下命令：

mkdir  vue-demo
cd vue-demo

如图所示：

在这里插入图片描述

2. 生成package.json文件

执行以下命令：

npm init

如图所示，此时能看到有生成package.json文件：

在这里插入图片描述
在这里插入图片描述

3. 引入webpack和创建webpack.config.js文件

执行以下命令：

npm install webpack --save-dev

如图所示：

在这里插入图片描述
在这里插入图片描述

然后，创建webpack.config.js文件：

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "demo.js"
    }
}

如图所示：

在这里插入图片描述

4. 创建index.html，main.js文件

index.html文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack-demo</title>
</head>
<body>
    <script src="./dist/demo.js"></script>
</body>
</html>

在这里插入图片描述
创建src文件夹，在文件夹下创建main.js文件，内容如下：

alert('hello world');

如图所示：

在这里插入图片描述

5. 使用webpack命令编译

在这里插入图片描述

此时，顺便安装webpack-cli。可见目录多了一个dist文件夹下面包含demo.js文件。内容如下所示：

在这里插入图片描述

6. 引入vue2，修改index.html，main.js文件

执行以下命令：

npm install vue@2.x.x

如图所示：

在这里插入图片描述

执行命令后能发现package.json中自动新增了以下内容：
在这里插入图片描述

修改main.js内容如下：

import Vue from 'vue'
var vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue'
    }
})

在index.html中加入msg
在这里插入图片描述

7. 引入babel

执行以下命令：

npm install --save-dev babel-core babel-loader

将babel加入到webpack.config.js配置文件中

module: {
    rules: [
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        }
    ]
}

如图所示：
在这里插入图片描述

8. 再次执行webpack命令，完成搭建

在这里插入图片描述
关于提示“The ‘mode’ option has not been set”,可在webpack.config.js中设置为开发模式：
在这里插入图片描述

此时在浏览器打开index.html报以下错误：
在这里插入图片描述

这是因为正在使用的是vue的运行时版本，而此版本中的编译器时不可用的，我们需要把它切换成运行时 + 编译的版本，需要在配置文件中添加以下代码：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
}

如图所示：
在这里插入图片描述

再次运行webpack 命令重新编译，然后再在浏览器打开index.html文件：
在这里插入图片描述

此时，一个基于webpack的vue 项目就搭建好。

三、Webpack的常用配置：

1.HtmlWebpackPlugin插件(复制index.html)。

作用：

编译时自动在dist的目录中创建一个html文件并将index.html中的内容复制过去。

执行以下命令用以引入插件：

npm install --save-dev html-webpack-plugin

在这里插入图片描述

在webpack.config.js文件中添加如下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
…
plugins:[
    new HtmlWebpackPlugin()
]

位置如下：

在这里插入图片描述

执行webpack命令再次编译，将自动在dist目录下生成html文件：
在这里插入图片描述

对比原本自己写的index.html，可知少了以下内容：

在这里插入图片描述

接下来可通过修改配置文件来解决这个问题：

plugins:[
    new HtmlWebpackPlugin({
        title: "vue demo",
        template: "index.html"
    })
]

删掉dist文件夹下index.html的script代码后再次编译，得到新的index.html文件如下：

在这里插入图片描述

2.webpack-dev-server插件(实时加载)

作用：
<font color='‘purple’>
提供了一个简单的web服务器，能够实时重新加载。无须在浏览器中直接打开文件（我们实际开发中将代码部署在server中，而不是在浏览器中直接打开文件。）。

执行以下命令：

npm install --save-dev webpack-dev-server

在webpack.config.js文件中添加如下配置，以告知webpack-dev-server， 在localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。：

devServer: {
    static: path.resolve(__dirname,'static')
}

位置如下：

在这里插入图片描述

在package.json中添加一个script脚本以直接运行开发服务器（dev server）

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open",
  "build": "webpack"
},

位置如下：
在这里插入图片描述

执行npm run dev命令：
在这里插入图片描述

此时，浏览器将会自动打开页面，这证明已经成功启动服务：
在这里插入图片描述

3. css加载器(css-loader和style-loader)

执行以下命令安装css-loader和style-loader：

npm install --save-dev css-loader style-loader

在这里插入图片描述

在 webpack.config.js 中进行如下配置：

module:{
    rules:[ 
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}

具体位置如下：

在这里插入图片描述

在src 目录下新建一个styles的文件夹并在里面添加一个main.css的文件,写上以下内容：

#app{
    color: red;
}

在这里插入图片描述

然后在main.js文件中引入css

在这里插入图片描述

再次执行npm run dev命令，页面上的字体样式将会变化：
在这里插入图片描述

4. 图片资源和字体的加载

说明：

url-loader是基于file-loader的封装，故需引入file-loader。url-loader解决图片较多时过多http请求导致页面性能降低的问题，将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符,再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。

执行以下命令：

npm install --save-dev file-loader url-loader

在这里插入图片描述

在配置文件添加以下内容：

{
    test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        esModule: false
    }
},
{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000
    }
}

位置如下：

在这里插入图片描述

在src 目录下新建一个images的文件夹并在里面添加图片

在这里插入图片描述

然后在main.js中引入

import logo from'./images/logo.png'

在这里插入图片描述

接着在index.html中使用

在这里插入图片描述

刷新页面可见已经能看到图片：

在这里插入图片描述

5. vue-loader

说明：

在vue的开发过程中，通常我们需要写.vue结尾的文件即组件，这类文件需要通过 vue-loader 来加载，vue-template-compiler来编译。

执行以下命令：

npm install --save-dev vue-loader@15.9.8 vue-template-compiler

在这里插入图片描述

在webpack.config.js文件中添加：

const { VueLoaderPlugin } = require('vue-loader')
…
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]
},

…
plugins:[
    new VueLoaderPlugin()
]

修改index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack-demo</title>
</head>
<body>
    <div id="app">
       
    </div>
</body>
</html>

在src文件夹下新建app.vue文件，内容如下：

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo">
        {{msg}}
    </div>
</template>
<script>
    export default {
        name: 'app',
        data(){
            return {
                msg: '尝试vue页面是否能打开了'
            }
        }
    }
</script>
<style scoped>
    img{
        width: 100px;
        height: 100px;
    }
</style>

修改main.js:

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

var vm = new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

运行npm run dev，浏览器页面内容将会更新：

在这里插入图片描述

6. 热重载

说明：

“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改 .vue 文件时，该组件的所有实例将在不刷新页面的情况下被替换。手动设置工程时，热重载会在启动 webpack-dev-server --hot 服务时自动开启。

修改package.json：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/381085.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

物理机不能访问虚拟机kali的web服务解决方案记录

物理机不能访问虚拟机kali的web服务解决方案记录

目录 环境 问题描述 解决方案 知识补充 效果测试 其他思路 环境 kali&#xff08;nat模式&#xff09;&#xff0c;物理机&#xff0c;可互ping 问题描述 kali的web服务器不能在物理机上访问。 1.本机能ping通虚拟机 2.虚拟机也能ping通本机 3.虚拟机能访问自己的web …
阅读更多...
Python基础知识——列表

Python基础知识——列表

列表 列表是可以存放任何数据&#xff0c;包括整型&#xff0c;浮点型&#xff0c;字符串&#xff0c;布尔型等等&#xff0c;是常用的数据类型之一。 1.列表的创建 列表也是一个可迭代对象 1. 普通形式l [1,2,3,4,5] ---整型列表l ["a","b","c&…
阅读更多...
一篇搞懂tcp，http，socket，socket连接池之间的关系

一篇搞懂tcp，http，socket，socket连接池之间的关系

前言 作为一名开发人员我们经常会听到HTTP协议、TCP/IP协议、UDP协议、Socket、Socket长连接、Socket连接池等字眼&#xff0c;然而它们之间的关系、区别及原理并不是所有人都能理解清楚&#xff0c;这篇文章就从网络协议基础开始到Socket连接池&#xff0c;一步一步解释他们之…
阅读更多...
激光雷达上车「热」背后的焦虑

激光雷达上车「热」背后的焦虑

激光雷达的上车节奏正在加速。 高工智能汽车研究院监测数据显示&#xff0c;从2022年9月至今&#xff0c;中国市场乘用车月度前装标配搭载激光雷达一直保持在1.5万台以上&#xff0c;其中&#xff0c;去年12月更是单月冲破3万台大关。 本周&#xff0c;Luminar宣布扩大与梅赛德…
阅读更多...
实现小说自由，国产浏览器出手了，吊打各类阅读软件

实现小说自由，国产浏览器出手了，吊打各类阅读软件

喜欢看小说的朋友都知道&#xff0c;有时候看小说看到一定的章节就要收费了&#xff0c;那我们怎么实现小说阅读自由&#xff0c;免费看完整部小说呢&#xff1f;下面给大家分享可以免费看小说的良心浏览器&#xff0c;吊打各类阅读软件&#xff0c;真的是巨好用。无论是古代穿…
阅读更多...
【读论文】THFuse

【读论文】THFuse

【读论文】THFuse介绍网络架构多分支CNN特征提取块基于VIT的全局特征提取快图像重建块损失函数总结参考论文&#xff1a; https://www.sciencedirect.com/science/article/abs/pii/S0925231223000437如有侵权请联系博主介绍 一篇基于CNN和VIT的关于红外可视图像融合的论文&…
阅读更多...
【wpf】ItemsControl 的Binding 小技巧

【wpf】ItemsControl 的Binding 小技巧

ItemsControl 非常常用和好用的控件&#xff0c;我经常将之用于配置界面&#xff01; 比如这么一个配置界面&#xff1a; 整体是一个ItemsControl&#xff0c;每个子界面就是其中的一个Item。 ItemsControl 的 ItemsSource 绑定到 ParameterInfo 的集合 public ObservableCo…
阅读更多...
最简单的微信多开防撤回方式

最简单的微信多开防撤回方式

微信&#xff0c;大家工作中生活中用的最多的一款应用&#xff1b;很多公司喜欢用微信来作为工作沟通的工具&#xff0c;官方原版只支持登陆一个微信&#xff0c;这对于需要在电脑上登陆多个微信账号的朋友来说肯定是极其的不方便。另外有的时候别人撤回了一些重要消息&#xf…
阅读更多...
目前医疗器械数据库有哪些？最推荐哪些？

目前医疗器械数据库有哪些？最推荐哪些？

在英特网发达的今天&#xff0c;医疗器械信息查询应该是一件便捷的事情&#xff0c;但不知道大家有没有遇到过这种类似情况&#xff0c;就是在查询医疗器械信息时&#xff0c;如果通过百度去检索&#xff0c;查到的结果往往会不尽人意&#xff0c;比如信息陈旧、太分散、来源不…
阅读更多...
Spring security 个人理解

Spring security 个人理解

改文章写的很好&#xff1a;https://zhuanlan.zhihu.com/p/342755411 Spring security 分为两个部分 登陆认证权限认证 登陆认证 其实就是就是登陆注册&#xff0c;然后获取登陆凭证的问题 操作如下 登陆账号密码&#xff0c;通过账号查询出用户数据&#xff0c;然后密码进…
阅读更多...
如何使用DeadFinder寻找失效链接

如何使用DeadFinder寻找失效链接

关于DeadFinder DeadFinder是一款功能强大的链接分析工具&#xff0c;该工具可以帮助广大研究人员快速地寻找目标页面中的无效链接&#xff08;死链&#xff09;。所谓死链&#xff0c;即一个页面中存在的无法被连接的一条链接。这些链接如果一直保留在页面中的话&#xff0c;…
阅读更多...
Hive中的高阶函数（二）

Hive中的高阶函数（二）

1、UDTF之explode函数 explode(array)将array列表里的每个元素生成一行&#xff1b; explode(map)将map里的每一对元素作为一行&#xff0c;其中key为一列&#xff0c;value为一列&#xff1b; 一般情况下&#xff0c;explode函数可以直接使用即可&#xff0c;也可以根据需要结…
阅读更多...
[python入门(53)] - python中的OS模块(包) - 2

[python入门(53)] - python中的OS模块(包) - 2

目录 ❤ OS模块和path模块(函数) ❤ os模块中操作目录以及文件的函数 ❤ os模块中遍历目录数 ❤ 一些表现形式参数 ❤ 获取在进程的控制终端上登录的用户的名称&#xff1a; os.getlogin() &#xff08;即此时pc登录的用户名&#xff09; ❤ 总结 ❤ os.listdir()…
阅读更多...
3月4日线下讲座《项目经理五项管理锦囊》

3月4日线下讲座《项目经理五项管理锦囊》

在项目管理过程中&#xff0c;你是否有过因为人际关系紧张&#xff0c;而导致团队协作不顺畅&#xff1f; 项目团队内耗严重&#xff0c;成员之间缺乏信任冲突较多&#xff0c;影响士气项目质量及项目周期等问题&#xff1f; 为什么会导致这样的结果&#xff1f;如何避免踩坑&a…
阅读更多...
TAS5411QPWPRQ1引脚图LP873220RHDRQ1汽车应用开关稳压器

TAS5411QPWPRQ1引脚图LP873220RHDRQ1汽车应用开关稳压器

8W单声道汽车类D类音频放大器&#xff1a;TAS5411QPWPRQ1引脚图 【概述】TAS5411-Q1是一款单声道D类音频放大器&#xff0c;非常适用于汽车类紧急呼叫(eCall)、远程信息处理、仪表板应用。该器件采用14.4VDC汽车电池供电&#xff0c;可在负载为4Ω且THDN不超过10%的情况下提供高…
阅读更多...
MQTT的学习之Mosquitto集群搭建

MQTT的学习之Mosquitto集群搭建

文章钢要&#xff1a; 1、进行双服务器搭建 2、进行多服务器搭建 一、Mosquitto的分布式集群部署 如果需要做并发量很大的时候就需要考虑做集群处理&#xff0c;但是我在查找资料的时候发现并不多&#xff0c;所以整理了一下&#xff0c;搭建简单的Mosquitto集群模式。 首…
阅读更多...
Win11搜索栏无法使用怎么办？

Win11搜索栏无法使用怎么办？

随着Windows 11的正式发布&#xff0c;许多用户已经升级了他们的操作系统。但是安装Win11系统之后&#xff0c;人们发现它有一些问题。例如&#xff0c;Win11搜索栏无法使用&#xff0c;这极大地影响了用户体验。那我们该如何解决Windows搜索栏用不了这一问题&#xff1f;方法1…
阅读更多...
Matplotlib精品学习笔记002-Pyplot详解，快速绘图

Matplotlib精品学习笔记002-Pyplot详解，快速绘图

Matplotlib精品学习笔记002-Pyplot详解&#xff0c; matplotlib.pyplot集合了一系列功能&#xff0c;运行起来和MATLAB相似。 每个pyplot功能都会对画布&#xff08;figure&#xff09;进行修改&#xff1a;包括创建画布&#xff0c;在画布上创建一个画图区&#xff0c;向画图…
阅读更多...
【JVM】垃圾回收器

【JVM】垃圾回收器

垃圾回收器 Serial收集器 单线程&#xff0c;进行垃圾收集工作时必须暂停其他所有的工作线程。STW造成了不好的用户体验。 新生代采用复制算法&#xff0c;老年代采用标记整理算法。 Serial Old Serial 收集器的老年代版本&#xff0c;它同样是一个单线程收集器。它主要有两…
阅读更多...
FairGuard-Windows加固工具版本更新日志

FairGuard-Windows加固工具版本更新日志

FairGuard-Windows加固工具1.2.2版本更新日志&#xff1a; ■ 增加Unity Resources资源加密的支持; ■ 增加单独Assetbundle资源加密&#xff0c;并同时支持压缩包和文件夹作为输入的方式; ■ 增加对游戏原文件夹加固的支持; Windows加固方案介绍 FairGuard专为游戏量身定…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023