vue项目的创建

运行第一个vue-cli应用程序

创建一个基于webpack模板的vue应用程序

 vue init webpack 项目名

根据自己需求选择

在这里插入图片描述

创建好之后如下

在这里插入图片描述

运行

cd vue01
npm run dev

运行之后如下

在这里插入图片描述

复制访问地址 : http://localhost:8080

在这里插入图片描述

停止服务

两次ctrl+C 或者 一次ctrl+c然后y

idea中使用vue项目

安装vue.js插件

在这里插入图片描述

打开刚才创建的vue项目

在这里插入图片描述

配置运行按钮

为了运行vue项目时不用每次都输入命令启动,可以在配置脚本处配好。idea右上角点击“Edit Configurations”。

在这里插入图片描述

点击左上角的“+”按钮,在下拉选项中拖到下面,选择“npm”

在这里插入图片描述

这个是默认选好的

在这里插入图片描述

此时右上角有了运行按钮

在这里插入图片描述

运行vue项目

点击右上角的运行按钮
在这里插入图片描述
在这里插入图片描述

idea创建vue项目

方法1的项目我的idea是创建vue3版本的,方法2、3可以选择vue2 / vue3,可以在package.json查看vue版本)

第一种方式

先改文件夹的权限

把这两个文件夹的权限改了,不然创建项目会报权限问题的错误

在这里插入图片描述

右键属性–安全–编辑

在这里插入图片描述

user权限都放开

在这里插入图片描述

点击应用即可,另一个文件夹同理

创建项目

在这里插入图片描述

等待创建就可以了

创建完成之后点运行按钮

在这里插入图片描述

点击链接

在这里插入图片描述

在这里插入图片描述

第二种方式(可以选择是vue2还是vue3)

创建空文件夹vue03,进入cmd

在这里插入图片描述

创建vue

vue create 项目名

选择Manually select features

在这里插入图片描述

选择vuex(空格是选中/取消)

在这里插入图片描述

选中vue3版本

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

输入项目名

在这里插入图片描述

项目创建完成

在这里插入图片描述

运行

cd vue03npm run serve

运行之后如下

在这里插入图片描述

复制访问地址 : http://localhost:8080

在这里插入图片描述

停止服务

两次ctrl+C 或者 一次ctrl+c然后y

在idea中打开,配置运行按钮

在这里插入图片描述

运行

在这里插入图片描述
在这里插入图片描述

第三种方式

在cmd窗口输入

vue ui

在这里插入图片描述

然后点击 在此创建新项目

在这里插入图片描述

都选择好之后点击下一步,这里可以选择vue版本,我选的是vue2

在这里插入图片描述

之后点击 创建项目,等待创建

在这里插入图片描述

创建之后用idea或者vscode打开

我用的vscode打开的

在这里插入图片描述

在终端输入命令

npm run serve

在这里插入图片描述

复制网址,用浏览器打开

在这里插入图片描述

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

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

相关文章

【技术杂谈】Arcgis调用天地图和卫星影像

Arcgis调用天地图和卫星影像 Arcgis调用天地图 1.注册用户官网地址:https://www.tianditu.gov.cn/在官网右上角找到“注册”,输入账号信息完成注册。 2.申请车成为天地图开发者在首页往下滑,找到开发资源下的成为开发者,填写好…

【ROS】RViz2源码分析(四):初始化、启动

【ROS】郭老二博文之:ROS目录 1、简述 RViz2在main函数中,首先注册日志处理函数; 将 RCLCPP_DEBUG 等日志记录函数,通过 rviz_common::set_logging_handlers() 注册到 rviz_common 中。然后,创建界面类 rviz_common::VisualizerApp,并执行初始化 vapp.init(argc, argv)…

【CS61A 2024秋】Python入门课,全过程记录P3(Week5 Sequences开始,更新于2025/1/23)

文章目录 关于基本介绍👋新的问题Week5Mon Sequences阅读材料 关于 个人博客,里面偶尔更新,最近比较忙。发一些总结的帖子和思考。 江湖有缘相见🤝。如果读者想和我交个朋友可以加我好友(见主页or个人博客&#xff0…

android手机应用连接热点后无法进行tcp连接

你在WifiNetworkSpecifer连接回调onavaliable里,再次调用bindProcessToNetwork试试,我这边模拟了一下,是可以建立tcp连接的 你的那个应用我一直没编译成功,你试试吧,应该这样是可以的 另一个同事找到了类似的方法&…

【华为路由的arp配置】

华为路由的arp配置 ARP:IP地址与MAC地址的映射。 R1: g0/0/0:10.1.1.254/24 g0/0/1:10.1.2.254/24 PC1: 10.1.1.1/16 PC2: 10.1.1.2/16 PC3: 10.1.2.3/16 动态ARP 查看PC1的arp表,可以看到,列表为空。 查看R1的arp表 在PC3上ping命令测…

SPDK vhost介绍

目录 1. vhost技术的背景与动机Virtio 介绍virtio-blk数据路径为例 2. vhost技术的核心原理2.1 vhost-kernel2.2 vhost-user举例 2.3 SPDK vhostvhost的优势IO请求处理数据传输控制链路调整 3. SPDK vhost的实现与配置3.1 环境准备3.2 启动SPDK vhost服务3.3 创建虚拟块设备3.4…

GPU 编程系列:内核网格与多维数据处理

GPU 编程系列:内核网格与多维数据处理 大家好,欢迎来到 GPU 编程系列的第三集!在这一集中,我们将深入探讨内核网格的概念,并展示如何利用多维网格来处理复杂的数据结构。 3 内核网格的基础 在上期节目中,…

电容的一些常用数值

如果是滤高频信号的小电容一般采用100nF 如果是滤低频信号的大电容一般采用10uF(10000nF) 比如这个LDO降压 两个一起用滤波效果会更好 如果想要供电引脚悬空,按理不能悬空,所以应该接大电阻接地,一般采用5.1KΩ 比如这个6Pin USB-TypeC的…

Apache Flink 概述学习笔记

一、引言 在大数据处理领域,Apache Flink 是一个极具影响力的开源流批一体化计算框架,它以其独特的架构和强大的功能,为大规模数据处理提供了高效、灵活的解决方案。 二、基本概念 Flink 是什么:Flink 是一个分布式流批处理框架…

Java面向对象专题

面向过程和面向对象的区别 面向过程:当事件比较简单的时候,利用面向过程,注重的是事件的具体的步骤/过程,注重的是过程中的具体的行为,以函数为最小单位,考虑怎么做。 面向对象:注重找“参与者”,将功能封装进对象,强调具备了功能的对象,以类/对象为最小单位,考虑…

业余无线电 对讲机常用频率使用

我自己的总结是,基本可以无忧使用: 144.035-145.800 146.000-148.000 430.000-431.900 432.240-435.000 438.000-439.000 50Mhz一般手台不支持,暂不记录。 以下为附录可以自行阅读,本文内容如有错误请留言指正。 特定波段…

linux 扩容

tmpfs tmpfs 82M 0 82M 0% /run/user/1002 tmpfs tmpfs 82M 0 82M 0% /run/user/0 [输入命令]# fdisk -lu Disk /dev/vda: 40 GiB, 42949672960 bytes, 83886080 sectors Units: sectors of 1 * 512 512 bytes Sector size (logi…

一个基于Python+Appium的手机自动化项目~~

本项目通过PythonAppium实现了抖音手机店铺的自动化询价,可以直接输出excel,并带有详细的LOG输出。 1.excel输出效果: 2. LOG效果: 具体文件内容见GitCode: 项目首页 - douyingoods:一个基于Pythonappium的手机自动化项目,实现了…

VMware虚拟机迁移到阿里云

VMware虚拟机迁移到阿里云是一个涉及多个步骤的过程,具体如下: 使用阿里云的服务器迁移中心(SMC)进行P2V或V2V迁移。如果是小型应用,可以通过制作镜像文件然后上传至阿里云OSS,并基于该镜像创建ECS实例。对…

(回溯分割)leetcode93 复原IP地址

#include<iostream> #include<vector> #include<string> #include<algorithm> using namespace std; //卡尔的图不是按照程序执行过程而是直接画程序会执行的过程 // 实际执行是&#xff1a;n个字符&#xff0c;递推n1后&#xff08;叶子节点&#xff…

张一鸣从创业之初到现在的231句话

1.人常会不自觉地记下对自己有利的部分&#xff0c;这是形成委屈的重要原因。 2.延迟满足感程度在不同量级的人是没法有效讨论问题的&#xff0c;因为他们愿意触探停留的深度不一样。 3.做不好的就别做了&#xff0c;要做就必须做到非常好。 4.当感到沟通困难的时候&#xf…

2025年1月23日-知道自己在哪儿,知道自己在路上

在哪里&#xff1f;在路上&#xff1f; 想写一写的时候&#xff0c;就突然想写一写。 一些事情&#xff0c;一些在路上的事情&#xff0c;一些知道自己在路上的事情。 元旦过后&#xff0c;市场一路阴跌&#xff1b;牛市多长阴&#xff0c;一根大阴线配合小反弹&#xff0c;…

分子动力学模拟里的术语:leap-frog蛙跳算法和‌Velocity-Verlet算法

分子动力学模拟&#xff08;Molecular Dynamics Simulation&#xff0c;简称MD&#xff09;是一种基于经典力学原理的计算物理方法&#xff0c;用于模拟原子和分子在给定时间内的运动和相互作用‌。以下是关于分子动力学模拟的一些核心术语和概念&#xff1a; ‌定义系统‌&am…

JS-Web API -day03

一、事件流 1.1 事件流与两个阶段说明 事件流 指的是事件完整执行过程中的流动路径 假设页面有个div标签&#xff0c;当触发事件时&#xff0c;会经历两个阶段&#xff0c;分别是捕获阶段、冒泡阶段 捕获阶段&#xff1a;Document - Element html - Elementbody - Element div…

国产低功耗带LCD驱动和触摸按键功能的MCU

以下是国产低功耗、集成LCD驱动和触摸按键功能的MCU精选型号及其核心特性&#xff0c;结合性能、功耗和适用场景进行综合推荐&#xff1a; 1.灵动微MM32L0130系列 257 核心特性&#xff1a;低功耗&#xff1a;待机模式功耗低至100nA&#xff0c;支持多种低功耗模式。 LCD驱动&a…