创建vue项目:vue脚手架安装、vue-cli安装,vue ui界面创建vue工程(vue2/vue3),安装vue、搭建vue项目开发环境(保姆级教程二)

今天讲解 Windows 如何利用脚手架创建 vue 工程,以及 vue ui 图形化界面搭建 vue 开发环境,这是这个系列的第二章,有什么问题请留言,请点赞收藏!!!

文章目录

      • 1、安装vue-cli脚手架
      • 2、vue ui创建vue项目
        • 2.1 自定义创建路径
        • 2.2 界面创建步骤
        • 2.4 创建过程中可能会遇到的问题
      • 3、vue项目目录结构

提示: 在学习下面内容时,请确保自己电脑上已经搭建好 node 环境,以及熟悉 npm 命令行。如果没有,请点击下面链接第一章:
第一章链接引入:node 下载安装配置,搭建 node 环境
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1、安装vue-cli脚手架

使用 npm 安装 vue-cli 脚手架(脚手架:是一个基于 Vue.js 进行前端快速开发的脚手架(框架),注意必须在全局中进行安装):

1、安装 vue3 的脚手架:npm install @vue/cli -g

vue2 的脚手架为:npm install vue-cli -g

2、检查是否安装成功:vue -V

安装到这里,可以查看一下全局安装了哪些东西:npm list -global
在这里插入图片描述

2、vue ui创建vue项目

安装脚手架后,可以在终端中启动 vue 可视化界面,并在里面创建 vue 项目。

2.1 自定义创建路径

进来之后,就可以创建了,vue-cli 创建项目时如何自定义路径,有两种方式:

① cmd 先输入盘符,切换到相应的磁盘,然后输入命令:cd 目标文件夹路径,回车即可。
再输入命令:vue ui,回车即可完成项目路径的自定义。

② 直接输入 vue ui 进入后修改,修改后一定记得回车,否则将不会生效

2.2 界面创建步骤

1、输入项目初始信息

2、预设

3、功能

在这里插入图片描述

4、最后一步

在这里插入图片描述

创建后将功能和配置保存为一套新的预设,预设将会被保存到 C:\Users\编号\.vuerc中。等待项目创建完成(首次创建较慢),完成后会出现提示窗口。

2.4 创建过程中可能会遇到的问题

报错: 创建过程中报错: Error: command failed: npm install --loglevel error --legacy-peer-deps

解决:

方式一(推荐):修改上面配置目录的两个文件的权限(node_global、node_cache):

方式二:cmd 以管理员身份打开,输出 vue ui 进入,然后再创建。(注意:这样不能在界面中自定义路径,只能在cmd窗口中进入目标路径后再 vue ui)

3、vue项目目录结构

node_modules  所有在package.json中定义的第三方包都会被自动下载,保存在该文件夹下。public 静态目录,存放项目公共资源。如网站LOGOsrc   存放 vue 项目的源代码api   专门存放异步请求assets  资源文件,存放 css,图片等资源components 全局组件layoutstorerouter  用来配置路由,定义各个页面对应的URLviews   页面的放置位置App.vue  是项目的主组件页面,所有页面都是在该组件下进行切换的。main.ts或者为main.js......
...
package.json  存放项目的依赖配置
...

router 路由:页面需要跳转,就在这设置

在这里插入图片描述

至此,本教程结束。后续讲解如何给上面创建的工程添加一些依赖、插件!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/215471.html

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

相关文章

智能优化算法应用:基于斑马算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于斑马算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于斑马算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.斑马算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

R语言,table()函数实现统计每个元素出现的频数+并将最终统计频数结果转换成dataframe数据框形式

在 R中,要统计dataframe数据框中每个元素出现的频数,可以使用table()函数。以下是一个示例: 目录 一、创建数据 二、统计第一列每个元素出现的频数 三、统计第二列每个元素出现的频数 四、将频数结果转换为数据框,并改列名 一…

ambari hive on Tez引擎一直卡住

hive on tez使用./bin/hive启动后一直卡住,无法进入命令行 使用TEZ作为Hive默认执行引擎时,需要在调用Hive CLI的时候启动YARN应用,预分配资源,这需要花一些时间,而使用MapReduce作为执行引擎时是在执行语句的时候才会…

人工智能_机器学习063_SVR支持向量机_回归拟合天猫双十一销量方程---人工智能工作笔记0103

之前我们用线性回归做过天猫双十一销量预测的数据,现在我们再来用SVR支持向量机来做一下 首先上面是给出了销量,对应2009年到2019年的,销售额 可以看到: X=np.arange(2009,2020)-2008 统一减去2008的话看起来数据比较简单了 y=np.array([0.5,9.36,52,191,350,571,912,1207,1…

题目:快速幂(蓝桥OJ 1514)

题目描述&#xff1a; 解题思路&#xff1a; 使用快速幂模板&#xff08;倍增思想&#xff09;。 题解&#xff1a; #include<bits/stdc.h> using namespace std; using ll long long;ll ksm(ll a, ll b, ll c)//注意&#xff1a;需要取模的地方都取模c&#xff0c;且…

使用 Kubernetes 为 CI/CD 流水线打造高效可靠的临时环境

介绍 在不断发展的科技世界中&#xff0c;快速构建高质量的软件至关重要。在真实环境中测试应用程序是及早发现和修复错误的关键。但是&#xff0c;在真实环境中设置 CI/CD 流水线进行测试可能既棘手又昂贵。 Kubernetes 是一个流行的容器编排平台&#xff0c;提供临时环境解决…

【STM32】蓝牙氛围灯

Docs 一、项目搭建和开发流程 一、项目需求和产品定义 1.需求梳理和产品定义 一般由甲方公司提出&#xff0c;或由本公司市场部提出 需求的重点是&#xff1a;这个产品究竟应该做成什么样&#xff1f;有哪些功能&#xff1f;具体要求和参数怎样&#xff1f;此外还要考虑售价…

【postgresql】ERROR: INSERT has more expressions than target columns

执行下面sql insert into apply_account_cancellation3 select * from pply_account_cancellation; 返回下面错误信息 insert into apply_account_cancellation3 select * from apply_account_cancellation > ERROR: INSERT has more expressions than target colu…

如何将 MySQL 数据库转换为 SQL Server

本文解释了为什么组织希望将其 MySQL 数据库转换为 Microsoft SQL 数据库。本文接着详细介绍了尝试转换之前需要记住的事项以及所涉及的方法。专业的数据库转换器工具将帮助您快速将 MySQL 数据库记录转换为 MS SQL Server。 在继续之前&#xff0c;我们先讨论一下 MySQL 到 M…

新能源汽车生产污废水需要哪些工艺及设备

新能源汽车的快速发展带来了许多环境问题&#xff0c;其中之一就是生产过程中产生的污废水。由于新能源汽车的生产过程与传统汽车有所不同&#xff0c;因此需要采用特定的工艺和设备来处理和处理这些废水。 首先&#xff0c;新能源汽车生产过程中产生的污废水主要来自洗涤和冷却…

游戏中小地图的制作__unity基础开发教程

小地图的制作 Icon标识制作制作摄像机映射创建地图UI效果“不一样的效果” 在游戏中经常可以看到地图视角的存在&#xff0c;那么地图视角是如何让实现的呢&#xff1f; 这一期教大家制作一个简易的小地图。 &#x1f496;点关注&#xff0c;不迷路。 老样子&#xff0c;我们还…

C++ Qt开发:LineEdit单行输入组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍LineEdit单行输入框组件的常用方法及灵活运用…

【NR技术】NR NG-RAN整体架构 -功能划分(三)

1 概述 NG-RAN节点包括: gNB&#xff0c;向终端提供NR用户平面和控制平面协议终端;ng-eNB&#xff0c;向终端提供E-UTRA用户平面和控制平面的协议终端。gNB和ng- eNB通过Xn接口相互连接。gnb和NG- eNB也通过NG接口连接到5GC&#xff0c;更具体地说&#xff0c;通过NG-C接口连…

深入浅出:HTTPS单向与双向认证及证书解析20231208

介绍: 网络安全的核心之一是了解和实施HTTPS认证。本文将探讨HTTPS单向认证和双向认证的区别&#xff0c;以及SSL证书和CA证书在这些过程中的作用&#xff0c;并通过Nginx配置实例具体说明。 第一部分&#xff1a;HTTPS单向认证 定义及工作原理&#xff1a;HTTPS单向认证是一…

网络游戏APP备案|游戏

网络游戏APP备案|游戏 网络游戏备案分析需要备案原因&#xff08;个人看法&#xff09;对小公司对大公司 总结 网络游戏备案分析 相信做网络游戏的伙伴们在23年都收到了各个平台的公告&#xff0c;网络游戏需要进行APP的备案。也就是说网路游戏现在安卓平台也不是你想上架测试…

2024年甘肃省职业院校技能大赛信息安全管理与评估赛项一阶段样题一

2024年甘肃省职业院校技能大赛高职学生组电子与信息大类信息安全管理与评估赛项样题一 竞赛需要完成三个阶段的任务&#xff0c;分别完成三个模块&#xff0c;总分共计 1000分。三个模块内容和分值分别是&#xff1a; 1.第一阶段&#xff1a;模块一 网络平台搭建与设备安全防…

python——第十七天

方法重写(overwrite) 、方法覆盖(override )&#xff1a;在继承的基础上&#xff0c;子类继承了父类的方法&#xff0c;如果不能满足自己使用&#xff0c;我们就可以重写或覆盖该方法 函数重载(overload)&#xff1a; 在强数据类型的编程语言中(如Java、C、C等等): 函数名称…

数据结构与算法-Rust 版读书笔记-2线性数据结构-队列

数据结构与算法-Rust 版读书笔记-2线性数据结构-队列 1、队列&#xff1a;先进先出 队列是项的有序集合&#xff0c;其中&#xff0c;添加新项的一端称为队尾&#xff0c;移除项的另一端称为队首。一个元素在从队尾进入队列后&#xff0c;就会一直向队首移动&#xff0c;直到…

被迫搬家,宽带迁移怎么办?

广州一栋违建烂尾楼&#xff0c;13年里从未停止出租&#xff0c;年年住满人。这栋楼没有贴外墙&#xff0c;裸露的水泥表面都被雨水腐蚀&#xff0c;很多阳台没有建好&#xff0c;只是简单加装了护栏&#xff0c;存在巨大安全隐患。 为什么烂尾楼年年满人呢&#xff1f; 因为它…

【MounRiver stdio】报错

collect2.exe: error: ld returned 1 exit status 问题 mounriver studio Type ‘SPI_DEV’ could not be resolved 解决方法&#xff1a; SPI_DEV 类型 未知 这个软件感觉不太好用相比keil