vue初学--4新建一个vue项目（vue ui）

最新推荐文章于 2024-12-15 01:19:51 发布
原创 最新推荐文章于 2024-12-15 01:19:51 发布 · 249 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文档详细介绍了如何在Windows环境下使用vue ui创建一个新的vue项目。从打开可视化管理工具开始，逐步指导设置项目名称、选择手动配置、挑选所需功能如babel、router、vuex，启用history模式，并最终运行服务器，查看项目启动页面。

1.在Windows powershell打开vue的可视化管理工具
vue ui是@vue/clie3.0以上版本增加的一个可视化项目管理工具
在这里插入图片描述
2.点击创建项目，项目名称为college-science-vue（自己定义），然后点击下一步
在这里插入图片描述
在这里插入图片描述
3.选择手动配置，然后点击下一步
在这里插入图片描述
4.选择功能 babel、router、vuex ，然后点击下一步
在这里插入图片描述
5.选择use history mode for router，然后点击创建项目
在这里插入图片描述
6.选择创建项目，不保存预设
在这里插入图片描述
7.最后自动加载，创建项目
在这里插入图片描述
在这里插入图片描述
8.点击任务，选择server，点击运行，查看一下输出
在这里插入图片描述
在这里插入图片描述
9.点击http://localhost:8080/ 查看初始页面
在这里插入图片描述

标签
#vue
Yannis111
关注
Vue和Element UI项目搭建
YQCC1的博客
12-28 2253
一、项目搭建1.创建一个SPA项目2.安装 Element-UI3.导入组件4.创建登陆注册界面登录组件---Login.vue注册组件---Register.vue定义组件与路由的对应关系效果演示： 二、前后端数据交互1.安装axios2.导入api模块，添加axios的全局配置3.修改main.js配置vue-axios4.数据表数据5.编写后端登录注册controller层6.使用封装后的axios发送请求7.测试可观看下面这篇博文Vue安装并使用Vue-CLI构建SPA项目并实现路由-CSDN博客创
如何快速搭建一个完整的vue2+element-ui的项目
qq_33449702的博客
03-20 2713
如何快速搭建一个完整的vue2+ element-ui项目
【搭建vue项目】
rained_007的博客
05-19 283
文章目录一.下载并安装node.js1.node.js下载2.安装二.配置环境变量1.打开电脑的系统信息选择高级系统设置2.在弹出的对话框中点击环境变量3.在系统变量里找到path然后双击打开或点击编辑4.找到node.js的安装位置，将路径复制5.在编辑环境变量对话框中点击新建，将刚复制到的路径粘贴上，点击确定三.安装npm 一.下载并安装node.js 1.node.js下载 下载地址：http://nodejs.cn/download/ 这里根据自己操作系统选择对应的安装包下载 我这儿就用Win
Vue-CLI 4 搭建Vue项目
God-Excious的博客
09-21 3189
文章目录一、Node.js安装二、Vue-Cli安装三、Vue项目创建1、项目创建2、项目依赖导入2.1 vue-router（路由）3、项目配置3.1 router.js（路由配置）4、测试效果 一、Node.js安装 到Node.js官网（https://nodejs.org/zh-cn/）上，下载并安装Node.js，选择【长期维护版】即可 使用安装包安装，选择安装路径可以根据自己的需要改一下（比如我安装在了D:\Environment\nodejs\目录下）。 这个Necessary Tools
如何使用Vue的ui界面创建一个新项目
我们的目标是星辰大海！
10-26 1482
使用Vue的ui界面创建一个新项目
Windows PowerShell安装指定版本vue/cli脚手架失效解决办法；vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue
i_am_a_div的博客
05-18 2464
打开Windows PowerShell 1.安装vue/cli npm install -g @vue/cli@3.12.0 @后面是版本号 2.安装完成后查看 使用过 vue -V 查看vue/cli版本号 （如果查看找不到版本，使用命令行创建项目vue create my-demo也无效，那就需要用管理员方式打开Windows PowerShell，详见步骤3） （在用脚手架搭建vue项目时，提示：无法加载文件C:\Users\1111111\AppData\Roaming\npm\vu
Windows11配置VUE开发环境
源代码杀手的博客
04-07 2424
在 Vue CLI 3 之前，Vue CLI 的包名称为 vue-cli。总之，通过执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令，您可以全局安装 cnpm，并且使用淘宝的 npm 镜像源来加速 npm 包的安装过程。总之，尽管可以使用 --force 参数来强制安装旧版本的 Vue CLI，但推荐使用 npm install -g @vue/cli 来安装最新版本的 Vue CLI，以获得更好的功能和支持。
vue如何新建一个项目（超详细哦）
热门推荐
chen13333336677的博客
09-06 2万+
一、安装node环境与npm 1、首先：先从https://nodejs.org/en/中下载node.js 2、配置环境变量（注意区别用户变量与系统变量） （1）用户变量：D:\Develop\nodejs\node_modules （2）系统变量：D:\Develop\nodejs;D:\Develop\nodejs\node_global 3、检查是否安装成功：如果输出版本号，说明我们安...
面向开发人员 的终极 VueJS 资源
码上全栈创享家官方号，小红书、公众号、抖音、b站，youtube等同名，欢迎各位码农一起来学习！
05-06 2727
在 10 小时内构建 10 个项目 使用 Vue 3 组合 API - 设置、传送、反应和引用 Vue 3 教程将从非常基础的内容开始，通过构建 10 个不同的应用程序，教您如何在 10 个小时的完整课程中将 TensorFlow 和 firebase 与您的 Vuejs 一起使用。它是从头开始设计的，根据您的目标，可以很容易地成为一个库和一个框架。VueJS 示例，顾名思义，它是示例的集合，例如简单且可自定义的步骤进度指示器、Vue 汽车贷款计算器、通知/Toast 组件等使用 VueJS 制作的项目。
Vue开发环境搭建及在docs新建vue项目
xw_009的博客
03-10 2万+
参考： https://www.cnblogs.com/winter92/p/7117057.html （写在开头的废话：相信很多人在学习vue这个框架时，最开始搭建开发环境，容易遇到一些大大小小的坑，我作为菜鸟本鸟身受其扰，一度觉得这篇博客可能写不到结尾了，还好顺利完结，就是多花了些时间。为了避免看到这篇博客的朋友和我之前一样伤脑筋，我就尽可能写详细了。现在竟然觉得写博客有点上头，今天连晚饭都不...
vue-cli@4搭建 vue + element-ui 项目实操
huzhenv5的博客
01-16 1万+
本文用来记录如何通过vue-cli4来搭建一个element的项目，以及中间碰到的一些问题的处理方法 一，搭建步骤 1. 安装node 安装步骤自行百度，确认node环境变量已经配置好，node和npm指令可正常使用 2. 全局安装vue-cli 安装最新版本的vue-cli npm install -g @vue/cli 安装成功后，就可以使用vue命令了，使用vue --version可以查...
vue如何新建一个项目
weixin_42570389的博客
12-11 6352
身为入行未深的小白前端，不断的学习是我们不可丢失的习惯。前端流行的框架也是层出不穷，vue在众多框架中脱颖而出。今天花了两个小时的时间自己走了一边创建vue项目的流程，跟你们分享。 1：打开cmd命令行，首先安装node 步骤：https://nodejs.org/en/download/ node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。 2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本...
vue新建一个项目
weixin_46686024的博客
08-31 6301
nodejs.cn的安装 判断是否安装好 node -v（检查版本号） npm -v （检查是否安装npm） npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org（如果没有安装淘宝镜像，后面的吗命令把cnpm换成npm） 创建vue项目 1、cnpm install -g @vue/cli 2、vue create my-project 按键盘上下键选择默认（default）还是手动（Manually），如果选择defa
vue利用vue ui命令创建项目
糖长老莫小贝的博客
03-07 2万+
vue的官方脚手架是vue-cli，但它已经很久没有大版本更新了，最近发布的vue-cli 3.x ，新增的功能是非常强大的。 一、安装 npm install -g @vue/cli ps:建议使用cnpm，mac的朋友们记得加上sudo 二、启动服务 注意，vue-cli 3.x已经收归到vue项目下了，所以，直接输入 vue -h 可以看到： 此时我们运行命令 vue ui , 就会启动...
使用VUE项目管理器新建一个VUE项目
ryan55的博客
03-18 5740
Vue-cli3使用VUE项目管理器新建一个项目 前端技术栈：Vue,Vue-Router,Element-UI,Axios,Echarts Vue-cli3脚手架安装 1.安装node.js 到官网选择对应版本下载link，然后无脑安装 2.安装淘宝镜像 打开命令行窗口 输入npm install -g cnpm --registry=https://registry.npm.taobao.or...
webstorm创建vue项目
菜鸟成长之路-wei的博客
06-01 9405
步骤 webstorm新建空项目project1 控制台输入vue create supermall 然后相关设置 gitee创建一个supermalll的仓库
vue初学——编写第一个页面
copple的专栏
02-27 1万+
前面介绍了如何新建vue工程vscode新建vue工程，这篇就介绍如何编写自己的第一个页面 开始之前，先介绍下vue工程的目录结构 build 项目构建(webpack)相关代码 config 项目相关配置，配置端口信息等 node_modules 项目依赖等 src>assets 放置一些图片 如项目的logo、icons src>conponents 项目的一些组件，如自定义组件 src>router 路由 src>App.vue 项目入口 src>main.js 项
从零开始新建一个vue项目
最新发布
m0_71439861的博客
12-15 2632
要创建一个Vue项目，您可以使用Vue CLI（命令行界面）或Vite（新一代前端构建工具）。
创建一个完整的vue2项目（全网最详细【导入框架，新建页面】）
qq_22841387的博客
04-26 5016
创建一个完整的vue2 1.安装npm 官方安装地址 然后一直无脑next即可，如需要可以选择安装路径 安装之后检查一下 win+R快捷键打开运行窗口—输入cmd 查看版本号 命令： node -v npm -v 一般情况下node自带npm，但可能不是最新版本的npm 2.使用淘宝NPM镜像 命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 这样我们就可以直接用cnpm来安装模块了 3.项目初始化 ①安装
VsCode新建VueJs项目
陈年雪菜粥
06-22 2万+
使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 安装vue-cli之前，需要先安装了vue和webpack )· node -v //(版本低引起：bash: npm: command not found) · npm -v //以上帮助检查是否安装 node npm · 输入vue，//测试vue是否安装成功 · 输入vue
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值