初始化基于webpack的vue2项目

已于 2023-09-12 11:41:20 修改
阅读量474 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端JS框架：vue2 文章标签： vue-cli vue环境配置 初始化vue项目
于 2019-07-25 13:27:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42618566/article/details/97256927
本文详细介绍了如何初始化一个基于webpack的Vue2项目。首先，确保安装了Node.js环境，然后通过命令行安装vue-cli。接着，使用vue-cli创建Vue2应用，等待初始化完成。最后，运行项目，验证配置是否成功。

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

安装依赖环境

node

在这里插入图片描述
安装完事测试一下看看成功没：

node -v

npm -v

如下图所示，有版本号就是成功了：
在这里插入图片描述

安装vue2的脚手架

npm install -g @vue/cli

在这里插入图片描述

安装完执行vue -V测试下是否成功，如下图便是成功了：
在这里插入图片描述

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Webpack + vue2.0 构建vue项目初始化详细过程
weixin_44301648的博客
12-06 1643
1、第一步，在本地文件夹下（C盘或者D盘）新建一个文件夹（webpack-project）2、第二步，打开终端或者在新建的文件夹里右键打开PowerShell输入命令 ： npm init会生成一个package.json文件3、第三步，按照初始化项目结构创建以下文件： 4、在补充main.js之前，需要安装框架的基本依赖：但是后面启动项目时会发现版本报错问题，所以建议webpack-cli下载4.10.0版本使用 webpack-dev-server 来启动本地服务 3.webpack.co
从零配置webpack-vue项目(2)，吊打面试官
sgegv的博客
04-05 1004
const path = require(‘path’) //需要引入node模块const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) //vue插件const HtmlWebpackPlugin = require(‘html-webpack-plugin’) //html插件//自动清理打包后文件插件entry:{},output:{ //导出文件配置。
webpack搭建vue脚手架（从零开始）
自然 醒的博客
08-16 1049
都会作为模块处理。在webpack4以及之前版本都需要借助file-loader和url-loader进行打包图片，而在webpack5版本中不需要了，只需要进行配置就可以了，不需要进行任何loader。就会生成一个index.html和bundle.js,这时，点开index.html就能看的Hello World了，但是css还不能生效，需要借助一些loader去加载静态资源。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
使用webpack（4版本）搭建vue2项目
qq_60976312的博客
02-16 2224
使用webpack（4版本）搭建vue2项目
微信小程序授权登录和获取手机号功能（详细）
2401_83916355的博客
03-30 2941
请依次允许获得你的公开信息及手机号码请升级微信版本（四）index.wxss.header {.content {.operBtns{important;important;*/（三）index.jsPage({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。AuthorizedLogin: ‘授权登录’,
2024基于webpack从0搭建vue项目，vue2
2401_85124892的博客
05-27 864
),// 自动清除 dist 目录插件// 配置 vue loader 插件],// 配置开启服务器的信息static: {},port: 80,},
vue初始化模板 vue init webpack命令下载的模板
09-13
执行vue init webpack 命令报错，连接超时是因为去github下载webpack-template 而很多公司屏蔽了github vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 使用步骤 1.c/users/xxxxx/...
vue2+webpack2 初始化项目
u013400682的博客
08-09 1396
准备工作 下载并安装node.js 安装vue cli脚手架 npm install --g vue-cli项目初始化官网给出了两个模板： webpack-simple 和 webpack 。区别在于webpack-simple 没有包括Eslint 等检查功能，所以普通项目基本用webpack-simple 就足够了。于是我用webpack-simple 初始化的项目，运行之后，页面能正常显示，但
从零开始创建初始化一个vue2的项目
泠泠似水
06-19 5219
对于前端小白甚至是没怎么接触过前端的小伙伴们，这篇关于vue2入门的文章，正是为你量身定做，好了，废话不多说mm~ 我的电脑需要安装一些乱七八糟的软件么？ NO！！你只是要安装node中的npm包管理器，那么，该怎么安装呢？打开https://nodejs.org/en/download/ 这个网址， 根据自己电脑的系统选择适应的进行安装，点击之后，浏览器便开始进行下载，那么下载完成...
vuex 2 初始化
最新发布
monian187的博客
05-08 286
vuex 项目中初始化
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
leo的博客
11-20 4万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
通过webpack构建vue初始化项目
最爱喝怡宝的博客
12-27 907
1.安装node，这个是肯定要安装的 2.安装vue脚手架构建工具，命令行输入 npm install –g @ vue/cli 3.安装webpack 通过 npm 或者 cnpm安装webpack模块化打包工具 npm install webpack –g 或 cnpm install webpack –g 4.初始化 webpack 项目，执行命令： vue init webpack 123app 其中 123app 是我们要建立的项目的名称，当脚本执行时会进行确认 安装..
简单多表连接
qq_58585594的博客
05-27 404
首先创建一个Web项目。 再通过创建三个新建项目，model,BLL,DAL类库。 紧接着在model项目中新建项 点击‘数据’，选择实体数据模型 当你的数据库存在两个或者多个表时，就可以创建多个表。 我这里选择了两个表，效果如下。 然后点击右键，选择从数据库更新模型。 这样，一个简单的多表连接就基本完成了。 ...
Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
热门推荐
前进者
02-25 6万+
1、问题描述： 目前在压缩前端代码的时候，出现了node的内存泄漏，错误如下：Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 2、错误如下： WARNING: The callback-based version of packager() is depr...
贼 Cool：使用脚手架 vue-cli 来搭建 Vue 环境
菩提小猿的博客
02-16 604
文章目录1. 介绍搭建 Vue 环境的方法2. 使用 vue-cli 搭建 Vue2.1 设置 Node 环境2.2 基于 Node.js 安装 cnpm（淘宝镜像）2.3 安装vue2.4 安装webpack2.5 安装vue命令行工具。即：vue-cli2.6 安装webpack-cli2.7 检测安装是否成功3. 使用 vue-cli 创建项目 1. 介绍搭建 Vue 环境的方法 搭建 Vue 环境常用的有两个方法： 1、在 Vue.js 的官网上直接下载 vue.min.js，并用 “script”
electron常见问题汇总
前进者
03-16 1万+
开发项目中用到了electron，把平时遇到的问题整理一下，希望能够对大家有所帮助 问题一：electron-builder搭建项目运行起来没问题，打包的时候报错 Unresolved node modules: vue 解决方法： 把node_modules文件夹删除掉，使用npm install安装所有的模块，千万不要使用淘宝镜像安装！！！ 或者使用 yarn安装模块，就可以避免这...
vue-cli脚手架开发环境搭建
诗雨远方的博客
11-28 6538
vue-cli脚手架开发环境搭建 看了一天的《vue.js实战》此书的基础之后，大概看到第六章，也就是组件之前一章节，然后就准备试着写一下。使用vue-cli脚手架搭建了第一个项目，我是在windows 10上搭建的，并非linux和mac os,搭建流程如下。 一、node安装 1、下载node,下载地址是https://nodejs.org/...
成功解决 keras\callbacks.py:999: UserWarning: `epsilon` argument is deprecated and will be removed, use
头部AI社区如有邀博主AI主题演讲请私信—心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，专注，谦虚，自律，反思，成长，还算比较正能量的博主，公益免费传播…内心特别想在AI界做出一些可以推进历史进程影响力的技术(兴趣使然，有点小情怀，也有点使命感呀
05-17 8582
成功解决 keras\callbacks.py:999: UserWarning: `epsilon` argument is deprecated and will be removed, use 目录 解决问题 解决思路 解决方法 解决问题 F:\Program Files\Python\Python36\lib\site-pa...
vue2 插槽：单个插槽、具名插槽和数据插槽
全易
07-08 1637
首先在子组件中给出插槽<slot></slot> 然后就可以在父组件中给插槽插入以元素了 看看这两个元素是不是在ADD组件的插槽里放的呢 果然是啊，图1可以看到我们给ADD组件一个class=“add”。插入的元素是在class为add里面。 上面说的是单个插槽，下面说下具名插槽 就是给插槽起个名字，子组件可以同时留有多个个插槽 在子组件中给slot插槽起名： 然后...
Vue项目初始化模板webpack-vue-template详解
在了解“webpack-vue-template:Vue项目的初始化”这一标题的详细知识点之前，我们首先需要明确几个核心概念：Vue.js、Webpack、uniTest以及它们在项目初始化中的作用。接下来，我会深入分析这些概念以及它们如何被...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级码吏

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值