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

news2025/1/11 12:37:06

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.coloradmin.cn/o/1411966.html

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

相关文章

云计算项目六:升级网站运行平台|部署缓存服务|数据迁移|部署集群

升级网站运行平台|部署缓存服务|数据迁移|部署集群 案例1:升级网站运行平台步骤一:清除当前配置步骤二:部署LNMP步骤三:测试配置 案例2:部署内存存储服务步骤一:部署redi…

Linux基础指令【下篇】

📙 作者简介 :RO-BERRY 📗 学习方向:致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向,欢迎各位关注,谢谢各位的支持 目录 1.时间指令----date1…

翻译: 使用 GPT-4 将您的 Streamlit 应用程序提升到一个新的水平一

帮助您更快地设计、调试和优化 Streamlit 应用的专业技巧 设计和扩展 Streamlit 应用程序可能是一项艰巨的任务!作为开发人员,我们经常面临一些挑战,例如设计良好的 UI、快速调试我们的应用程序以及快速制作它们。 如果有一个工具可以加快速…

【GitHub项目推荐--不错的Flutter项目】【转载】

01 可定制的图表库 FL Chart是一个高度可定制的 Flutter 图表库,支持折线图、条形图、饼图、散点图和雷达图 。 项目地址:https://github.com/imaNNeoFighT/fl_chart LineChart BarChart PieChart Sample1 Sample2 Sample3 …

linux 查看系统日记

一 关于 journalctl 简介: 在window想查看日记通常是通过事件查看器,在linux则可以通过journalctl -xe,journalctl是 Systemd 日志管理工具的一部分,用于检索和显示系统日志。 二 使用journalctl 查看日记: journalct…

关于axios给后端发送数据的问题

这里需要用的插件:qs.js,是前端给后端发送的数组,需要序列化所以要用到这个插件,这里就提取连接在这里,需要的自提,需要导如进来,别忘记了 链接:https://pan.baidu.com/s/1qyD8v9wfd…

JMeter:性能测试和压力测试工具详解

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号:互联网杂货铺,回复1 ,免费获取软件测试全套资料,资料在手,薪资嘎嘎涨 JMeter简介 JMeter时Apache下基于java的一款性能测试…

antdesignvue中使用VNode写法

1、使用场景 如图:消息提示框中,将数据中的数据单独一行显示 2、代码 let errorList res.result; //后端返回的数据例: ["1. 数据格式不正确","2. 数据已存在"]if(errorList&&errorList.length!0){this.$notif…

时限挑战 —— 深度解析Pytest插件 pytest-timeout!

在软件开发中,测试用例的执行时间通常是一个关键考虑因素。Pytest插件 pytest-timeout 提供了一个强大的插件,允许你设置测试用例的超时时间。本文将深入介绍 pytest-timeout 插件的基本用法和实际案例,助你精确掌控测试用例的执行时限。 什么…

备忘录模式-C#实现

该实例基于WPF实现,直接上代码,下面为三层架构的代码。 目录 一 Model 二 View 三 ViewModel 一 Model using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace 设计模式练…

JVM篇----第八篇

系列文章目录 文章目录 系列文章目录前言一、标记清除算法( Mark-Sweep)二、复制算法(copying)三、标记整理算法(Mark-Compact)前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分…

Docker应用-自定义网络连接

Docker网络 文章目录 Docker网络网络的基础配置自定义网络网络连通 网络的基础配置 大量的互联网应用服务包括多个服务组件,这往往需要多个容器之间通过网络通信进行互相配合。 目前Docker提供了映射容器端口到宿主机主机和容器互联机制来为容器提供网络服务&…

【MySQL】如何使用图形化界面DataGrip操作数据库

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-W5JDg0WA1tjEP66Y {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

小白水平理解面试经典题目LeetCode 594 Longest Harmonious Subsequence(最大和谐字符串)

594 最大和谐字符串 这道题属于字符串类型题目,解决的办法还是有很多的,暴力算法,二分法,双指针等等。 题目描述 和谐数组是指一个数组里元素的最大值和最小值之间的差别 正好是 1 。 现在,给你一个整数数组 nums …

java servlet 高校田径运动会管理系统Myeclipse开发mysql数据库web结构jsp编程计算机网页项目

一、源码特点 jsp高校田径运动会管理系统是一套完善的java web信息管理系统 采用mvc模式 servletdaobean 模式开发,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myecl…

Redis 线程模型

更多内容,前往个人博客 一、概述 【1】Redis 是基于 Reactor 模式开发的网络事件处理器:这个处理器被称为文件事件处理器(file event handler),这个文件事件处理器是单线程的,所以 Redis 才叫做单线程的模型…

全志XR806芯片Wi-Fi测试:自定义发送802.11帧(Beacon篇)

XR806是一款使用ARMv8-M的Wi-Fi BLE Combo MCU。本文使用XR806开发板以及基于FreeRTOS的XR806 SDK实现了自定义发送802.11 Beacon帧,并进行了无线抓包分析以及扫描测试来验证帧的发送结果。 环境配置过程 环境搭建可以参考官方文档开发环境搭建。本测试中使用的开…

微信小程序登录获取手机号教程(超详细)

1. 背景介绍: 在我们开发微信小程序时,登录时,需要获取用户手机号作为唯一标识,下面我介绍一下获取手机号的教程。 本篇文章介绍后端获取方法: 前端工作 后端工作 前端 新建Page页面,在xxx.wxml中加入…

What is Rust? Why Rust?

why Rust? 目前,Rust 变得越来越流行。然而,仍然有很多人(和公司!)误解了 Rust 的主张价值是什么,甚至误解了它是什么。在本文中,我们将讨论 Rust 是什么以及为什么它是一种可以增强…

<网络安全>《2 国内主要企业网络安全公司概览(二)》

4 北京天融信科技有限公司(简称天融信) 信息内容LOGO成立日期创始于1995年总部北京市海淀区上地东路1号院3号楼北侧301室背景民营企业是否上市天融信[002212]A股市值99亿主要产品网络安全大数据云服务员工规模6000多人简介天融信科技集团(证券代码:0022…