使用webpack创建vue项目

最新推荐文章于 2024-09-14 10:29:57 发布
最新推荐文章于 2024-09-14 10:29:57 发布
阅读量786 收藏 3
点赞数 2
分类专栏： 笔记 文章标签： webpack vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gdyhvy/article/details/124772721
版权
本文将指导你如何从零开始使用webpack创建一个Vue项目。首先，在新建的文件夹中执行npm初始化，接着安装必要的依赖如webpack、webpack-dev-server、vue及vue-loader。接着建立项目目录结构，并在main.js中引入Vue。在index.html中插入基本HTML，并配置webpack.config.js。随后安装所需插件，并在package.json的scripts中添加启动命令。最后，通过终端运行项目并在本地服务器查看效果，实时预览app.vue的更改。
摘要由CSDN通过智能技术生成

  1. 创建空文件夹

  2. 文件夹下执行：npm init

  3. 安装 webpack webpack-dev-server vue vue-loader

     npm i webpack-dev-server vue vue-loader

  4. 创建目录结构
    在这里插入图片描述

  5. main.js 中添加代码

    //main.js
import {
     createApp} from "vue";
import App from './app'
const app = createApp(App)
app.mount('#app')

    在index.html中添加代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset
最低0.47元/天 解锁文章
gdyhvy
关注
专栏目录
使用webpack搭建一个VUE工程项目
qq_41876727的博客
09-30 281
使用webpack搭建一个VUE工程项目`webpack` 工作原理构建一个`webpack`工作环境over若有问题，敬请指教！ webpack 工作原理 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每...
三、webpack搭建vue项目
xiaojiango0的博客
11-02 656
webpack搭建vue项目
创建基于Webpack的Vue.js项目
逆境清醒的博客
03-19 5217
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
使用Webpack创建vue脚手架并搭建路由---详解
最新发布
m0_74079648的博客
09-14 1136
Webpack配置vue3以及vue-router vue 是一个非常好用的 javascript 库，现在已经发行了 vue 3，我们可以直接导入使用库文件，也可以使用单文件（SFC）的形式，直接使用库文件会简单一点，我们先来试一下吧。
使用webpack搭建vue项目；webpack+vue
weixin_57265841的博客
04-10 4979
使用webpack搭建vue项目;webpack+vue
webpack 创建VUE项目
G_whang的博客
08-10 1151
下载地址：https://nodejs.org/en/进入 到新建项目中，然后输入命令 初始化。下载完成以后点击安装，全部下一步即可。全局安装webpack 输入命令。安装完成后输入命令 查看。至此，创建vue项目完成。安装完成，输入命令验证。安装完成输入命令验证。
webpack创建vue项目
weixin_52102446的博客
01-30 535
使用webpack创建一个vue3+ts项目。
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
webpack创建Vue项目
IsFat_Monkey的博客
12-12 137
webpack创建Vue项目 总结 第一步 创建自己的项目目录 在项目目录中init出自己的package.json文件 npm init (npm init -y) -y的结果是不用敲enter一路选择默认的值 第二步 安装webpack 命令 npm install webpack --save-dev 安装webpack-cli 命令 npm install webpack-cli -...
详解如何使用webpack在vue项目中写jsx语法
11-27
在Vue 2.0中，`render`函数替代了`template`，它接收一个名为`h`（代表`createElement`）的参数，用于创建Vue实例的VNode（虚拟节点）。例如： ```javascript data: { msg: 'Hello world' }, render(h) { return h...
webpack创建一个vue项目方法
bingmo_的博客
03-14 2710
具体步骤：https://blog.csdn.net/weixin_42176858/article/details/88025642?spm=1001.2014.3001.5502 安装路径：https://www.cnblogs.com/goldlong/p/8027997.html 1.安装cnpm国内镜像,提升速度。输入如下命令： npm install -g cnpm --registry=http://registry.npm.taobao.org 2.安装vue-cli（用户生成Vue工程模板
WebPack创建vue项目
qq_38946351的博客
06-08 191
官网下载 node.js 打开窗口命令行 可以先查看自己的npm版本 然后下载安装cnpm（镜像） npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli 下载成功查看 初始化Vue项目（脚手架） 运行项目 安装（下载）依赖 ...
命令行生成vue项目框架
热门推荐
意外金喜
09-28 2万+
命令行生成vue项目框架
webpack构建vue项目
Angela
10-28 2987
众所周知，vue运行及打包命令：npm run dev 、npm run build.vue脚手架工程，每次只能运行一个服务，如果有两个工程，需要两套vue脚手架，同理，有10套工程就要10套vue脚手架。楼主工作中遇到的情况就是如此，由于项目的需要，产品的不同模块对应后端不同的打包地址，因此，前端就需要将不同的页面进行打包，进而衍生出多个vue工程。请看下图...
使用webpack创建Vue项目步骤
04-07
可以使用以下步骤来创建Vue项目： 1. 安装Node.js和npm ...3. 创建Vue项目：vue init webpack 项目名 4. 进入项目目录：cd 项目名 5. 安装项目依赖：npm install 6. 启动项目：npm run dev 希望对你有帮助！
创建简单vue项目 / Webpack创建vue项目
weixin_45941687的博客
02-15 5273
创建简单vue项目 / Webpack创建vue项目 2. vue.js 为2.0 上面选择的vue.js为3.0，若选择vue.js 为2.0
使用webpack脚手架创建一个vue项目
Smell_rookie的博客
06-08 1694
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目 前言介绍 创建vue的项目方式有很多种，这里仅介绍使用webpack脚手架来创建一个vue项目，下面将创建一个movie为例的项目。 前期环境准备 第一步 ：安装好npm、node 从官网下载本机对应的npm版本和node版本，这里不做介绍。安装完成后检查是否安装成功。 检验方法：打开控制命令行程序-》cmd,输入node...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值