使用webpack+npm创建项目

最新推荐文章于 2025-06-12 14:53:12 发布
原创 最新推荐文章于 2025-06-12 14:53:12 发布 · 7.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue 

本文指导如何通过终端和npm来创建一个Vue项目。首先全局安装Vue和Vue CLI，然后使用`vue init webpack 项目名`初始化项目。接着进入项目目录，运行`npm install`下载依赖。最后，通过`npm run dev`启动项目，访问127.0.0.1:8080查看运行效果。项目结构包括：build（打包配置）、config（相关配置）、src（源码，如App.vue、main.js）、static（静态资源）、.babelrc（ES6解析配置）、.editorconfig（编辑器配置）、.gitignore（git忽略配置）、index.html（单页入口）和package.json（项目配置）。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 使用终端进入项目存放位置
    这里写图片描述

  2. 全局安装vue
    npm i vue -g
    npm i vue-cli -g
    这里写图片描述

  3. 进行下载项目
    vue init webpack 20180823
    这里写图片描述

打开项目存放地址：可以看到项目已创建完成
这里写图片描述

  1. 下载项目依赖安装包
    a 进入下载项目
    这里写图片描述

b 输入 npm install 下载项目依赖的相关安装包
这里写图片描述

  1. 启动项目
    输入 npm ru
最低0.47元/天 解锁文章

200万优质内容无限畅学
建立一个前端的工具库---创建npm工程
chaos_hf的博客
12-06 3997
要建一个工程，首先得明白这个工程的作用。因为现在公司还有部分工程是老工程，所以，这次规划除了针对新工程，还需要能够将js打包成压缩文件提供给老工程使用标签引入。打包工具选择webpack，单元测试集成了karma+jasmine。好了，现在就开始搭建吧！ npm标准工程 因为是npm工程，所以本地首先要有node环境，并且装上npm。如果没有配置的请自行到官网下载安装。 当环境
Webpack搭建项目工程
爱coding的小蕾蕾
08-16 4871
  虽然项目已经搭建成功，但是，我现在愿意重新走一次来帮自己和大家捋顺一点。   基本篇——打包成功第一个文件 1.新建一个文件，在当前目录下执行 npm init 然后一直回车： 可以发现，当前目录下多了一个 package.json 的文件，文件里面自动生成以下代码： { "name": "demo", "version": "1.0.0", "descri...
VScode使用npm启动项目以及npm install ,npm start报错问题处理
最新发布
m0_74240639的博客
06-12 1238
VScode使用npm启动项目以及npm install ,npm start报错问题处理
如何创建项目
surden的博客
12-20 2797
npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。在这个界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，Enter进入下一界面。npm install 包名：安装指定名称的包。
npm 创建 node.js 项目
Mr. David 专栏
08-26 1856
package.json是创建任何node.js项目必须要有的一个文件。因为在package.json文件中，有详细的项目描述，包括：(1)项目名称：name(2)版本：version(3)依赖文件：dependencies 等等..
前端npm项目构建
weixin_45131762的博客
01-17 1172
npm相当于java的maven 步骤： 创建项目文件夹，项目初始化操作，使用命令：npm init 效果：生成package.json文件（里面需要一些信息录入，如果默认，可以直接使用npm init -y生成） 修改npm镜像地址 #经过下面的配置，以后所有的npm install都会经过淘宝的镜像地址下载 npm config set registry https://registry.npm.taobao.org #查看配置信息 npm config list 下载依赖测试 使用命令：npm ins
IDEA使用vue-cli+webpack+npm脚手架创建项目
weixin_43421060的博客
07-11 2284
IDEA使用vue-cli脚手架创建项目 vue-cli的参考文档：https://cli.vuejs.org/zh/guide/cli-service.html 本文内容纯粹是操作过程，没有很多的知识讲解，需要了解详细知识的请到以上的文档去看，你需要先确保你的电脑安装了npm和webpack。 过程 在命令行输入以下指令 npm i -g vue-cli 等待下载依赖（过程较长请耐心等候...
react-webpack：构建react + webpack + es6环境
01-31
这是一个建造webpack + react项目脚手架的简易教程，参照了的配置方式。每一个例子都有非常详细的建造步骤。 运行并启动项目 克隆项目到本地以后，选择要运行的示例进入到该项目路径下 安装： npm install 运行： ...
使用webpack5+TypeScript+npm发布组件库
qq_15509267的博客
04-15 1216
作为一只前端攻城狮，没有一个属于自己的组件库，那岂不是狮子没有了牙齿，士兵没有了武器，姑娘没有了大宝SOD蜜，你没有了我....言归正传，下面将给大家介绍如何通过webpack5编译一个TS组件发布到NPM平台。
harmonyos2-React-Nodejs-Project-Quickly-Start:从零开始-使用React+Webpack+Node
07-01
本文将以一个例子来讲解如何使用React、Webpack、Nodejs、Express这些技术快速构建项目，为后期的深入学习铺好道路，接下来我们就一起动手体验一下吧！ 1. 安装及配置环境 1.1 安装Node.js与NPM Windows下安装Node....
学习NPM VUE创建项目
HxhEi的博客
09-06 283
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create（官方文档） 0.首先先下载node.js----->长按windos+R 进入后输入命令 安装好，使用命令检查是否安装成功 如上图则是安装成功！！！ 1.打开code软件，创建一个文件夹（命名为：vuenpm01) 2.右击文件夹，点击RevealinFileExplorer进入vuenpm01文件 3.进...
npm创建vue项目
qq_41425194的博客
07-01 5914
可通过官网下载：https://nodejs.org/en/创建一个自己的文件夹，在文件夹所创建的位置下，搜索cmd打开终端命令行输入命令：npm install -g @vue/cli1.输入命令 vue create demo01（vue create + 文件名）正在上传…重新上传取消 2.创建途中选择第一个即可3.在编译软件中通过cmd打开项目，系统命令行运行npm输入命令 npm run server...
NPM脚手架创建项目
leva的博客
06-30 364
步骤08按回车键，设置是否保存本次设置，如果选择保存本次设置，以后再使用vue create命令创建项目时，会出现保存过的配置供用户选择。步骤07按回车键，设置如何保存配置信息，第1项表示在专门的配置文件中保存配置信息，第2项表示在package.json文件中保存配置信息，这里选择第1项，步骤02按回车键，进入模块配置界面，然后通过空格键选择要配置的模块，这里选择“CSS Pre-processors”来配置预处理器，步骤06按回车键，进入何时检查代码界面，这里选择默认的第一项，表示保存时检测，
npm创建项目的流程
XWQ_Q7的博客
10-31 5165
npm创建项目的流程 什么是node.js?
创建Npm Vue2.0项目
m0_59511468的博客
04-18 1602
简单易学,创建Vue2.0项目
创建基本的webpack项目
qq_38721353的博客
01-04 256
创建一个webpack项目步骤如下： 创建一个文件夹，给文件夹取一个名称，在这里文件夹的名称为webpack 进入该文件夹打开cmd，输入npm init -y，初始化项目 在项目根目录创建src源代码目录(文件夹）和dist产品目录(文件夹），选择一款合适的IDE打开项目 在src目录下创建index.html 安装需要的包：webpack,webpack-cli， 安装命令为nmp i webpack webpack-cli -D，这条命令为局部安装，也就是说安装路径在项目的文件
npm创建nodejs项目详解
weixin_33858336的博客
02-25 675
为什么80%的码农都做不了架构师？>>> ...
从零入门nodejs，并新建一个webpack项目
Astroline的博客
05-14 418
开始之前先定一个准则，我的博客未必全部正确，要敢于质疑，路不通就换条路。 一、该文章的基本内容 nodejs的安装 yarn安装 创建webpack项目 配置package.json 让项目跑起来 安装gulp管理工具 对css进行预处理 => gulp-sass (有个gulp4的坑) 刷新页面神器 => browser-sync html预处理 => jade(Pug) ...
创建项目并且实现npm发包
weixin_45646912的博客
05-20 350
创建项目并实现远程npm发包
webpack+layui创建后台项目
06-09
下面是一些简单的步骤，可以帮助你创建一个基于Webpack和Layui的后台项目： 1.初始化项目 在命令行中创建一个新的项目文件夹并初始化它： ``` mkdir my-project cd my-project npm init -y ``` 2.安装依赖 安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值