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 desktopD:\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.rhkb.cn/news/3507.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IM聊天学习资源

文章目录 参考链接使用前端界面简单效果消息窗口平滑滚动至底部vue使用watch监听vuex中的变量变化 websocket握手认证ChatKeyCheckHandlerNettyChatServerNettyChatInitializer 参考链接 zzhua/netty-chat-web - 包括前后端 vue.js实现带表情评论功能前后端实现(仿…

彻底理解JVM类加载机制

文章目录 一、类加载器和双亲委派机制1.1、类加载器1.2、双亲委派机制1.3、自定义类加载器1.4、打破双亲委派机制 二、类的加载 图片来源:图灵学院   由上图可知,创建对象,执行其中的方法,在java层面,最重要的有获取…

使用FRP进行内网穿透

一、基本概念 内网穿透:它是一种网络技术或方法,旨在允许外部网络(如互联网)访问位于内部网络(内网)中的设备或服务。由于内部网络通常处于NAT(网络地址转换)、防火墙或其他安全机制…

Mysql常见问题处理集锦

Mysql常见问题处理集锦 root用户密码忘记,重置的操作(windows上的操作)MySQL报错:ERROR 1118 (42000): Row size too large. 或者 Row size too large (> 8126).场景:报错原因解决办法 详解行大小限制示例:内容来源于网…

《计算机网络》课后探研题书面报告_网际校验和算法

网际校验和算法 摘 要 本文旨在研究和实现网际校验和(Internet Checksum)算法。通过阅读《RFC 1071》文档理解该算法的工作原理,并使用编程语言实现网际校验和的计算过程。本项目将对不同类型的网络报文(包括ICMP、TCP、UDP等&a…

Python毕业设计选题:基于django+vue的智能租房系统的设计与实现

开发语言:Python框架:djangoPython版本:python3.7.7数据库:mysql 5.7数据库工具:Navicat11开发软件:PyCharm 系统展示 租客注册 添加租客界面 租客管理 房屋类型管理 房屋信息管理 系统管理 摘要 本文首…

联发科MTK6762/MT6762安卓核心板_4G智能模块应用

MT6762安卓核心板是一款工业级高性能、可运行 android9.0 操作系统的 4G智能模块。MT6762平台打造具备 AI 体验、先进双摄像头拍摄效果且具备丰富连接功能的智能手机主板。 MT6762安卓核心板 是一款髙性能低功耗的 4G 全网通安卓智能模块。此模块支持 2G/3G/4G 移动&#xff0c…

彩色图像面积计算一般方法及MATLAB实现

一、引言 在数字图像处理中,经常需要获取感兴趣区域的面积属性,下面给出图像处理的一般步骤。 1.读入的彩色图像 2.将彩色图像转化为灰度图像 3.灰度图像转化为二值图像 4.区域标记 5.对每个区域的面积进行计算和显示 二、程序代码 %面积计算 cle…

重拾Python学习,先从把python删除开始。。。

自己折腾就是不行啊,屡战屡败,最近终于找到前辈教我 第一步 删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder,跟matlab最像,也最容易入手。 从VScode上搞python,最后安装到appdata上,安装插…

Redis系列之底层数据结构字典Dict

Redis系列之底层数据结构字典Dict Dict数据结构 Dict是Redis数据结构中使用最为频繁的复合型数据结构,本质上是一个哈希表 查看redis6.0版本的源码,链接:https://github.com/redis/redis/blob/6.0/src/dict.h 哈希表的结构定义&#xff1…

《贪心算法:原理剖析与典型例题精解》

必刷的贪心算法典型例题! 算法竞赛(蓝桥杯)贪心算法1——数塔问题-CSDN博客 算法竞赛(蓝桥杯)贪心算法2——需要安排几位师傅加工零件-CSDN博客 算法(蓝桥杯)贪心算法3——二维数组排序与贪心算…

基于 Python 的深度学习的车俩特征分析系统,附源码

博主介绍:✌stormjun、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…

VSCode 的部署

一、VSCode部署 (1)、简介 vsCode 全称 Visual Studio Code,是微软出的一款轻量级代码编辑器,免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、版本管理GIT等特性&…

【开源免费】基于SpringBoot+Vue.JS欢迪迈手机商城(JAVA毕业设计)

本文项目编号 T 141 ,文末自助获取源码 \color{red}{T141,文末自助获取源码} T141,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

Transformer创新模型!Transformer+BO-SVR多变量回归预测,添加气泡图、散点密度图(Matlab)

Transformer创新模型!TransformerBO-SVR多变量回归预测,添加气泡图、散点密度图(Matlab) 目录 Transformer创新模型!TransformerBO-SVR多变量回归预测,添加气泡图、散点密度图(Matlab&#xff0…

Nmap之企业漏洞扫描(Enterprise Vulnerability Scanning for Nmap)

简介 Namp是一个开源的网络连接端扫描软件,主要用于网络发现和安全审核。‌它可以帮助用户识别网络上的设备、分析它们的服务、检测操作系统类型,甚至发现潜在的安全漏洞。Nmap由Fyodor开发,最初是为了满足网络管理员的需求,但随…

windows下安装并使用node.js

一、下载Node.js 选择对应你系统的Node.js版本下载 Node.js官网下载地址 Node.js中文网下载地址??? 这里我选择的是Windows64位系统的Node.js20.18.0(LTS长期支持版本)版本的.msi安装包程序 官网下载: 中文网下载: 二、安…

Ability Kit-程序框架服务(类似Android Activity)

文章目录 Ability Kit(程序框架服务)简介Stage模型开发概述Stage模型应用组件应用/组件级配置UIAbility组件概述概述声明配置 生命周期概述生命周期状态说明Create状态WindowStageCreate**和**WindowStageDestroy状态WindowStageWillDestroy状态Foregrou…

Redis超详细入门教程(基础篇)

目录 一、什么是Redis 二、安装Redis 1、Windows系统安装 2、Linux系统安装 三、Redis通用命令 四、Redis基本命令 五、五种数据结构类型 5.1、String类型 5.2、List集合类型 5.3、Set集合类型 5.4、Hash集合类型 5.5、Zset有序集合类型 六、总结 一、什么是Redi…

黑马Java面试教程_P1_导学与准备篇

系列博客目录 文章目录 系列博客目录导学Why?举例 准备篇企业是如何筛选简历的(筛选简历的规则)HR如何筛选简历部门负责人筛选简历 简历注意事项简历整体结构个人技能该如何描述项目该如何描述 应届生该如何找到合适的练手项目项目来源找到项目后,如何深入学习项目…