Vue脚手架使用【快速入门】

最新推荐文章于 2025-04-25 17:35:01 发布
最新推荐文章于 2025-04-25 17:35:01 发布
阅读量356 收藏 1
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_77444674/article/details/131641948
版权
本文介绍了如何使用vue脚手架创建工程，并通过npm命令行工具安装elementui和axios。同时，讨论了使用Vscode、Webstorm或idea等工具打开vue工程的方法，以及启动项目时的注意事项，如检查node路径。

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

一、使用vue脚手架创建工程

在黑窗口中输入vue ui命令
在这里插入图片描述
再更改完路径地址后需要按回车
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、vue工程中安装elementui

第一种可以在黑窗口输入命令安装

npm install -s element-ui

第二种使用图形化安装

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

三、 在vue工程中安装axios

第一种可以在黑窗口输入命令安装

npm install -s axios

第二种使用图形化安装

在这里插入图片描述

在这里插入图片描述

四、通过工具打开vue工程

<1> Vscode [必须用vscode]

<2> Webstorm [它和idea一模一样]

<3> idea打开—安装vue插件

在这里插入图片描述
在这里插入图片描述
输入命令

npm run serve

启动成功

在这里插入图片描述
如果不能启动可以检查node路径
在这里插入图片描述
每个文件夹功能简介
在这里插入图片描述

前端vue入门(纯代码)04---全网最详细的Vue脚手架入门
m0_62003092的博客
06-08 617
Ctrl + C或 Ctrl +shift + C【以管理员的方式运行】Vue CLI叫做脚手架。，翻译为命令行接口工具，俗称脚手架。:创建Vue项目:运行该Vue项目。
3.Vue从入门到精通 （第三章 使用Vue脚手架）
cjhxydream的博客
07-21 1578
Vue从入门到精通 第三章 使用Vue脚手架
Vue脚手架入门基础
dyr_080508的博客
03-31 3098
Vue脚手架入门
vue ui 的使用以及配置完整的脚手架
最新发布
RR1335 之代码才是动力源
04-25 245
src / router ： vue 的路由。— public ： 静态文件 ，如： 图片等。— src ： 源代码。直接按照配置完成配置。配置结束后，会提示。
初学者搭建Vue脚手架工程
Mcally的博客
10-15 438
初学者搭建Vue脚手架工程 1.在前端的知识海洋里，各种前端框架自动化测试满天飞，正如在当下想不被淘汰，那只有不断的去学习心得知识，所以就有了今天的一次学习vue搭建脚手架的记录。 2.第一步:搭建vue工程项目，传送门地址送给你:https://cli.vuejs.org/zh/ 此是官方的地址，各种文档甚是详细望大伙们观摩学习，早日脱凡入圣 3. 第二步:要搭建vue脚手架工程项目,首先的需要安装node.js二话不说送上传送门根据自己电脑系统和配置进行下载：https://nodejs.org/en
vue-cli（vue脚手架）入门
qq_55917018的博客
12-25 312
vue-cli（vue脚手架）入门加npm简单入门指令
Vue脚手架的入门基础（一）—— 脚手架搭建
Biu_Destiny的博客
09-08 475
Vue脚手架的入门基础（一）—— 脚手架搭建0.前言1.命令安装 VueCLI2.创建Vue脚手架项目3.运行Vue脚手架项目 0.前言 1.Vue脚手架就是我们说的Vue CLI （command line interface 命令行接口工具） 2. 1.命令安装 VueCLI 首先默认已经有node环境了，这里提供两条语句下载： # yarn 下载 yarn global add @vue/cli # npm 下载 npm install -g @vue/cli 注意，执行npm时候可能会报警告不用在
前端开发：基于Node.js环境下的Vue脚手架安装与入门配置详解
03-07
内容概要：本文档详细讲述了Vue脚手架(Vue CLI)的基础知识及其实现步骤。首先介绍了确保npm工具正常使用的方法，即通过正确安装并验证Node.js。其次，对Vue CLI做了深入剖析，包括安装流程及其功能特性介绍，比如...
vue脚手架项目入门demo（vue2）
08-28
在“vue脚手架项目入门demo（vue2）”中，我们将探讨如何使用Vue CLI搭建Vue2项目，并了解相关的核心概念和技术。 首先，让我们了解Vue CLI。Vue CLI提供了一套快速初始化项目模板的命令，包括基本的项目结构、配置...
Vue脚手架与vue-router快速入门
Vue.js 是一款流行的前端框架，用于构建用户界面。Vue CLI（命令行接口）是一个官方提供的脚手架工具，简化了 Vue 项目的初始化和构建...理解并熟练运用这些工具和概念，能帮助开发者快速搭建和维护高质量的 Vue 项目。
Vue——脚手架快速入门（六）
每天一个前端小知识~
12-08 613
一、什么是Vue脚手架 Vue脚手架用于快速生成Vue项目基础架构 官方网址为：https://cli.vuejs.org/zh/ 二、Vue脚手架的安装 1.检查是否安装node.js 没有安装的话，详情参考 node.js的安装教程 2.使用国际开源库生态系统安装脚手架 npm install -g vue-cli 因为数据源在国外，很容易出现下面这个问题 rollbackFailedOptional: verb npm-session 这个问题不是报错，而是 npm 要安装的源在国外，简单理解
基于Vue和ElementUI的后台管理系统基础脚手架
08-12
基于Vue和ElementUI的后台管理系统基础脚手架 使用了vue-router 和 vuex ajax请求使用的axios 提供最基本的脚手架服务
Vue入门（四）——脚手架
qq_44334291的博客
07-16 184
这篇博客来说一下，提了很久的脚手架吧，其实吧，在没接触的时候，我也觉得脚手架好厉害的样子，其实就是帮助我们自动配置一些复杂的、常用的一些配置。它能够帮助我们快速构建vue开发环境和对应的webpack配置。但是我们需要注意的一个点：脚手架的使用前提，前面的博客都说过了，这里就不说了。 安装的时候我们会选择一些东西，下面我以脚手架2为例： 下面是脚手架3的介绍： 下面来说一下Vue的运行过程： 下面展示一下render的函数 ...
vue脚手架搭建入门精通
weixin_39656626的博客
11-13 218
文章目录安装node.js安装vue-clivue( 脚手架)初始化项目搭建目录结构 安装node.js 下载地址: https://nodejs.org/en/download/ 与win下安装exe程序一样，一路点next就行 安装vue-cli #cmd窗口执行 # 全局安装 vue-cli $ npm install --global vue-cli vue( 脚手架)初始化项目搭建...
Vue 组件库 Element 脚手架 入门教程
热门推荐
JAVA_HIGHNESS的专栏
03-26 10万+
前提是安装了nodejs（6.0+），npm 验证安装成功 node –version npm –version Element官网地址： http://element-cn.eleme.io/#/zh-CNElement 脚手架 代码git地址： https://github.com/ElementUI/element-starter.gitgit clone下来后，进入elem
vue 2.0入门 之 脚手架 vue-cli
写代码的女生酷不酷
04-02 611
关于脚手架vue-cli  首先，vue 是在node 环境下 并且是使用es5语法特性编写的语言。所以，当我们创建一个vue项目的时候，首先要为他安装一个node环境。 windows 安装链接https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html 其次，vue-cli 脚手架 是一个生成vue项目的工具 。通俗
Vue入门及脚手架搭建
m0_56383660的博客
02-24 445
跟着青戈戈做毕设
Vue开发项目入门——Vue脚手架
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
vue 脚手架新手入门（vue cli 2）
这里的分享，都是干货
05-11 1239
适合没学过vue脚手架的朋友，包含了从vue项目的创建到接口的调用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值