Vue2学习（五）：使用Vue脚手架创建项目

已于 2024-02-17 23:11:56 修改
阅读量310 收藏 1
点赞数
分类专栏： Vue学习 文章标签： vue.js 学习
于 2023-05-20 22:54:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46175652/article/details/130781215
版权

Vue2学习（五）：使用Vue脚手架创建项目

1、查看脚手架版本

查看当前Vue脚手架的版本

在这里插入图片描述

执行过程中发现“vue不是内部或外部命令”，这时需要去配置下变量。

在这里插入图片描述

再次去执行命令，发现就可以了。

在这里插入图片描述

2、开始创建

以管理员身份运行命令指示符

在这里插入图片描述

进入到指定目录

在这里插入图片描述

执行命令进行创建

vue create 项目名

在这里插入图片描述

输入y，点击回车确认

在这里插入图片描述

点击回车确认

在这里插入图片描述

等待创建

在这里插入图片描述

创建完成

在这里插入图片描述

3、运行项目

进入项目

在这里插入图片描述

执行命令运行项目

npm run serve

在这里插入图片描述

在浏览器输入访问地址

在这里插入图片描述

阿标的博客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建vue2项目
A_61bo_的博客
05-11 469
创建vue2项目
创建一个vue2项目--vue create
shuyaohuang的博客
12-26 658
通过vue create创建一个vue2项目
2024年Web前端最全Vue脚手架搭建以及创建Vue项目流程_脚手架创建vue项目，Web前端技术类校招面试题汇总
最新发布
2401_84122782的博客
05-11 841
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】node_cache和node_global是后面创建的文件夹，后面有讲到，创建的位置，我在这里放到了node.js文件夹下，也可以自定义文件夹路径。
VUE 使用 vue create 命令 创建 vue2.0 项目
不想成为可以改变世界的程序员，不是一个好程序员
06-07 2万+
VUE 使用 vue create 命令 创建 vue2.0 项目 为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题，我们使用 管理员身份 打开命令行 g:表示切换进入G盘 cd git表示打开 当前盘下的 git 文件夹 大家可以根据以上两个命令进入自己想要保存项目的目录下，我这里是保存在 G:\Git 文件夹.........
【VUE】2、VUE-CREATE创建第一个VUE项目
热门推荐
Asurplus
04-02 7万+
VUE-CREATE创建第一个VUE项目
自选功能创建项目（vue2）
m0_73089846的博客
10-13 1026
vue2自选功能创建项目过程详解
基于脚手架创建Vue项目实现步骤详解
10-15
在想要创建项目的路径下，运行`vue create test`，其中`test`是你的项目名称。随后，CLI会询问你选择预设配置还是自定义配置。选择“default”则使用默认配置，包括Babel和ESLint；选择“Manually select features...
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config ...
vue脚手架vue-cli的学习使用教程
08-30
在使用Vue CLI创建项目时，项目结构如下所示： * `build`：项目构建相关代码，包括生产环境构建代码、检查node、npm等版本、热重载相关、构建本地服务器、构建工具相关等。 * `config`：项目开发环境配置，包括开发...
图文讲解用vue-cli脚手架创建vue项目步骤
10-17
本次小编给大家带来的是关于用vue-cli脚手架创建vue项目步骤讲解内容，有需要的朋友们可以学习下。
详解使用vue脚手架工具搭建vue-webpack项目
08-30
详解使用 Vue 脚手架工具搭建 Vue-Webpack 项目 知识点 1: Vue.js基础知识 在开始使用 Vue.js 前，我们需要了解 Vue.js 的基本概念。Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。其核心思想是将...
新建一个vue2项目
m0_55333789的博客
06-19 1842
６.这个选择的意思是要不要使用babel工具自动转换为ts代码注入polyiss（推荐： y）1.在你要创建项目的目录下打开终端输入vue create 【你的项目名称】8.选择预处理器（如： less,sass,stylus）12.可以将当前创建项目配置作为一个模板方便下次直接使用。5.是否使用calss风格的组件语法： (推荐：ｙ)13.至此，一个vue项目就创建完成了。在 vue.config.js 文件下配置。9.选择代码检测时的工具。3.根据自己的需求选择。
vue2项目建立
double_yellow的博客
03-15 240
这样npm install -g就会安装在D:\software\nvm\nodejs\node_global\node_modules中。npm install vue-cli -g和npm install -g @vue/cli-init有什么区别。下载的东西都在D:\software\nvm\nodejs\node_global\node_modules中。D:\software\nvm\nodejs\node_modules\vue-cli路径中。3-1.全局安装脚手架vue-cli。
前端_Vue_2.创建一个Vue应用、模板语法
三千幻想乡
12-07 1502
每个Vue应用都是通过createApp函数创建一个新的 应用实例 ： 1.2. 根组件 传入createApp的对象实际上是一个组件，每个应用（app）都需要一个“根组件”，其他组件将作为其子组件。如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。 虽然本文的许多示例只需要一个组件，但大多数真实的应用都是由一课嵌套的、可重用的组件树组成的。例如，一个代办事项（Todos）应用的组件树可能是这样的： 1.3. 挂载应用 应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容
VUE2 | 创建 VUE 项目
FSYML
07-16 251
VUE2 下通过脚手架创建项目
VUE2项目的搭建
H64646494的博客
01-20 543
搭建vue2项目时，需要确认电脑上是否有nodejs与npm如何确认电脑上是否存在npm与node呢？按住win+r输入cmd打开命令提示符输入node -v 与 npm -v来确认是否有安装。
基于 vue-cli 初始化 Vue2 模板的项目
weixin_66375317的博客
05-18 469
基于 vue-cli 初始化 Vue2 模板的项目
vue2项目搭建全步骤-超级详细
肥晨开发的学习之路
08-10 9118
出现以下界面，就是成功了12 ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序。
Vue2项目创建步骤
m0_67400396的博客
11-29 7997
创建项目时需要稍稍等待，创建完之后根据👉所示输入命令，命令输入完之后会给我们一个本地服务器的地址，讲地址复制到浏览器即完成了整个Vue2项目的创建。
Vue2项目使用脚手架创建
08-25
Vue2项目可以使用脚手架工具来创建，其中比较常用的脚手架工具是vue-cli。Vue脚手架工具对Vue项目的构建进行了封装，可以自动完成常用配置，而不需要像使用webpack一样手动配置。 下面是使用vue-cli创建Vue2项目的步骤： 1. 首先，确保你已经安装了Node.js和npm。 2. 打开终端，运行以下命令来安装vue-cli： ``` npm install -g @vue/cli ``` 这将全局安装最新版本的vue-cli工具。如果你之前已经安装了旧版本的vue-cli，可以先运行以下命令卸载旧版本： ``` npm uninstall -g vue-cli ``` 3. 安装完成后，可以通过以下命令来创建一个新的Vue项目： ``` vue create my-project ``` 其中，my-project是你的项目名称，可以根据需要进行修改。 4. 在创建项目时，vue-cli会询问你想要使用的特性和插件，你可以根据项目需求进行选择。也可以选择默认配置直接回车。 5. 创建完成后，进入项目目录： ``` cd my-project ``` 6. 运行以下命令启动开发服务器： ``` npm run serve ``` 这将启动一个本地开发服务器，并在浏览器中打开项目。你可以在开发过程中实时预览和调试你的Vue应用程序。 这样，你就成功创建了一个Vue2项目，并使用了脚手架工具vue-cli来简化项目的搭建过程。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VUE——使用VUE脚手架创建项目](https://blog.csdn.net/weixin_68567820/article/details/125379407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [基于脚手架创建Vue项目实现步骤详解](https://download.csdn.net/download/weixin_38550605/12924495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [使用vue-cli脚手架创建vue2项目](https://blog.csdn.net/qq_51284317/article/details/125647570)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值