使用Vue ui (可视化)创建Vue项目

您所在的位置:网站首页 为什么前端都用vue 使用Vue ui (可视化)创建Vue项目

使用Vue ui (可视化)创建Vue项目

2024-07-12 16:18| 来源: 网络整理| 查看: 265

使用Vue ui (可视化)创建Vue项目

首先打开电脑硬盘上随便一个文件夹 我这里是用E盘做的演示 在这里插入图片描述 打开E盘后,输入cmd(我这里是E盘根目录,如果不想用根目录可以新建文件夹) 在这里插入图片描述 cmd的位置,当然要是新建文件夹后,cmd也是在这里输入 输入好cmd以后会弹出一个终端 在这里插入图片描述 在终端上输入 vue ui 在这里插入图片描述 如果敲了回车不生效 在这里插入图片描述 不要着急我来教你解决 先Vue -h检查一下 在这里插入图片描述 此时Commands中少了一个ui的相关信息 在控制面板中运行一下两行命令:

npm uninstall vue-cli -g //卸载老版本 npm install @vue/cli -g //安装新版本

操作完成以后再一次的vue -h检查一下,此时你会发现Commands中多了一个ui的相关信息 在这里插入图片描述 接下来回到我们创建项目的那个控制面板中输入 vue ui命令 在这里插入图片描述 成功了,我们成功解决vue ui失效 接下来会自动弹出一个页面 在这里插入图片描述

点击创建

在这里插入图片描述 这就是创建项目的面板(带领大家认识一下) 在这里插入图片描述

项目文件夹:说白了就是你项目叫什么名字,这里建议大家都起全英文的名字紧挨着的就是项目的存放路径包管理器:不用管,默认就好更多选项:一般也不用管覆盖提交信息(选填):我们在这里填一下 init project 以下是我填完的(仅供参考)填完以后,点击下一步 在这里插入图片描述 会进入到预设这个面板 在这里插入图片描述 选择一套预设(我点击的是手动添加预设,都可以点击,为了详细教学我选择手动添加)点击下一步 在这里插入图片描述 会进入到功能这个面板 在这里插入图片描述 简单理解为就是你在项目中用到的东西 在这里插入图片描述 在这里我选择了三个(如果项目中用到VueX就选上,没用到可以暂时不选) Router:Vue中的路由 Linter/Formatter:可以让你的代码写的更严谨一些,通常是用来做报错提醒的 使用配置文件:将插件的配置保存在各自的配置文件中 点击下一步 会进入到配置面板 在这里插入图片描述 Choose a version of Vue.js that you want to start the project with: 你想用Vue的那个版本,这个就看大家的需求了(在这里我选择的是Vue2) Use history mode for router? :就默认让它关闭就可以 Pick a linter / formatter config::代码的书写风格(我们建议选择第三个。 ESLint + Standard config) Pick additional lint features: 一般不用管(或者两个都选择,看个人情况吧) 点击创建项目 在这里插入图片描述

会弹出一个保存为新的预设(给他起个名字就行)点击保存预设并创建项目,等待一会就可以了。 在这里插入图片描述 当项目创建成功并提示后,打开我们创建项目的文件夹,看一下 E盘根目录,确实有了我们创建的项目 在这里插入图片描述 再打开可视化面板(以下就是项目创建成功后的可视化面板) 在这里插入图片描述 可以在插件,依赖中下载你想用到的,就可以了

运行项目

在这里插入图片描述 第四步:启动app,就可以看到你新建的项目页面 在这里插入图片描述 以上就是用Vue ui(可视化)创建项目的大体步骤,欢迎各位大佬学习指导!



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3