基于webpack搭建一个vue的脚手架

最新推荐文章于 2023-08-16 15:44:58 发布
最新推荐文章于 2023-08-16 15:44:58 发布
阅读量1.1k 收藏
点赞数
文章标签： webpack vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53260490/article/details/121956722
版权

先放教程，跟着做就ok，然后说一下坑，主要是在webpack.config.js里：

1.执行npm run dev会报错：把devServer这个对象注释掉就完了

2.警告：加一行：mode : 'development'

这是自己搭建的vue脚手架，基于webpack配置，可以打包，

前几天还自己写了一下CLI，本来可以做成像vuecli一样，

npm install lemon-cli -g下载下来

然后lemon init <templatename> <dir>初始化的

CLI的教程在这里

但是把自己写的垃圾玩意发布到npm上属实是有点污染环境，就没发布

读者有想要看的话，可以直接去gihub下载

正 义 人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用webpack搭建vue脚手架
m0_59537414的博客
12-04 341
使用webpack搭建vue脚手架，便于了解vue以及webpack
webpack搭建vue脚手架
Heartbroken_man的博客
08-31 2406
搞了几天的webpack5.0版本搭建vue脚手架项目，今天分享一下！ 在读这篇文章之前你可能需要了解一些webpack的配置才行 否则可能看不懂部分配置 首先我们的项目的src目录结构如下 基本上与vue-cli3的结构一样 ，你可以直接创建vue-cli3的脚手架直接复制里面的项目目录结构 新增命令行 在package.json文件里面的scripts字段里面新增这样一条命令，这样我们就可以在控制台输入npm run build执行webpack.config.js里面的配置 "bu
webpack搭建vue项目，实现脚手架功能
唐吉sir
03-14 279
webpack搭建vue项目，实现脚手架功能 本文基于node.js开发环境，安装完node之后新建项目，通过webpack配置，实现vue-cli脚手架功能 对于刚刚接触编程的人来说，最难的可能并不是学习一种新语法或者框架，而是编程思维，这种思维在调试的时候显得尤为重要，拥有良好的编程习惯和思维能力可以大幅度提高调试效率。而编程思维的培养往往需...
webpack构建Vue脚手架
Jacky的笔记
07-13 613
新建一个文件夹，在这个文件夹下安装依赖。基于 webpack 5 从零搭建 Vue 脚手架使用的依赖有：vue、element-ui、vue-router 开发依赖有：webpack、webpack-cli、vue-loader、vue-template-compiler、sass-loader、sass、css-loader、style-loader、babel-loader、@babel/core、@babel/preset-env有些暂时用不到，但是可以先一次性把他们安装进来。写页面需要index.h
webpack 搭建vue脚手架
weixin_53125679的博客
06-26 215
webpack 搭建vue脚手架 初始化项目 npm init -y 安装webpack 和webpack-cli npm i webpack webpack-cli --save-dev 解析 .vue 的文件(单文件组件)，安装 vue, vue-loader, vue-template-compiler 三个插件 npm i vue vue-loader vue-template-compiler --save-dev 项目根目录下创建src文件夹， 在里边创建一个main.j
基于webpack搭建vue2.0的脚手架项目
10-11
本篇文章将深入探讨如何基于Webpack搭建Vue 2.0的脚手架项目。 首先，让我们理解Vue 2.0的核心特性。Vue 2.0引入了虚拟DOM，提高了性能并降低了内存消耗。它支持单文件组件（Single File Components, SFCs），使得...
使用webpack搭建一个vue demo
01-08
但是vue官方却十分不推荐初学者直接使用脚手架，为了更好理解vue-cli工作原理，故我们使用webpack构建一个vue demo，能够编写基本的vue代码 一.目录结构 目录结构如下： 初始化为npm项目后，创建图示文件，文件夹 ...
使用webpack搭建vue项目实现脚手架功能
01-21
本文基于node.js开发环境，安装完node之后新建项目，通过webpack配置，实现vue-cli脚手架功能 对于刚刚接触编程的人来说，最难的可能并不是学习一种新语法或者框架，而是编程思维，这种思维在调试的时候显得尤为重要...
详解使用vue脚手架工具搭建vue-webpack项目
08-30
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以在服务器端运行 JavaScript。我们可以使用自带的终端 cmd 命令行工具或 Git Bash 安装 Node.js。 知识点 5: 安装 Vue-Cli 安装了 Node.js 环境后，...
webpack-demo：vue脚手架
02-09
首先，Vue CLI 自动为开发者配置了一个基于 Webpack 的项目结构。在解压的 "webpack-demo-master" 文件中，我们通常会看到以下几个关键文件和目录： 1. **package.json**：这是项目的配置文件，包含了项目信息、...
使用webpack搭建一个简单的vue脚手架
王金鑫的博客
08-17 252
生成package.json npm init 安装依赖 npm i webpack vue vue-loader css-loader vue-template-compiler 新建文件夹src，创建文件app.vue <template> <div class="text">{{text}}</div> </template> <script> export default { data(){ retur
搭建vue脚手架_webpack搭建vue脚手架
weixin_39657662的博客
12-13 58
1、先在本地安装webpack，我是按照教程来的https://jingyan.baidu.com/article/a65957f43f390524e77f9b4c.html用命令webpack -v 成功后直接出版本号；2、建立三个文件 index.html App.js main.js3、每个文件的截图index.htmlmain.jsApp.js遇到的两个bug：1、webpack打包时提示...
webpack搭建vue脚手架环境
weixin_65859689的博客
03-02 944
一、前端项目搭建 1. 建立好自己本地的项目目录 2. 初始化项目的环境 package.json使用的是npm init -y 作用是：依赖清单记录、启动命令、版本信息等，包管理器 3. 安装webpack -- npm i webpack -D （放在开发环境里） 1. 开发环境 -- npm run server --save-dev（--save-dev 缩写 -D ） 运行/生产环境 -- npm run build -S（-S可忽略不写） 2. 如果出现...
基于webpack，搭建Vue脚手架项目
Greenhand_BN的博客
05-12 535
由于长时间没用vue脚手架搭建项目，害怕自己忘了，于是有了这篇文章。虽然网上有很多，但是自己写写，也挺好 首先，node环境和脚手架是必须的！如果有小白，别问，问就是跟着操作。 node环境 官网下载：https://nodejs.org/en/download/ 无脑下一步就行了 终端（cmd或者vscode终端都可以，我用的git），输入下面代码，能看待版本号，说明成功（） node -v npm -v vue脚手架 安装方式：这里我用的 npm （淘宝镜像），网上有帖子用的 cnpm ，说是 c
webpack搭建vue脚手架（从零开始）
最新发布
自然 醒的博客
08-16 824
都会作为模块处理。在webpack4以及之前版本都需要借助file-loader和url-loader进行打包图片，而在webpack5版本中不需要了，只需要进行配置就可以了，不需要进行任何loader。就会生成一个index.html和bundle.js,这时，点开index.html就能看的Hello World了，但是css还不能生效，需要借助一些loader去加载静态资源。输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
Vue-Webpack简单脚手架搭建
八卦程序的专栏
08-20 1568
搭建简单的Vue脚手架 基本安装 mkdir vue-demo && cd vue-demo npm init -y cnpm install --save-dev webpack html-webpack-plugin clean-webpack-plugin webpack-dev-server cnpm install --save-dev babel-core babel-load
纯webpack搭建vue脚手架,单页面应用
weixin_46768011的博客
09-09 191
vue脚手架 说明 vue webpack 自定义脚手架 支持多进程打包 vue +webpack + vue-router + vux + less 源码地址 https://github.com/fzz14hao/vue-webpack-app 使用项目 git clone https://github.com/fzz14hao/vue-webpack-app.git 安装依赖 yarn install & npm install 开发模式 yarn run dev &
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值