安装Webpack并创建vue项目

devtools/2025/4/1 2:11:56/

1、新建一个工程目录

在E盘中进行新建项目

2、从命令行进入该目录,并执行NPM 的初始化命令

3、会看到目录中生成了一个“package.json”文件,它相当于NPM项目的说明书,里面记录了项目名称、版本、仓库地址等信息。

4、执行安装 Webpack 的命令

npm install webpack webpack-cli --save -dev

这里同时安装了Webpack和webpack-cli。Webpack是核心模块,webpack-cli 则是命令行工具,在本例中两者都是必需的。

5、安装结束之后,在命令行执行“npx webpack -v"和“npxwebpack -cli -v”命令,可显示各自的版本号,即证明安装成功

6、安装所需依赖

安装完成后,packagejson文件如图

7、在上述安装都完成之后,打开webstorm软件,在根目录下建立src文件,在文件夹下建立app.vue和index.js文件

如图所示

在app.vue中写入代码

在index.js中写入代码

8、在根目录下新建Webpack的配置文件webpack.config.js。配置入口,出口路径,打包后文件名和devServer的相关配置项。

9、在 package.json 文件中增加script

10、在命令提示符中输入npm run dev代码,启动项目


http://www.ppmy.cn/devtools/172200.html

相关文章

鸿蒙OS 5.0 服务能力框架深入剖析

鸿蒙OS 5.0 服务能力框架中关键类的作用分析 1\. 鸿蒙OS 5.0 服务能力框架导论 鸿蒙OS 5.0,亦称鸿蒙智联 5 1,标志着华为在分布式操作系统领域迈出的重要一步。与早期版本采用兼容安卓的AOSP层、Linux内核以及LiteOS内核不同,鸿蒙OS 5.0 专注…

如何快速看懂并修改神经网络

前言:个人之见,一个神经网络网络源码出现,你先看数据集的输入和输出,而这数据集肯定要包括数据增加和制作数据集,第二 看模型的输入和输出(至于模型内部可以自己看论文 无非就是加了几个组件),然…

deepseek(2)——deepseek 关键技术

1 Multi-Head Latent Attention (MLA) MLA的核心在于通过低秩联合压缩来减少注意力键(keys)和值(values)在推理过程中的缓存,从而提高推理效率: c t K V W D K V h t c_t^{KV} W^{DKV}h_t ctKV​WDKVht​…

Java制作简单的聊天室(复习)

设计的知识点:几乎包含java基础的全部知识点(java基础语法,java基础进阶:双列集合,io流,多线程,网络编程等) 代码如下 客户端: 服务器采用的时多线程的循环多线程的方式…

Wireshark网络抓包分析使用详解

序言 之前学计网还有前几天备考华为 ICT 网络赛道时都有了解认识 Wireshark,但一直没怎么专门去用过,也没去系统学习过,就想趁着备考的网络相关知识还没忘光,先来系统学下整理点笔记~ 什么是抓包?抓包就是将网络传输…

C语言基础—构造类型

数据类型 1.基本类型/基础类型 整型 短整型:short[int] --2字节 基本整型:int --4字节 长整型:long[int] --32位4字节/64位8字节 长长整型:long long [int] (C99) 注意:以上类型又都分为sig…

爬虫学习-爬取古诗

目录 流程讲解以及代码构建 1. get_html 函数 2. get_poem_data 函数 3. get_poem_links_by_type 函数 4. get_data 函数 5. save_data 函数 6. analyze_data 函数 7. visualize_data 函数 主程序逻辑 运行效果 完整代码 古诗网址:唐诗三百首全集_古诗文网 唐诗作为…

缓存击穿中的二次判断

使用分布式锁解决缓存击穿时 可以使用二次判锁来提高性能 : POV :当热Key大量失效 大量线程请求redis未命中 开始打入数据库 此时就需要加锁来阻塞请求 等redis缓存重构重构后再请求 二次判断提高性能的针对目标就是在线程1重构过程中打入的请求 …