vue项目的创建

最新推荐文章于 2025-04-29 10:57:26 发布
最新推荐文章于 2025-04-29 10:57:26 发布
阅读量395 收藏 6
点赞数 4
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2201_76081438/article/details/145328977
版权

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

在这里插入图片描述

复制网址，用浏览器打开

在这里插入图片描述

vue基础——java程序员版(总集)
陨石的博客
03-24 1471
前言：​ 这是一个java程序员的vue学习记录。​ vue是前端的主流框架，按照如今的就业形式作为后端开发的java程序员也是要有所了解的，下面是本人的vue学习记录，包括vue2的基本使用以及引入element-ui，使用的开发工具是IDEA。
idea创建Vue项目流程
m0_64005688的博客
03-26 4294
idea从0开始安装vue并学习相关知识
使用IDE进行Vue项目搭建
最新发布
2202_76007821的博客
04-29 390
在src目录下新建utils包，在utils包下新建request.js文件，编写request.js。1. 删除public，assets，components目录下的文件。或者使用一条命令直接安装多个依赖。1. 打开ide，选择新建项目。2. 选择使用vue.js新建。在该项目下打开命令行，安装依赖。三、删除不必要的文件。删除之后大概就是这样。
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
手把手教程-使用idea创建vue项目
Wang_ning__的博客
10-24 1万+
小编在第一次通过IDEA使用Vue创建脚手架时，对于网上那么多方法真实头大，在经过多次的测试后，终于有一种简单直接的方法，费话不多说，上操作方法和相应的截图。
Idea创建vue项目
Jeremy486的博客
01-17 3463
点击locoal就可以跳转了。
新建一个vue2.x项目（idea目前默认创建vue3.x项目）
qq_51476492的博客
06-02 2737
vue ui创建vue2.x项目
使用IDEA创建第一个VUE项目（详细步骤）
Spring丶王不正-传记
08-26 1万+
使用IDEA创建咱们的第一个VUE项目 最近在学习VUE,想着使用vscode、hbulider、webstorm这些软件学习，但听前端前辈们说要很多插件什么的等等等！听完咱还是选择IDEA吧，毕竟和IDEA还是很亲近的！ 1.安装环境–让VUE‘顺产’ （1）安装node.js 至于为什么安装大家可以看看前辈们的博客哦！ 1.先让IDAE准备准备（迎接VUE）~~~ 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环
Vue项目创建及配置
L14173233的博客
08-07 1981
Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM（Model-View-ViewModel）的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。Model（模型）：表示应用程序的数据和业务逻辑。在Vue中，模型通常是一个JavaScript对象。View（视图）：表示用户界面。在Vue中，视图通常是使用HTML模板构建的。ViewModel（视图模型）：充当模型和视图之间的中间层。
Vue项目创建及自定义项目配置详解（Manually select features）看这篇就够了！
xiaolouuuu的博客
11-08 1136
这个配置基于 Airbnb 的 JavaScript 风格指南，是一个非常流行且全面的 ESLint 配置。如果你不熟悉代码风格规则，或者想要遵循业界广泛接受的标准，这是一个不错的选择。：这个配置结合了 ESLint 和 Prettier，Prettier 是一个流行的代码格式化工具，它可以自动格式化代码以符合一定的风格。，可以让你使用最新的 JavaScript 语法，同时确保代码能够在当前和旧版的浏览器中运行。这样做的好处是，所有的依赖和配置都在一个地方，方便查看和管理。
Vue项目创建与项目结构解析
weixin_43576422的博客
11-02 1393
一、新建项目 前置条件： 打开命令行查看是否有需要的环境。 node环境：（若无则安装：npm install -g cnpm –registry=https://registry.npm.taobao.org） vue-cli:（若无则安装：npm install --global vue-cli） 切换到power shell： 新建一个放项目文件夹并进入： vue init webpack 项目名 说明： Vue build ==> 打包方式，回车即可； Install vue-rou
vue项目创建（仅供参考哦）
12-18
vue项目创建（仅供参考哦）
SpringBoot + Vue 项目创建详细步骤
weixin_54851039的博客
08-31 3953
我这里是主要是展示如何创建项目（这里前后端是没有分离的，主要就我一个人练练，放一起好看），实现了简单的前后端交互（查询功能）
使用idea和vecode创建vue项目并启动（超详细）
le12345678934694的博客
10-09 5092
创建项目之前先下载好插件新建项目找到vue生成器写好名称，找到自己需要存放的地址，node解释器安装方式可以看我上一个博客，vueCLI是选择vue的版本，我们可以使用idea自带的vue版本默认是vue3，创建速度会很快，这是一个简洁版本，也可以选择自己下载好的vue版本。加载完后，项目就创建好了，idea创建项目非常的简单易懂，我给大家展示一下默认idea自带的vue和下载的区别创建项目非常迅速端口号（默认）：5173版本是3.x启动项目速度非常快创建项目需要加载资源。
vue入门级教程从零搭建一个vue项目
热门推荐
marendu的博客
05-24 2万+
一、安装node环境 1、下载地址为：https://nodejs.org/en/ 2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/ 输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再...
IDEA中Vue开发环境搭建
yinshengchen的博客
04-18 1万+
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
Idea创建Vue项目流程
caicai_L的博客
10-25 5148
Vue项目创建流程 完全没有接触过vue的小白，之前还学过js，但是由于这近两年的时候一直在接触后台，前台已经忘的差不多了，想拾起来，学习学习。 用idea完全不知道怎么创建前台项目，然后问了我们项目的前台大哥，他推荐我两个网址来创建前端项目。 这个属于前后台不分离的创建方式。 https://www.cnblogs.com/xinruyi/p/9360282.html?tdsourceta...
创建vue项目
caixiajia的专栏
12-25 2211
首先确保vue以正确安装 1、命令行定位到想创建文件所在路径 2、执行命令：vue init webpack my-first-vue-project 3、创建完成后，可以看到在G:\Workspaces\vue已经有了一个名字叫my-first-vue-project的项目。
IDEA创建vue项目
bjzhang75的博客
04-15 541
IDEA创建vue项目
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值