Vue项目搭建教程超详细

ops/2025/1/20 14:21:24/

目录

一. 环境准备

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.ppmy.cn/ops/151693.html

相关文章

基于springboot+vue的食物营养分析与推荐网站的设计与实现

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

智能新浪潮:亚马逊云科技发布Amazon Nova模型

在2024亚马逊云科技re:Invent全球大会上,亚马逊云科技宣布推出新一代基础模型Amazon Nova,其隶属于Amazon Bedrock,这些模型精准切入不同领域,解锁多元业务可能,为人工智能领域带来革新。 带你认识一起了解Amazon Nova…

防止 SQL 注入的技术文档

防止 SQL 注入的技术文档 概述 SQL 注入是一种常见的安全漏洞,攻击者通过构造恶意输入,操纵数据库查询,从而获取、篡改或删除数据。本文将详细介绍 SQL 注入的原理、危害以及如何在 Java 中有效防止 SQL 注入。 1. SQL 注入的原理与危害 1…

手摸手系列之 Java 通过 PDF 模板生成 PDF 功能

集团 SaaS 平台目前需要实现导出 PDF 格式的电子委托协议功能。业务方已经提供了一个现成的 PDF 文件作为参考。针对这一需求,我们有两个可行的方案: 完全代码生成:根据 PDF 文件的外观,完全通过代码动态生成 PDF 文件。模板填充…

PHP:写接口与接口的调用(完整版,封装公共方法)

说明:绑定的资源详细展示了两个项目的接口、接口调用的实现,已经数据库的连接,目录展示更加一目了然,有需要可以下载资源,实际文章已经描述的很详细了 一、A页面-发送请求页面 1、说明 发送请求部分,去调…

人脸识别【python-基于OpenCV】

1. 导入并显示图片 #导入模块 import cv2 as cv#读取图片 imgcv.imread(img/wx(1).jpg) #路径名为全英文,出现中文 图片加载失败,"D:\picture\wx.jpg" #显示图片 (显示标题,显示图片对象) cv.imshow(read_picture,im…

专业数据分析不止于Tableau,四款小众报表工具解析

在众多的报表工具中,市场上的常见报表工具如Tableau、Power BI等被广泛使用,但一些小众工具也提供了独特的功能和优势。以下是四款小众报表工具的介绍,它们各具特色,适合不同需求的用户,下面就为大家简单介绍一下。 1…

使用 Cargo 打开 Rust 世界的大门

一、什么是 Cargo? Cargo 是 Rust 开发者不可或缺的工具。它可以: 构建代码;下载并管理依赖库;简化项目初始化和配置。 对于一个简单的程序,比如 “Hello, world!”,你可能并不需要依赖库。但当你开始编…