从0到1开始搭建vue开发环境

最新推荐文章于 2024-05-16 17:54:12 发布
最新推荐文章于 2024-05-16 17:54:12 发布
阅读量805 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylb1213/article/details/82833518
版权
本文详细介绍了如何从零开始搭建Vue开发环境，包括安装nodejs、创建package.json、安装webpack和webpack-cli、配置webpack、建立src目录和index.js、添加npm脚本、安装html-webpack-plugin、配置Vue开发环境等步骤，最终实现通过npm run build命令生成dist目录及打包后的js文件，并能在浏览器中查看。
摘要由CSDN通过智能技术生成

1、安装nodejs环境

2、切换到vue项目的根目录

3、执行npm init,按着提示输入以下配置：

之后，在项目根目录下面会生成package.json文件。

4、安装webpack,webpack-cli : npm install --save-dev webpack webpack-cli，成功后，在package.json中会增加以下内容：

5、执行webpack init 命令,如有

等再次出现命令提示时，再次输入 webpack init ,按提示输入：

最低0.47元/天 解锁文章
ylb1213
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
从零开始搭建一个基于Webpack的Vue开发环境
08-12
从零开始搭建一个基于Webpack的Vue开发环境
从零开始搭建VUE项目
weixin_30386713的博客
10-19 198
前言： 此样板面向大型，严肃的项目，并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工作流配方的文档。 如果您只想尝试vue-loader或者鞭打一个快速原型，请改用webpack-simple模板。 快速开始： 要使用这个模板，可以用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树： ...
如何搭建一个vue项目(完整步骤)
最新发布
y2020520的博客
05-16 7528
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。
Vue从0到1快速搭建
m0_73505556的博客
01-04 1137
vue从0到1快速搭建
Intellij IDEA搭建vue-cli项目
weixin_30549657的博客
01-28 217
1、安装/升级node环境 vue-cli对于node和npm的版本是有要求的。 可以通过 node -v （npm -v）查看当前版本，通过 where node （where npm）查看安装路径。 如果node版本不符合vue-cli的要求，那么可以在node官网下载稳定版本并安装。 安装过程比较简单，我更新时，...
Vue项目从0到1完整开发
weixin_44785498的博客
11-26 997
Vue项目从0到1完整开发 1 项目准备 npm install -g @vue/cli // 安装 vue 脚手架 vue create my-vue // 创建 vue 项目，可选配置路由、vuex等 cd my-vue // 进入项目文件夹 yarn serve // 启动项目 若使用 eslint+prettier 进行代码格式校验，当因为报错 'xxxxx' is defined but never used 而不能正常渲染的时候，可以在项目根目录下 .eslintr
详解如何从零开始搭建Express+Vue开发环境
10-18
【Express+Vue开发环境搭建详解】 在现代Web开发中，集成前后端框架能够极大地提高开发效率和项目的可维护性。本文将详细介绍如何从零开始搭建一个基于Express（Node.js的Web应用框架）和Vue（渐进式JavaScript框架...
搭建vue开发环境.docx
08-18
在开始搭建 Vue 开发环境之前，我们需要安装一些必要的工具。首先，我们需要安装 Node.js。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，能够使 JavaScript 运行在服务器端。我们可以从 Node.js 的...
搭建vue开发环境
12-09
本文将详细介绍如何搭建Vue的开发环境，以便开始你的Vue项目。 一、安装Node.js Vue.js的开发依赖于Node.js环境，因此第一步是下载并安装Node.js。访问Node.js官方网站(https://nodejs.org/)，根据你的操作系统选择...
使用vue-cli+webpack搭建vue开发环境的方法
08-28
使用vue-cli+webpack搭建vue开发环境的方法 从今天开始，我们将学习如何使用vue-cli和webpack搭建一个Vue开发环境。这个方法将指导您从头开始搭建一个完整的Vue开发环境。 什么是Vue-cli？ Vue-cli是一个命令行...
VUE 从0到1的过程
空白的竹筒
10-17 509
目标：从无到有开始学习VUE创建一个最简单的VUE例子创建一个最简单的html页面最简单的调用VUE的方式添加vue的js引用创建dom对象抽象成js组件渲染页面Vue的调用过程，图示进阶一下，Vue结构化webpack安装 创建一个最简单的VUE例子 记录一下学习的东西 创建一个最简单的html页面 创建一个空的文件夹，我一般用tomcat作为服务器，所以在webapp中建立文件夹。 1.mkd...
整理 Vue 项目 从 0 到 1 搭建
Mr.小灰狼_随笔
12-14 4898
​整理 Vue 项目 从 0 到 1 搭建 目录 1、开发项目流程 2、开发环境 3、初始化项目 图形界面 UI创建项目 4、ElmentUI安装与配置 5、网络请求 6、富文本编辑器 7、Vue 中的 @ 符 提示 文件配置 8、自动化 导入 路由 配置 文件 : 9、自动化 导入 Vuex 模块化配置 文件 : 10、项目目录层级 11、项目环境配置
vue从0到1搭建新项目！
有猿无分的博客
04-16 414
1. 先安装node.js 完了之后查看node是否安装成功 node -v //查看node版本 npm -v //查看npm版本 2.安装vue之前，建议把cnpm 进行安装，这个是淘宝对npm镜像,npm服务在国外，如果通过npm安装过程较慢 npm install -g cnpm --registry=https://registry.npm.taobao.org 有的公司会出现npm代理问题，解决如下 npm config set proxy http://username:p..
搭建VUE从零到一
Ningmengmanong的博客
08-30 644
记录工作中如何搭建一个vue项目的步骤整理 一.安装node环境 1.官网下载node,下载地址为https://nodejs.org/en/ 2.右键打开命令窗，输入node -v 查看node版本以及查询是否安装成功，结果如果出现版本号，则表示安装node环境成功。 3.补充一点：npm安装由于受网络等各种因素影响，会比较慢，所以我们需要再安装一下cnpm(淘宝镜像)来进行提高效率。 淘宝的镜像：http://npm.taobao.org/ 命令框中输入 npminstall -g cn...
第一个vue项目——从0到1构建vue（一）
weixin_30706691的博客
07-20 198
入职学霸君三周，我的第一个大需求，世界杯活动历时两周，刚刚终于上线。这是我第一个实践中的vue项目，也磕磕绊绊的完成了从react的转变。以此为记。 首先记录下菜鸟的学习过程： （1）看个大概 因为每个活动代码相对独立，我先大致看了一遍几个之前的vue项目，从项目目录结构开始，到样式引用，接口调用方法，页面构建方法，对有用的一些api什么的有个大致的印象； （2）了解VUE 带着一点懵懂...
vue从0到1（基础篇）
qq_41861216的博客
01-15 421
从0到1学一遍vue，这边记录本人学习vue的过程。
vue从0到1(配置环境+项目创建)
weixin_46129207的博客
09-25 583
首先安装node.js node.js安装:https://nodejs.org/en/download/ 下载并安装 安装完成,并且验证 node -v npm -v 此处说明下：新版的Node.js已自带npm，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西 将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在安装的文件夹下创建两个文件夹【node_global】及【node_cac
Vue项目从零开始搭建
qq_38229263的博客
02-22 4944
一.准备环境 第一步 安装node.js根据实际操作系统选择安装包 下载地址：https://nodejs.org/en/download/ Cmd命令行输入 node –v检测安装是否成功 第二步 npm设置 大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 npm install -g cnpm --registry=https://registry.npm.taobao.org Cmd命令行输入 npm –v检测安装是否成功 第三步 安装web
从0到1创建一个Vue项目
linyin_666的博客
03-15 2603
创建前先了解几个知识点： node.js Node是一个让JavaScript运行在服务端的开发平台，使用JavaScript也可以开发后台服务，说明白就是它仅仅是一个平台，我们使用Vue开发必须要安装Node.js。 npm npm是Node.js官方提供的包管理工具，它已经成了Node.js包的标准发布平台，用于Node.js包的发布、传播、依赖控制。npm提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。我们可以直接...
vite从0开始搭建vue3开发环境
06-01
要使用 Vite 从零开始搭建 Vue 3 开发环境，你需要按照以下步骤进行操作： 1. 首先，安装 Node.js 和 npm。你可以从 Node.js 官网下载最新版本的 Node.js。 2. 在你的项目文件夹中，使用以下命令初始化一个新的 npm 项目： ``` npm init -y ``` 3. 安装 Vite 和 Vue 3： ``` npm install vite vue@next --save-dev ``` 4. 在项目文件夹中创建一个名为 `index.html` 的文件，并将以下代码添加到文件中： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue 3 Vite Demo</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html> ``` 5. 在项目文件夹中创建一个名为 `src` 的文件夹，并在其中创建一个名为 `main.js` 的文件。将以下代码添加到文件中： ```js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.mount('#app'); ``` 6. 在 `src` 文件夹中创建一个名为 `App.vue` 的文件，并将以下代码添加到文件中： ```html <template> <div> <h1>Hello, {{ name }}!</h1> <p>This is a Vue 3 Vite demo.</p> </div> </template> <script> export default { name: 'App', data() { return { name: 'World', }; }, }; </script> ``` 7. 在终端中使用以下命令启动 Vite： ``` npx vite ``` 8. 在浏览器中打开 http://localhost:3000，你应该能够看到一个显示 "Hello, World!" 的页面。 现在你的 Vue 3 Vite 开发环境已经准备好了！你可以在 `App.vue` 中添加更多的 Vue 3 代码，并在浏览器中实时查看结果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值