vue项目的创建

news2025/7/10 3:14:28

运行第一个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 vue03


npm run serve

运行之后如下

在这里插入图片描述

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

在这里插入图片描述

停止服务

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

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

在这里插入图片描述

运行

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

第三种方式

在cmd窗口输入

vue ui

在这里插入图片描述

然后点击 在此创建新项目

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

创建之后用idea或者vscode打开

我用的vscode打开的

在这里插入图片描述

在终端输入命令

npm run serve

在这里插入图片描述

复制网址,用浏览器打开

在这里插入图片描述

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

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

相关文章

【深度学习】神经网络实战分类与回归任务

第一步 读取数据 ①导入torch import torch ②使用魔法命令,使它使得生成的图形直接嵌入到 Notebook 的单元格输出中,而不是弹出新的窗口来显示图形 %matplotlib inline③读取文件 from pathlib import Path import requestsDATA_PATHPath("dat…

翻译:How do I reset my FPGA?

文章目录 背景翻译:How do I reset my FPGA?1、Understanding the flip-flop reset behavior2、Reset methodology3、Use appropriate resets to maximize utilization4、Many options5、About the author 背景 在写博客《复位信号的同步与释放(同步复…

Linux调试器-gdb的使用简介

1、背景 程序的发布方式有两种,debug模式(给程序员用的)和release模式(给用户用的)Linux gcc/g出来的二进制程序,默认是release模式要使用gdb调试,必须在源代码生成二进制程序的时候,加上 -g 选项 注:debug模式产生的…

通过 Visual Studio Code 启动 IPython

在Visual Studio Code 中,你可以使用内置的终端来启动 ipython,当然首先要安装好ipython。 安装ipython的方法是在cmd里面输入以下命令安装: pip install ipython 启动ipython的步骤如下: 打开 VSCode 终端: 在 VSCo…

019:什么是 Resnet50 神经网络

本文为合集收录,欢迎查看合集/专栏链接进行全部合集的系统学习。 合集完整版请查看这里。 在上一节中,使用了一个简单的神经网络进行识别数字。 这个网络结构非常简单,一是因为层数少,二是因为结构是顺序的,没有其他…

微信小程序获取位置服务

wx.getLocation({type: gcj02,success(res) {wx.log(定位成功);},fail(err) {wx.log(定位失败, err);wx.showModal({content: 请打开手机和小程序中的定位服务,success: (modRes) > {if (modRes.confirm) {wx.openSetting({success(setRes) {if (setRes.authSetting[scope.u…

煤矿场景下拖链检测数据集VOC+YOLO格式21407张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):21407 标注数量(xml文件个数):21407 标注数量(txt文件个数):2140…

Charles 4.6.7 浏览器网络调试指南:HTTPS抓包(三)

概述 在现代互联网应用中,网络请求和响应是服务交互的核心。对于开发者和测试人员来说,能够准确捕获并分析这些请求,是保证系统稳定性和性能的关键。Charles作为一个强大的网络调试工具,不仅可以捕获普通的HTTP请求,还…

第五天 Labview数据记录(5.1 INI配置文件读写)

5.1 INI配置文件读写 INI配置文件是一种简单的文本文件,通常用于存储软件的配置信息。它具有以下作用: 存储软件配置参数方便软件的维护和更新提高软件的灵活性和可扩展性便于用户修改和共享配置 5.1.1 前面板 1)新建项目SaveData_Exampl…

1905电影网中国地区电影数据分析(一) - 数据采集、清洗与存储

文章目录 前言一、数据采集步骤及python库使用版本1. python库使用版本2. 数据采集步骤 二、数据采集网页分析1. 分析采集的字段和URL1.1 分析要爬取的数据字段1.2 分析每部电影的URL1.2 分析每页的URL 2. 字段元素标签定位 三、数据采集代码实现1. 爬取1905电影网分类信息2. 爬…

qml Dialog详解

1、概述 Dialog是QML(Qt Modeling Language)中用于显示对话框的组件,它提供了一个模态窗口,通常用于与用户进行重要交互,如确认操作、输入信息或显示警告等。Dialog组件具有灵活的布局和样式选项,可以轻松…

开关电源设计(1)--电感和伏秒平衡

电感(Inductor)是电子电路中用于存储磁场能量的被动元件,其核心特性是阻碍电流的变化。当电流通过导线时,周围会产生磁场,电感是衡量导线(或线圈)存储磁场能量能力的物理量。 先认识几个公式 …

Blazo-Blazor Web App项目结构

让我们还是从创建项目开始,来一起了解下Blazor Web App的项目情况 创建项目 呈现方式 这里我们可以看到需要选择项目的呈现方式,有以上四种呈现方式 ● WebAssembly ● Server ● Auto(Server and WebAssembly) ● None 纯静态界面静态SSR呈现方式 WebAs…

数据表中的数据查询

文章目录 一、概述二、简单查询1.列出表中所有字段2.“*”符号表示所有字段3.查询指定字段数据4.DISTINCT查询 三、IN查询四、BETWEEN ADN查询1.符合范围的数据记录查询2.不符合范围的数据记录查询 五、LIKE模糊查询六、对查询结果排序七、简单分组查询1.统计数量2.统计计算平均…

System slimming and Quicker action

今天介绍2款提升工作效率的软件,一款用于系统瘦身,当你的各个盘快满的时候,你又不知道该删除哪些文件的时候,就可以用这个插件,进行系统瘦身;另外一款是可以快捷做很多操作以节省时间,比如有很多…

2025年华为云一键快速部署饥荒联机服务器教程

饥荒是一款动作冒险类求生游戏,自行部署专属游戏联机服务器,可以确保游戏的流畅性和稳定性,获得更好的游戏体验。为了方便玩家搭建专属游戏联机服务器,华为云推出了云游戏专场,无需专业技术,新手小白也能一…

OSCP - Proving Grounds - Quackerjack

主要知识点 端口转发 具体步骤 执行nmap扫描,开了好多端口,我先试验80和8081,看起来8081比较有趣 Nmap scan report for 192.168.51.57 Host is up (0.0011s latency). Not shown: 65527 filtered tcp ports (no-response) PORT STATE SERVICE …

Go 切片:用法和本质

要想更好的了解一个知识点,实战是最好的经历。 题目 我这里放一道题目: package mainimport "fmt"func SliceRise(s []int) {s append(s, 0)for i : range s {s[i]}fmt.Println(s) }func SlicePrint() {s1 : []int{1, 2}s2 : s1s2 append…

零售业革命:改变行业的顶级物联网用例

mpro5 产品负责人Ruby Whipp表示,技术进步持续重塑零售业,其中物联网(IoT)正引领这一变革潮流。 研究表明,零售商们正在采用物联网解决方案,以提升运营效率并改善顾客体验。这些技术能够监控运营的各个方面…

安卓动态设置Unity图形API

命令行方式 Unity图像api设置为自动,安卓动态设置Vulkan、OpenGLES Unity设置 安卓设置 创建自定义活动并将其设置为应用程序入口点。 在自定义活动中,覆盖字符串UnityPlayerActivity。updateunitycommandlineararguments (String cmdLine)方法。 在该方法中,将cmdLine…