VUE学习笔记_01_使用npm 创建vue项目

最新推荐文章于 2024-07-05 00:42:30 发布
最新推荐文章于 2024-07-05 00:42:30 发布
阅读量204 收藏
点赞数
分类专栏： vue 文章标签： vue javascript html5 vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23670719/article/details/105991269
版权

1 使用npm 创建vue项目

1.1 进入你想创建vue项目的文件位置，打开CMD

在当前位置直接在路径上输入cmd，回车
在这里插入图片描述
 在当前位置直接在路径上输入cmd，回车可以直接打开cmd，且初始的路径就是当前的位置

1.2 使用cmd命令初始化vue项目

  • 这里输入初始化vue项目的命令（前提是有安装npm和vue-cli）
  • vue init webpack 【项目名】
    在这里插入图片描述
  • 选择配置选项，这里初始化最简单的vue项目

在这里插入图片描述

  • 出现以下内容表示初始化vue项目成功

在这里插入图片描述

  • 在当前位置使用命令cd 【项目名】
  • 然后输入npm run dev即可启动项目

在这里插入图片描述

  • 默认启动的端口是8080，在浏览器输入http://localhost:8080/即可访问
    在这里插入图片描述

下一章：使用GitHub + VsCode管理代码

爱学习的小萌新
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
npm创建vue项目
qq_41425194的博客
07-01 5615
可通过官网下载：https://nodejs.org/en/创建一个自己的文件夹，在文件夹所创建的位置下，搜索cmd打开终端命令行输入命令：npm install -g @vue/cli1.输入命令 vue create demo01（vue create + 文件名）正在上传…重新上传取消 2.创建途中选择第一个即可3.在编译软件中通过cmd打开项目，系统命令行运行npm输入命令 npm run server...
创建npm vue项目
weixin_47243325的博客
09-03 891
创建npm vue项目 1.首先下载安装一个node.js 2.自己建一个目录文件，在所创建的文件下，搜索cmd打开黑色的框框 3.安装新的包,输入 npm install -g @vue/cli 4.输入 vue create +文件名 来建立html文件（创建途中选择第一个） 5.运行方式 在vscode所要运行的文件点击右键 打开之后再点击所要运行的文件，在搜索框输入cmd 打开黑色框之后输入 npm run serve 照片中的 http://localhost:8080/
使用npm建立vue工程
weixin_52548565的博客
11-18 3649
npm 建vue项目
『从零开始学vue』教你如何使用npm快速创建一个vue项目
最新发布
2401_84437604的博客
07-05 596
2.2切换下载源Tips：这里会遇到安装过慢的问题2.3下载CLI3.创建vue项目养成好习惯，在c盘意外的盘符下创建存放代码项目的文件，在cmd种更改一下文件的路径然后创建vue项目3.1创建vue项目然后就会进入这个界面进行项目的配置3.2手动选择界面通过上下键移动选择，enter选中选中进入手动选择界面选择BabelRouterVuex(空格键选中/取消)下一步选中 3.x的版本下一步选择路由方式（y或n选择y)并选择最后问你是否将这次配置保存为未来项目的预设，可以选择yes。
新手使用npm搭建第一个官方vue（vue-cli）项目---（一）
小梁的旅程
08-18 802
一、环境搭建 假设你已经通读vue官方文档（文档都没读一遍（至少），那不建议动手撸码），在大致了解vue是什么东西，有什么用，核心概念之后我们就可以开始着手学习vue。首先搭建环境。 学习vue，我的建议是通过官手脚手架起步。 >>>Installation $ npm install -g vue-cli >>>Usage $ vue init <template-name> <project-name> >>>Exam
【Vue学习笔记_14】Vue CLI 2&3 脚手架
weixin_44752429的博客
11-28 615
【Vue学习笔记_14】Vue CLI 2&3 脚手架Vue CLI 初识Vue CLI 2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析Vue CLI 3Vue CLI3与Vue CLI2的区别初始化项目目录结构解析Vue CLI3配置文件的查看和修改 配套可执行代码示例 => GitHub Vue CLI 初识 需求：使用Vue开发大型项目时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都要手动完
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue学习笔记 Vue是一个基于JavaScript的渐进式框架，用于构建用户界面。下面是关于Vue的学习笔记。 一、Vue基本知识 在Vue中，以点vue结尾的文件称为组件文件，包含三部分：template、script、style。template是...
vue3学习笔记，亲测有效，持续更新
06-14
在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite 进行初始化。Vite 是 Vue3 推荐的快速开发工具，它可以提供更快的热重载和模块按需编译。安装 Vite 后，你可以设置项目名称并按照提示进行操作。 项目的...
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
在安装 Vue Router 时，首先确保你已经使用 vue-cli 创建了一个项目。进入项目目录，例如 `my-demo1`，在终端中运行 `npm install vue-router --save` 命令。`--save` 参数会将 vue-router 添加到 `package.json` ...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
使用 NPM 安装Vue并创建项目
高建设的专栏
04-15 1310
一、下载node.js 官方下载地址：https://nodejs.org/en/download/ 选择相应版本安装 下载完成后一路next安装完成。 一般环境变量会自动添加，打开命令行测试是否安装成功 二、安装cnpm 使用下面命令安装淘宝镜像npm npm install -g cnpm --registry=https://registry.npm.taobao....
使用命令创建vue.js项目
xiejunna的博客
12-31 3880
前序：开发vue项目需要借助node环境，进行以下步骤时，要先装好node环境。 推荐使用淘宝镜像安装，速度比较快，可安装在c盘，命令是： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装模块时，使用 cnpm 命令来安装模块，例如：cnpm install [name]， 淘宝镜像安装好之后，安装安装webp
eclipse中怎么添加使用Vue前端页面
qq_45872297的博客
11-09 1932
如果你仍想使用Eclipse进行Vue.js开发，你可以安装适合前端开发的插件，如"Webclipse"或"Eclipse Wild Web Developer"，这些插件可以提供HTML，CSS，JavaScript, Node.js等的支持。在新创建的项目中添加你的Vue.js文件。你可以直接编写.vue文件，或者使用命令行工具（如Vue CLI）创建Vue.js项目，然后将生成的文件复制到Eclipse项目中。你可以使用Node.js的http-server，或者使用Eclipse内置的服务器。
eclipse安装vue全过程
热门推荐
weixin_42812176的博客
04-24 2万+
整个过程大概分两个部分： 1.安装node.js和npm 2.安装vue插件 一、首先安装node.js和npm 1.安装 直接在官网下载就可以，选择你所需要的版本，一般window选下面的这个就可以 点击下载的程序，点“next”进行安装， 注意可以根据自己的需要修改安装路径。然后一直next，直到install。安装完成finish 安装完成后，目录展示： 可以通过命令行验证是否安装成...
Vue初学之使用npm搭建Vue环境
小小默：进无止境
01-15 1万+
这里系统是windows，先安装node(新版的Node.js已自带npm)，然后使用npm安装vue，这里没有使用nvm。 【1】node安装 官网地址：https://nodejs.org/en/download/ 下载后傻瓜式安装即可，具体教程可以参考：node.js安装配置 默认会配置node和npm的环境变量： 安装后会自动提示如下，这里可以直接关闭窗口。 我们可以看到环境变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值