当前位置： 首页 > article >正文

vue项目的创建

article 2025/1/24 19:58:03

运行第一个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.kler.cn/a/516742.html

相关文章：

  • macos的图标过大，这是因为有自己的设计规范
  • 使用github提交Pull Request的完整流程
  • java常量池
  • c#的tabControl控件实现自定义标签颜色
  • docker-registry
  • 基于JAVA的微信点餐小程序设计与实现（LW+源码+讲解）
  • GPU算力平台|在GPU算力平台部署MedicalGPT医疗大模型的应用教程
  • MyBatis最佳实践:MyBatis 框架的缓存
  • 3、搭建企业知识库：从需求分析到方案设计
  • 配电网的自动化和智能化水平介绍
  • Python中使用Ollama API
  • SpringBoot的Swagger配置
  • Javaweb之css
  • 时序数据库的使用场景
  • openresty(nginx)+lua+kafka实现日志搜集系统
  • 【Redis】事务
  • Windows Docker Desktop安装及使用 Docker 运行 MySQL
  • elasticsearch segment数量对读写性能的影响
  • STM32_SD卡的SDIO通信_基础读写
  • 互联网产品品牌形象构建与开源AI智能名片S2B2C商城小程序的应用研究
  • Lock和Synchronized的区别，源码分析
  • 基于Springboot用axiospost请求接收字符串参数为null的解决方案
  • 【unity游戏开发之InputSystem——02】InputAction的使用介绍（基于unity6开发介绍）
  • 68,[8] BUUCTF WEB [RoarCTF 2019]Simple Upload（未写完）
  • JAVASE入门八脚-Spring ,时间Data,Dateformat,parse,Math,容器
  • Linux网络 | 网络计算器客户端实现与Json的安装以及使用