【创建vue项目的两种方式】

Vue环境搭建

    • NodeJs安装包
      • 安装淘宝镜像
    • 环境搭建
      • webpack安装
      • 全局安装@vue/cli
      • 查看模板
      • 创建项目
        • 1.webpack
        • 2. vue-cli

NodeJs安装包

下载链接:官网链接
在这里插入图片描述下载下来后,直接傻瓜式的安装即可。
通过在cmd控制台输入以下命令查看是否安装成功

node -v

因为适配某些依赖的原因,我本地使用了16.18.1的版本。
在这里插入图片描述

安装淘宝镜像

npm的服务器是外国的,所以有时候我们安装“模块”会超级慢,所以配置一个国内服务器,速度会很快。

#解决npm速度慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后,通过以下命令查看版本

cnpm -v

环境搭建

webpack安装

安装命令:

#不指定版本的命令npm install webpack
# 为了避免版本冲突,尽量指定版本
# cnpm安装速度更快
cnpm install webpack@3.6.0 -g#  -g 表示是否进行全局安装,因为有些项目特有的用特定的版本

查看是否安装成功:

webpack -v

全局安装@vue/cli

官网指南
安装命令:

cnpm install -g @vue/cli#  -g 表示是否进行全局安装,因为有些项目特有的用特定的版本

通过在控制台输入以下命令查看是否安装成功

# vue -V或vue --version
vue --version

npm i -g @vue/cli

如果安装失败,可以使用管理员的身份运行cmd
在这里插入图片描述

查看模板

查看当前可以创建哪些模板的工程

vue list

在这里插入图片描述

创建项目

目前创建vue工程的方式有两种,一种是webpack创建,另外一种是使用vue-cli创建

1.webpack

创建命令:

#注:项目名不能大写,不能使用中文 
vue init webpack myvue1

注意:安装时可能提示(如下)就使用命令安装一下:cnpm i -g @vue/cli-init
需要先安装cli-init

注意:这种方式有时候服务器链接不上。处理方案服务器链接不上

2. vue-cli

另外一种创建项目的方式

vue create myvue2

会要求选择对应的vue版本
在这里插入图片描述
下载完成后,得到下面的目录
在这里插入图片描述

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

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

相关文章

RK3399平台开发系列讲解(PCIE篇)PCIE体系结构有哪些知识

🚀返回专栏总目录 沉淀、分享、成长,让自己和他人都能有所收获!😄 一、PCI/PCIe拓扑结构 PCI Express (PCIe) 拓扑结构是指 PCI Express 总线中各个设备之间的连接和通信方式。PCI Express 是一种高速串行总线标准,用于连接计算机内部的各种硬件设备,如图形卡、网络适配…

vue3---inputRef.value.focus()报错Cannot read properties of null (reading ‘focus‘)

问题描述&#xff1a;点击编辑按钮&#xff0c;出现el-input框&#xff08;el-input显示隐藏通过v-if控制&#xff09; <el-input ref"inputRef" v-if"isEdit" v-model"modelName" blur"isEdit false" /> <el-button text …

python小项目:口令保管箱

代码&#xff1a; #! python3 # python 编程-----口令保管箱passwords{emails: F7minlBDDuvMJuxESSKHFhTxFtjVB6,blog:VmALvQyKAxiVH5G8v01if1MLZF3sdt,luggage:12345,} import sys,pyperclip if len(sys.argv)<2:print(usage:python python3文件[accout]-copy accout pass…

shell 脚本4

循环语句 echo命令 1.标准输出 2.用来调整脚本里面的格式 echo -e \b 删除b前面的数字 echo -e \t &#xff08;横向制表符 横向tab键&#xff09; echo -e \c 删除c后面的字符&#xff0c;并且不换行 echo -e \n 换行 自动硬盘分区 新建一块磁盘/dev/sdb 可以…

在Asp.net SignalR与Angular通信添加身份认证(通过jwt)

这是一个复杂的东西&#xff0c;我查找了一些混乱的资料&#xff0c;最终在混乱的状态成功了&#xff0c;然后我尝试阅读代码&#xff0c;并删除了一些重复的东西&#xff0c;并以一种较为简洁的方式成功。 示例hubs端点 app.MapHub<MessageHub>("/hubs/message&q…

循环测试之旅——深度解析Pytest插件 pytest-repeat

在软件开发中,测试的重要性不言而喻。而为了提高测试的鲁棒性和可靠性,Pytest插件 pytest-repeat 应运而生。这个插件可以帮助你轻松实现测试用例的循环运行,以更全面地评估代码的稳定性。本文将深入介绍 pytest-repeat 插件的基本用法和实际案例,助你更好地利用循环测试,…

chaper data writting

在大气科学领域的期刊论文中&#xff0c;这个章节应该清晰地说明数据的来源、获取方式、处理过程和分析方法&#xff0c;以便其他研究人员能够理解和验证研究结果。 示例结构 数据来源 描述数据的来源&#xff0c;包括观测、实验或模拟数据。说明数据的获取途径和原始数据集的…

Vue自定义成功弹窗H5实现类似于小程序的效果

效果图&#xff1a; <div class"father"><div class"success-box" v-if"isSuccess"><img src"../../assets/insure/success-logo.png" alt""><span>{{ successTitle }}</span></div> &…

安全防御第三次作业

作业&#xff1a;拓扑图及要求如下图 注&#xff1a;server1是ftp服务器&#xff0c;server2是http服务器 lsw1&#xff1a; 其中g0/0/0口为trunk 实现 1&#xff0c;生产区在工作时间内可以访问服务器区&#xff0c;仅可以访问http服务器 验证&#xff1a; 2&#xff0c;办公…

【DDD】学习笔记-领域驱动设计

领域驱动设计&#xff08;Domain Driven Design&#xff0c;DDD&#xff09;是由 Eric Evans 最早提出的综合软件系统分析和设计的面向对象建模方法&#xff0c;如今已经发展成为了一种针对大型复杂系统的领域建模与分析方法。它完全改变了传统软件开发工程师针对数据库进行的建…

Java数据结构与算法:字符串匹配算法之暴力匹配

Java数据结构与算法&#xff1a;字符串匹配算法之暴力匹配 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;一个热爱编程的程序猿。在计算机科学领域&#xff0c;字符串匹配一直是一个备受关注的问题。今天&#xff0c;我们将深入探…

JWT令牌(JSON Web Token)

目录 1 前言 2 JWT令牌的组成 3 使用步骤举例 3.1 pom.xml中引入依赖 3.2 JWT生成 3.3 JWT验证 4 实践中的使用举例 4.1 拦截非法访问 4.1.1 编写为工具类 4.1.2 下发给用户 4.1.3 编写拦截器 4.1.4 注册拦截器 4.2 获取相关数据提升效率 1 前言 在我们编写的后端…

跨平台Recorder录音插件:支持多种格式、音频可视化、实时上传、语音识别

视频教程地址&#xff1a;【跨平台Recorder录音插件&#xff1a;支持多种格式、音频可视化、实时上传、语音识别】 https://www.bilibili.com/video/BV1jQ4y1c7e4/?share_sourcecopy_web&vd_sourcee66c0e33402a09ca7ae1f0ed3d5ecf7c /** 先引入Recorder &#xff08; 需先…

LeetCode-题目整理【10】:单词搜索

先补充一些小知识&#xff1a; dfs和回溯的区别 深度优先搜索&#xff08;DFS&#xff09;和回溯是两种常用的算法思想&#xff0c;它们在解决问题时有一些相似之处&#xff0c;但也有一些不同之处。 深度优先搜索&#xff08;DFS&#xff09;是一种 用于遍历或搜索图、树或其…

LeetCode第559题 - N 叉树的最大深度

题目 解答 class Solution {public int maxDepth(Node root) {if (root null) {return 0;}if (root.children null || root.children.isEmpty()) {return 1;}int max Integer.MIN_VALUE;for (Node node : root.children) {max Math.max(maxDepth(node), max);}return max…

Python 列表应用案例:输入10个整数,计算平均值、方差和标准差,找出最大值和最小值

题目&#xff1a;输入10个整数&#xff0c;计算平均值、方差和标准差&#xff0c;找出最大值和最小值。 方差和标准差公式&#xff1a; Var ( X ) 1 n ∑ ( X i − X ˉ ) 2 \text{Var}(X) \frac{1}{n} \sum (X_i - \bar{X})^2 Var(X)n1​∑(Xi​−Xˉ)2 SD ( X ) Var ( X…

三篇论文联合复现:高比例新能源下考虑需求侧响应和智能软开关的配电网重构程序代码!

适用平台&#xff1a;MatlabYalmipCplex 程序在高比例新能源接入的情况下提出了考虑需求响应&#xff08;DR&#xff09;和智能软开关&#xff08;SOP&#xff09;的多时段主动配电网重构策略&#xff0c;进一步降低配电系统重构费用&#xff0c;减少弃风率和弃光率&#xff1…

深度学习与图像描述生成——图像描述生成方法(4)

目录 一、基于模板的方法 1.1 定义 1.2 原理 1.3 关键技术 1.4 发展历程 1.5 应用场景 1.6 特征 二、基于检索的方法 2.1 定义 2.2 原理 2.3 关键技术 2.4 发展历程 2.5 应用场景 2.6 特征 三、基于编码器-解码器架构的方法 3.1 定义 3.2 原理 3.3 关键技术 …

金融OCR领域实习日志(二)——四种OCR模型效果测试(附图)

文章目录 四种模型ocr效果简单测试模型场景1.paddle框架下PP-OCRv31.1.效果如下&#xff1a;1.2.总结 2.paddle框架下ppocr_server_v22.1.效果如下2.2.总结 3.CnOCR3.1.效果如下3.2.总结 4.TesseractOCR4.1.效果如下4.2.总结 5.后续想法 四种模型ocr效果简单测试 模型 PP-OCR…

【RT-DETR有效改进】 | 主干篇 | RevColV1可逆列网络(特征解耦助力小目标检测)

前言 大家好&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持ResNet32、ResNet101和PP…