创建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.mzph.cn/news/206178.shtml

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

相关文章

Linux测试端口连通的几种方式

在很多生产环境中会需要测试端口是否连通,在很多时候生产环境中未安装 telnet 等一系列命令,这就需要我们学习更多的几种测试端口的方式。以下是对常用的几种方式进行整理。 curl curl -v ip:port # 成功 # About to connect() to xxx port xx(#0) # …

python 涉及opencv mediapipe知识,眨眼计数 供初学者参考

基本思路 我们知道正面侦测到人脸时,任意一只眼睛水平方向上的两个特征点构成水平距离,上下两个特征点构成垂直距离 当头像靠近或者远离摄像头时,垂直距离与水平距离的比值基本恒定 根据这一思路 当闭眼时 垂直距离变小 比值固定小于某一个…

火狐,要完了!

在过去几年中,关于Firefox 浏览器的衰落有过不少讨论。目前来说,很多公共的以及私营的大型网站都缺乏对Firefox的适当支持。但是Firefox也多次试图“自救”,甚至就在不久前,Mozilla 通过官博发文,表示 Firefox 在 2023…

如何使用Matlab完成窗口与子窗口

目录 一、前言 二、主窗口与主窗口按钮 三、子窗口 四、调用函数并显示在子窗口中的文本框中 五、关闭子窗口 一、前言 有时候需要借用Matlab完成一个图窗功能,但是我们的程序不仅拥有功能,还拥有一些子功能,那么我们该如何借助Matlab完…

[linux] 用命令行wget下载google drive的大文件

使用wget命令下载Google drive上的文件_ubuntu上wget下载谷歌云盘文件-CSDN博客 如何用命令行下载Google Drive上的共享文件?-腾讯云开发者社区-腾讯云 举例:https://drive.google.com/drive/folders/1vKj3VvJEKgS_o-uOSmz3I0-GomECpql3 1、在网页上&…

360压缩安装一半不动了怎么办?

360压缩软件是我们常用的压缩软件,但是常常会遇到压缩安装到一半停止的情况,下面提供了一些可能的原因和解决办法,大家可以进行尝试~ 方法一:关闭防火墙和杀毒软件 有时候,防火墙和杀毒软件可能会阻止360压缩的安装过…

CSM2433 一款集成2.4G+125K 和8位RISC 的SOC芯片

CSM2433是一款集成2.4GHz频段发射器、125KHz接收器和8位RISC(精简指令集)MCU的SOC芯片。 无线收发器特性: 发射工作在 2.4GHz ISM 频段 发射兼容 BLE 4.2 接收工作在 15KHz-150KHz 内置 32 次可编程 NVM 存储器 3.3V 编程电压 集成低电…

Qt之面试经验

1.恒生芸擎网络 技术没怎么问,一面问对方工作日常会涉及的一些东西(自动发布),二面公司流程,三面其他(没发offer) 2.光珀智能科技 涉及AI算法落地,问了点基础问题,比如…

RocketMQ-RocketMQ高性能核心原理与源码剖析(中)

二.小试牛刀阶段 ​ 开始理解一些比较简单的业务逻辑 3、Netty服务注册框架 1、关注重点 ​ 网络通信服务是构建分布式应用的基础,也是我们去理解RocketMQ底层业务的基础。这里就重点梳理RocketMQ的这个服务注册框架,理解各个业务进程之间是如何进行…

Python----多态

1、什么是多态 多态指的是一类事物有多种形态。 定义:多态是一种使用对象的方式,子类重写父类方法,调用不同子类对象的相同父类方法,可以产生不同的执行结果。 ① 多态依赖继承 ② 子类方法必须要重写父类方法 首先定义一个父类…

2.1 网络编程-多用户通信系统(用户登录、拉取在线用户、无异常退出)

文章目录 一、多用户通信系统1.1 介绍1.2 公共类1.2.1 封装消息类1.2.2 用户类1.2.3 消息类型类1.2.4 控制台读取内容 二、用户登录2.1 客户端2.1.1 菜单界面 QQView2.1.2 验证用户UserClientService2.1.3 线程类 ClientConnectServerThread2.1.4 线程集合类 2.2 服务端2.2.1 服…

ARMV8 - A64 - 函数调用,内存栈操作

说明 看了下ARM平台上C语言函数调用的反汇编代码,理清楚了其中的内存栈汇编操作,特整理下。本文环境基于:ARMv8-a架构A53核soc,aarch64状态。 预先了解的知识点 内存栈 栈和栈帧的基本概念重点:出栈入栈的单位不是…

【面试经典150 | 二叉树】从前序与中序遍历序列构造二叉树

文章目录 写在前面Tag题目来源题目解读解题思路方法一:递归 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法,两到三天更新一篇文章,欢迎催更…… 专栏内容以分析题目为主,并附带一些对于本题涉及到的数据结构等内容…

Jest与typescript单元测试

文章目录 前言安装配置.vscode/launch.jsonjest.config.tsts.config.ts 测试例子 前言 简单记录一下vscode里跑Jest单元测试。 安装 yarn add -D ts-jest ts-node types/jest jest 配置 .vscode/launch.json {"version": "0.2.0","configurations…

通过异步序列化提高图表性能 Diagramming for WPF

通过异步序列化提高图表性能 2023 年 12 月 6 日 MindFusion.Diagramming for WPF 4.0.0 添加了异步加载和保存文件的功能,从而提高了响应能力。 MindFusion.Diagramming for WPF 提供了一个全面的工具集,用于创建各种图表,包括组织结构图、图…

物理结构设计要点

物理数据库设计是数据库设计的核心,包括数据库结构、存储介质、索引、存储空间、数据访问路径、数据安全性和性能调整等方面。以下是物理结构设计的主要要点: 确定数据库结构 在物理设计阶段,需要确定数据库的结构,包括表、视图…

【Docker二】docker网络模式、网络通信、数据管理

目录 一、docker网络模式: 1、概述 2、docker网络实现原理: 3、docker的网络模式: 3.1、bridge模式: 3.2、host模式: 3.3、container模式: 3.4、none模式: 3.5、自定义网络模式&#xf…

【uniapp小程序】如何根据开发和发行,自动替换不同环境的baseUrl

需求 小程序调试时使用Hbuilder的运行功能,在测试环境调试;到了发行正式版时使用发行功能,baseurl需要替换到生产环境;有没有办法让代码能够识别当前使用的时运行还是发行,自动切换baseur而不是手动切换?&…

shell命令学习(1)——(待完善)

explainshell.com shell统计当前文件夹下的文件个数、目录个数Linux之shell常用命令(三) sort(排序)、uniq(处理重复字符) linux中shell将换行输入到文件中 shell脚本,将多行内容写入文件中 f…

使用Python实现轮盘赌选择法Roulette Wheel Selection Method in Python

一、引言 最近在手写遗传算法,想尝试解决一些优化问题。然而,在编码的过程中,自己发现了很多都不懂的问题。比如,交叉的操作,有单点交叉、两点交叉和多点交叉,具体选哪一种会更好呢?未知。还有交…