VueCli脚手架图形界面创建项目

最新推荐文章于 2022-08-17 21:29:41 发布
最新推荐文章于 2022-08-17 21:29:41 发布
阅读量236 收藏 2
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46253184/article/details/108724087
版权

准备工作

安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

开始创建

vue create my-project
# OR
vue ui

在这里插入图片描述
提示：以上均在命令行中操作

创建项目

1.选择创建
点击创建然后选择项目文件夹，再点击创建
在这里插入图片描述
2.选择项目名称和初始化Git仓库
点击下一步
在这里插入图片描述
3.预设选择手动在这里插入图片描述
4.选择功能
在这里插入图片描述
在这里插入图片描述
5.选择是否保存之前的预设
保不保存都可以
在这里插入图片描述
6。项目创建中
在这里插入图片描述
7.创建成功
在这里插入图片描述

项目配置

1.安装插件
创建好项目后，点击第二个插件，然后选择添加插件，输入vue-cli-plugins-element，选择图中括起来的，点击安装
在这里插入图片描述
安装配置
按需导入，然后点击完成安装
在这里插入图片描述
插件安装成功
在这里插入图片描述
4.安装依赖
选择依赖并点击安装依赖
在这里插入图片描述
输入axios，选择axios并安装依赖
在这里插入图片描述
6.安装成功
在这里插入图片描述
整个项目的安装和配置完成l

运行项目

点击任务，选择运行，等运行app亮起再点击运行qpp就可以运行起整个项目了
在这里插入图片描述
在这里插入图片描述

YANGGEOL
关注
专栏目录
基于图形化界面的方式创建Vue-cli项目
weixin_43360890的博客
05-29 682
Vue-cli的安装搭建- -基于图形化界面的方式 基于图形化界面的方式（网页），搭建新版vue项目。 cmd中运行vue ui，打开图形化界面（会自动打开一个网页）。 1. 点击创建，选择项目创建文件夹后，点击再次创建新项目。 2. 输入项目文件夹名称，Git填写init project 初始化项目 3. 开始预设的配置，我们手动配置预设。 4. 选择需要配置的预设 这里我们选择最基本的Belel，Router，Linter / Formatter预设和使用配置文件（将插件的配置保存在各自的配
2024最新：关于基于vue-cli脚手架创建vue项目（图文版）
最新发布
m0_69097184的博客
09-21 582
它确保各种构建工具与合理的默认值一起顺利运行，因此您可以专注于编写应用程序，而不是花费数天时间争论配置。同时，它仍然提供了调整每个工具配置的灵活性，而无需弹出。TypeScript 是一个 JavaScript 的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。代码风格检查和格式化（如：ESLint）【建议选择】vue-router（Vue 路由）【建议选择】。vuex（Vue 的状态管理模式）。E2E（端到端）测试。概述（来源于官方文档）
使用Vue脚手架的图形界面初次创建vue项目
Turbo码先生
10-22 799
这里写自定义目录标题使用Vue脚手架图形界面创建Vue项目创建Vue项目 使用Vue脚手架图形界面创建Vue项目 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 创建Vue项目 1、首先启动vue的图形界面， win + r ，打开cmd，输入vue ui，然后回车，浏览器就会打开vue脚手架的图形界面； 2、找到Vue项目管理器，选择指定的目录，点击在此创建新项目 3、填写项
Vue-脚手架-02-图形化界面创建项目
Echo
12-25 519
1、进入 cmd 界面 输入命令： vue ui 选择项目名称和文件位置 创建项目-预设 选择功能 选择 Vue版本 以及es标准 是否保存为模板 然后就进入了创建： 创建好了如下： 启动项目 启动好了，页面如下： ...
vue脚手架通过ui界面创建项目
sjx_feng的博客
03-26 265
我们vue脚手架提供了图形界面操作项目，比之前通过命令操作的形式更加简单，下面我就来总结一下图形界面创建项目的基本步骤 1、首先保证全局安装@vue/cli工具 ，没有自行下载 cnpm i @vue/cli -g 1 2、推荐下载yarn包管理器 cnpm i yarn -g 1 3、接下来我们就可以在自己的电脑里创建项目，找到电脑某个位置，在此文件夹按住shift同时右键，在此处打开cmd命令...
用VUE手动搭建脚手架《二》及图形化界面搭建脚手架
sunmeng_sunmeng的博客
10-30 446
因为webpack加载器默认只打包.js文件，可我们需要打包别的文件怎么办？结合上一篇文章，今天来写一下加载器loader。 ** 以下内容就是有关内容 ** less-load 可以打包 .less文件 sass-load 可以打包 .scss文件 url-loader 可以打包 css 中与url路径相关的文件 1.npm i style-loader css-loader -D （处理 cs...
Vue CLI基于图形化方式创建Vue项目
Yueqin0512的博客
12-07 383
文章目录npm换源成淘宝镜像图形化方式创建Vue项目基于图形化界面的方式，创建Vue项目Vue脚手架生成的项目结构分析Vue脚手架的自定式配置1.（不推荐）通过package.json配置项目2.（推荐）通过单独的配置文件配置项目 npm换源成淘宝镜像 由于node下载第三方依赖包是从国外服务器下载，虽然没有被墙，但是下载的速度是非常的缓慢且有可能会出现异常。在创建项目之前，建议把npm的镜像源替换成淘宝的镜像源 打开默认的npm（win+r），输入以下代码 npm install -g cnpm --
【Vue】使用Vue脚手架(vue-cli)构建Vue3项目
早睡早起长头发的博客
08-17 1993
一、利用cmd和vscode创建 二、利用cmd和webstorm创建
linux之vue（vue-cli）脚手架安装创建项目
qq_39940489的博客
07-04 1220
npm全称Node Package Manager 是一个基于Node.js 的包管理器，也是整个Node.js 社区最流行、支持的第三方模块最多的包管理器。webpack是javascript打包器（module bundler）即可在项目路径中找到刚刚创建的项目......
webstorm建立vue-cli脚手架的傻瓜式教程
10-14
在本文中，我们将深入探讨如何在WebStorm中创建Vue CLI脚手架，这是一个方便快捷的方法，可以帮助开发者快速启动一个新的Vue.js项目。Vue CLI是官方提供的一个命令行工具，用于简化项目初始化和设置过程，而WebStorm...
vue脚手架安装过程
01-29
vue脚手架安装过程,只是简单的介绍了vue-cli的安装过程
【Vue 系列】安装vue cli - 使用图形化界面创建新项目
贾斯丁的博客
06-16 470
官方文档 https://cli.vuejs.org/zh/guide/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过@vue/cli搭建交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 we...
vue脚手架、vue脚手架项目进行自定义配置、基于图形化界面自动安装element-ui
m0_46270297的博客
06-28 423
一、脚手架 // Vue脚手架，就是用于快速创建Vue项目的工具 // 全局安装 npm i -g @vue/cli // 检查是否安装成功 vue -V // 基于 图形化界面 的方式，创建新版 vue项目 // 1、打开终端 执行：npm ui // 2、创建项目 // 3、选择目录，点击在此创建新项目 // 4、输入项目名称，下面有个git远程仓库，可以取消，也可保留 // 5、预设，手动设置 // 6、选择安装的功能：babel、router、linter/formatter、最后一项 // 7、
vue脚手架通过ui界面方式创建项目
搬砖猴哥
06-13 6831
我们vue脚手架提供了图形界面操作项目，比之前通过命令操作的形式更加简单，下面我就来总结一下图形界面创建项目的基本步骤 1、首先保证全局安装@vue/cli工具 ，没有自行下载 cnpm i @vue/cli -g 2、推荐下载yarn包管理器 cnpm i yarn -g 3、接下来我们就可以在自己的电脑里创建项目，找到电脑某个位置，在此文件夹按住shift同时右键，在此处打开cmd命令窗口...
Vue脚手架---基于图形化界面的方式创建Vue项目
吃草の狼的博客
02-14 565
1.安装Vue脚手架 首先在终端中输入下面的命令来安装脚手架 npm i -g @vue/cli 2.打开浏览器面板 在终端中输入以下命令会进入到一个浏览器面板中 vue ui 界面就像这样： 3.创建项目 点击创建进入创建新项目页面 1.详情 输入项目文件夹名称，包管理器根据自身情况可以选择，初始化仓库选择开启，并输入init project 4.预设 第一次尽量选择手动 5.功能 推荐...
如何搭建一个vue项目（脚手架，可视化面板搭建）
weixin_45952434的博客
08-26 1677
如何搭建一个vue项目（脚手架，可视化面板搭建） 一.安装node 1.去node.js官网 https://nodejs.org/en/download/ 根据电脑系统选择下载node。 2.打开命令行输入node -v及npm -v检查node和npm的版本（没有输出说明安装失败）。 3.为了提高我们的效率，可以使用淘宝的镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org，同样可 以输入cnpm -v查看版本及是否安装成
【vue】安装vue3.X版本脚手架（图形化界面版）
舜岳的博客
08-13 6772
安装脚手架之前需要电脑已安装node与npm 首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口 或者 win + R 键 输入cmd 进入命令行窗口 输入 ：node -v 与 npm -v 查看有无安装node与npm，没有则需要安装：以下证明已安装 若没安装 以下是博友安装方法： https://blog.csdn.net/qq_33362864/artic...
vue 实现命令行界面_Vue脚手架Vue-cli(命令行和图形化初始化项目)
weixin_29131533的博客
12-24 646
一、Vue-cli安装vue-cli是vue官方提供的脚手架工具，默认搭建好了一个项目的基本架子，我们在其基础上进行相应修改即可。全局安装：npm install -g @vue/cli查看是否安装成功：二、命令行方式1、创建项目npm create '项目名 '2、手动选择配置选项我们这里选择手动方式。3、选择需要的依赖? Check the features needed for you...
vue脚手架图形工具创建项目
08-21
你可以使用 Vue CLI，它是一个图形化的脚手架工具，用于创建Vue.js项目。下面是使用Vue CLI创建项目的步骤： 1. 首先，确保你已经安装了Node.js。你可以在命令行中运行`node -v`来检查是否已安装。 2. 接下来，使用以下命令安装Vue CLI： ``` npm install -g @vue/cli ``` 3. 安装完成后，你可以使用以下命令创建新的Vue项目： ``` vue create 项目名 ``` 其中，`项目名`是你想要创建的项目名称。 4. 运行上述命令后，你将会看到一个交互式界面，询问你想使用的配置。你可以选择默认配置，也可以手动选择配置。 5. 确定配置后，Vue CLI将自动安装相关的依赖，并创建一个新的Vue项目。 6. 项目创建完成后，你可以进入项目目录并启动开发服务器： ``` cd 项目名 npm run serve ``` 这样就可以在本地开发环境下运行你的Vue项目了。 希望这能帮到你！如果有其他问题，请随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值