【vue create】一.使用vue creat搭建项目

news2024/10/2 22:16:51

场景:使用vue create脚手架快速搭建vue的项目
前提:需要安装node.js和cnpm以及yarn
并且cnpm需要设置为淘宝镜像,cnpm和yarn安装教程网上很多可以自行搜索

1.使用dos命令安装vue-cli脚手架

//这个是从镜像源下载
cnpm install -g @vue/cli 

查看安装的版本(显示版本号说明安装成功)

vue --version

在这里插入图片描述

2.使用vue create命令搭建vue项目

1.cmd窗口跳到需要新建项目的文件夹下,使用vue create

//vuetest是我的项目名
vue create vuetest

2.我这里选择第三个Manually select features自定义选项操作并回车(至于第一个和第二个选项可以快速搭建带eslint和babel的项目)
在这里插入图片描述
3.选择配置项
我这里选择了Babel、Router、Vuex、Linter/Formatter三个选项,然后回车
在这里插入图片描述4.选择vue的版本
我这里选择第二个2.X,然后回车
在这里插入图片描述
5.选择router的模式
vue-router分为两种模式

hash
history

**hash:**
特征:
1.hash会在浏览器路径里带#号,比如http://locahost:8080/#/index
2.hash在浏览器改变路径触发页面跳转,即前进后退,但不会重新加载页面。
3.hash传参是基于url,如果要传递复杂的参数会有体积的限制


**history**
特征:
1.可以在url放参数,而且也可以将数据存放在一个特定的对象中,其利用HTML5 History inteface中新增的pushState()replaceState()方法(限制:history只支持IE8以上)

2.需要后台配置支持,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.test.com/user/id 如果后端缺少对 /user/id 的路由处理,将返回 404 错误。

我这里使用router路由的history模式,输入Y,然后回车(如果使用hash,则输入n)
在这里插入图片描述
6.代码语法错误检查
我这里选择ESLint + Standard config,这个是标准的,然后回车
在这里插入图片描述
7.选择检查代码语法的时机
我这里选择第一个Lint on save,然后回车
在这里插入图片描述8.第三方配置文件存在的方式
我这里选择第一个In dedicated config files,然后回车
在这里插入图片描述
9.是否保存本次配置为预设项目模板
我这里选择N(也可以选择Y,这样下次可以直接使用该配置方案快速搭建项目),然后回车,则项目搭建成功
在这里插入图片描述10.搭建成功的示例
在这里插入图片描述
11.打开项目安装依赖
在终端输入如下代码,安装依赖包

yarn install

在这里插入图片描述
13.启动项目
在终端输入如下代码,然后回车启动项目

yarn serve

在这里插入图片描述放在浏览器预览
在这里插入图片描述
注意点:
1.我的npm版本是8.5.0 ,node版本是16.14.2 , yarn版本是1.22.18,
vue-cli版本是5.0.8,cnpm版本是8.2.0
在这里插入图片描述

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

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

相关文章

Google三大论文之GFS

Google三大论文之GFS Google GFS(Google File System) 文件系统,一个面向大规模数据密集型应用的、可伸缩的分布式文件系统。GFS 虽然运行在廉价的普遍硬件设备上,但是它依然了提供灾难冗余的能力,为大量客户机提供了…

接口自动化测试——多套被测环境的切换

文章目录一、意义二、实现目标三、实现方案1、使用环境管理文件2、使用不同的文件管理不同的环境(建议使用)3、在接口用例中指定path,不指定url4、环境切换a、通过环境变量进行切换b、通过命令行参数进行切换四、代码实现1、通过环境变量进行…

GPT格式的磁盘扩容

GPT格式的系统盘已经满了,现在需要扩充系统盘 1.怎么查看是不是GPT格式:fdisk -l 2.查看磁盘挂载分区情况 lsblk 2.使用parted对分区进行操作 parted /dev/sda 3.开始分区 mkpart 4.格式化sda4分区后,会发现分区4的文件系统已经显示为xfs…

Docker 常见操作及部署springboot、Shiro、SpringData脚手架(上)

1、查看docker 的状态 systemctl status docker 2、查看docker运行状态的详细信息 docker info 3、docker部署第一个应用 docker search nginx 拉取镜像到本地 docker pull nginx 4、查看本地的镜像信息 docker images 5、使用镜像来创建容器 docker run -d -p 1234:80 ng…

SSH配置文件解析

1.修改端口号,设置登录输入密码等待过期时间,拒绝远程登录root,密码为空,密码登录, [rootzzp124 ~]# vim /etc/ssh/sshd_config [rootzzp124 ~]# systemctl restart sshd.service [rootzzp124 ~]# lsof -i :2…

Superset数据探索和可视化平台入门以及案例实操

1、Superset背景 1.1、Superset概述 Apache Superset是一个现代的数据探索和可视化平台。它功能强大且十分易用,可对接各种数据源,包括很多现代的大数据分析引擎,拥有丰富的图表展示形式,并且支持自定义仪表盘。 1.2、环境说明 …

FastApi的搭建与测试

一、fastapi的安装 1-1、使用pip安装 安装fastapi的语句 pip install fastapi -i https://mirrors.aliyun.com/pypi/simple因为fastapi启动依赖于uvicorn,所以我们还需要安装uvicorn。 pip install uvicorn -i https://mirrors.aliyun.com/pypi/simple下面我们来…

Java学习环境一站说明(保姆级详细教学)

1.Java开发环境搭建官网下载www.oracle.com2.安装注意:1.选择安装位置时尽量不要安装到C盘,路径中不要有空格以及中文的存在2.开发人员安装的jdk中包含了jre,所以不需要单独安装jre3.环境变量配置打开高级系统设置2.点击环境变量3.在系统变量…

FreeSWITCH 智能呼叫流程设计

文章目录1. 智能呼叫流程2. 细节处理1. 呼叫字符串指定拨号计划2. 外呼的拨号计划3. 语音打断的支持1. 智能呼叫流程 用户与机器人对话通常都是以文本的形式进行,但是借助 ASR 和 TTS 技术,以语音电话为载体的智能呼叫系统成为可能。智能呼叫系统涉及到…

Python蓝桥杯训练:基本数据结构 [二叉树] 上

Python蓝桥杯训练:基本数据结构 [二叉树] 上 文章目录Python蓝桥杯训练:基本数据结构 [二叉树] 上一、前言二、有关二叉树理论基础1、二叉树的基本定义2、二叉树的常见类型3、二叉树的遍历方式三、有关二叉树的层序遍历的题目1、[二叉树的层序遍历](http…

网络原理之传输层协议,TCP中的主要核心机制(重点)

目录 一. 传输层中的端口号 二. UDP协议 三. TCP协议 四. TCP中的核心机制 1. 确认应答 2. 超时重传 3. 连接管理 建立连接(三次握手) 断开连接(四次挥手) 4. 滑动窗口 考虑丢包情况1:ack丢了 考虑丢包情况2:数据丢了 5. 流量控制 6. 拥塞…

学这些语言工作更吃香,Python虽然再次摘得桂冠,但在就业需求中位居第一的还得是它!

2022 IEEE 编程语言榜单发布! IEEE Spectrum 2022 编程语言排名前十的分别是:Python,C,C,C#,Java,SQL,JavaScript,R,HTML,TypeScript。 一. Pyth…

嵌入式学习笔记——寄存器实现控制LED小灯

文章目录前言GPIO通用输出模式初始化LED小灯的GPIO原理图初始化代码初始化的效果功能函数封装直接分开宏定义两个使用条件运算符封装函数实现简单的功能前言 上一篇中,介绍了GPIO相关的所有寄存器,并在最后简单实现了一个LED灯的控制,由于那…

以获取笔记本电池信息为例介绍WMI的使用

注:本人也还没有完全弄懂WMI的原理,以下内容仅供参考。。。 简单来说,比起Win32提供的接口,WMI可以提供更多的系统信息,它本身是一个数据库架构,通过它可以访问、配置、管理和监视几乎所有的Windows资源&…

AM5728(AM5708)开发实战之移植OpenCV-3.4.11

一 概述 OpenCV是一个开源的跨平台计算机视觉库,可以运行在Linux、Windows、Mac OS等操作系统上,它为图像处理、模式识别、三维重建、物体跟踪、机器学习提供了丰富的算法。 由于OpenCV依赖包特别多,尽量不要使用交叉编译,即在什…

VMware虚拟机搭建环境通用方法

目录一、前期准备1.下载并安装一个虚拟机软件二、开始创建虚拟机1.配置虚拟机硬件相关操作2.虚拟机网络相关操作三、开机配置相关内容0.开机遇到报错处理(选看--开机没有报错请忽略)1.开始配置2.开机之后配置3.使用xshell远程登录4.使用xshell配置虚拟机…

下一个7年,保持期待、持续思考,酷雷曼继续向前!

过去7年,我们一直在思考, VR技术究竟能为我们的生活带来什么? 是足不出户就能云游千里的秀美风光? 是在家就能沉浸式体验线上消费的便利? 还是为商企和用户搭建更快速的沟通桥梁? NO.1、技术变革 在信…

磁盘阵列Raid探讨

最近公司买服务器,顺便了解一下服务器配置方面的问题 以下讨论的都是入门级服务器配置,全部是主观意见,没有任何科学依据,欢迎大家讨论 Raid0,Raid1,Raid10,Raid5,Raid6(Raid5热备)…

计算机科学导论笔记(四)

目录 六、计算机网络和因特网 6.1 引言 6.1.1 网络 6.1.2 因特网 6.1.3 硬件和软件 6.1.4 协议分层 6.1.5 TCP/IP协议族 6.2 应用层 6.2.1 应用层模式 6.2.2 标准客户机-服务器应用 6.2.3 文件传输协议(FTP) 6.2.4 电子邮件 6.2.5 TELNET 6…

vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话

vue 模拟 chatgpt 聊天效果&#xff1a;js 实现逐字显示、延时函数模拟对话模拟 chatgpt 聊天功能&#xff0c;展示对话效果。其中比较有意义的技术点是&#xff1a;js 实现逐字显示、延时函数&#xff0c;同步遍历。 <template><div class"chat-gpt">…