当前位置: 首页 > article >正文

Vue项目搭建教程超详细

目录

一. 环境准备

1. 安装node.js

2. 安装Vue cli

二. 创建 Vue 2 项目 

1. 命令行方式

2. vue ui方式


一. 环境准备

1. 安装node.js

可参考node.js卸载与安装超详细教程-CSDN博客

2. 安装Vue cli

npm install -g @vue/cli

检查是否安装成功

vue --version 

Vue CLI 5.0.8 支持创建不同版本的 Vue 项目,包括 Vue 2 和 Vue 3。

二. 创建 Vue 2 项目 

1. 命令行方式

在合适的位置,创建vue的工作目录,我选择的是D盘下的desktop

C:\WINDOWS\System32>d:

D:\>cd desktop

D:\desktop>mkdir Vue-workspace   //创建工作目录

D:\desktop>cd Vue-workspace

使用以下命令创建vue项目

vue create 项目名

在创建过程中,你会被提示选择 Vue 版本。选择 Vue 2 选项,如下所示:

根据自己的情况,选择合适的版本,我选的的是vue2

项目创建完成后,你可以进入项目目录并启动开发服务器:

cd hello-world
npm run serve

 

在浏览器输入localhost:8081:

 脚手架创建成功!

停止服务

两下Ctrl+C 或者Ctrl+C一下然后Y

2. vue ui方式

2.1 进入vue资源管理器界面(vue ui界面)

2.2 创建项目

2.3 配置信息:

点击下一步

2.4 选择预设,或者自定义

然后下一步完成创建

2.5 启动运行项目

按步骤来:任务>serve>运行>启动

 以上就是搭建vue脚手架的两种方式。


http://www.kler.cn/a/509271.html

相关文章:

  • SimpleHelp远程管理软件存在任意文件读取漏洞(CVE-2024-57727)
  • C语言进阶习题【1】指针和数组(3)——一维指针指向字符数组首元素地址
  • 谷歌宣布没 JavaScript 将无法启动搜索,居然引起了轩然大波
  • Formality:参考设计/实现设计以及顶层设计
  • CSS:语法、样式表、选择器
  • Python GUI Pyside6 实例笔记
  • PyTest自学 - 将多个用例组织在一个类中
  • WebSocket有哪些缺点?应该如何解决?
  • IoTDB 常见问题 QA 第四期
  • Inception 网络:开启多尺度卷积的图像识别新时代
  • LLMs(大型语言模型)的多智能体:Auto-GPT
  • 如何在服务器同一个端口下根据路径区分不同的应用
  • 使用docker部署tomcat服务器和mysql数据库
  • WildFly与tomcat的异同
  • MySQL触发器:概念、作用
  • 图解Git——远程分支《Pro Git》
  • PHP 8.4 安装和升级指南
  • 海康威视摄像头RTSP使用nginx推流到服务器直播教程
  • Unity HybridCLR Settings热更设置
  • 【BUUCTF】[NCTF2019]SQLi
  • 【PCL】sample_consensus 模块—— Random Sample Consensus model(随机样本一致性模型,RANSAC)
  • C 语言的void*到底是什么?
  • VScode运行NPM脚本时出现“终端将被任务重用,按任意键关闭”?亲测有效解决方法
  • PHP加密确保通信安全
  • Jenkins-基于Role的鉴权机制
  • C++中string笔记杂谈