vue2项目 vue-cli脚手架的可视化创建以及命令行参数创建

已于 2023-09-14 22:16:34 修改
阅读量827 收藏 5
点赞数
分类专栏： vue2技能树 文章标签： vue.js javascript 前端
于 2023-06-25 21:33:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52003205/article/details/131385653
版权

目录

前提

nvm的安装，nvm调节node版本增删查改

1.vue-cli脚手架的可视化创建

2.命令行参数创建

---
👍  点赞，你的认可是我创作的动力！

⭐️  收藏，你的青睐是我努力的方向！

✏️  评论，你的意见是我进步的财富！

---

前提

需要确保node.js还有vue-cli的的存在

没有安装node.js可以点击下列教程去安装nvm进而安装node.js

tip:npm是Node.js默认的软件包管理系统,安装完毕node后，会默认安装好npm。

安装完node之后npm install -g @vue/cli

nvm的安装，nvm调节node版本增删查改

1.vue-cli脚手架的可视化创建

（切换到D盘然后创建项目比较好）

（这里教一种快捷方式打开cmd在路径中直接输入cmd然后回车就可以直接打开这个路径下的cmd ）

cmd输入 vue ui 打开图形化界面vue项目管理器（在项目创建和配置的过程中cmd不能关）（值得注意的可以去谷歌游览器上下载一个插件devtool游览器插件帮助分析vue.js程序）

 

 然后会自动弹出这个页面

图形化创建项目：

点击创建选择路径创建项目记得初始化git仓库（到时候git绑定仓库使用git进行版本管理）

 

vue2的项目预设选择vue2

 然后点击创建之后出现项目的仪表盘

然后安装插件vue-router

 点击搜索之后安装以下插件

配置Element-UI:在插件中安装，搜索vue-cli-plugin-element

配置Axios：在依赖中安装,搜索axios(运行依赖)

 一些基础的安装完了之后

找到你的文件夹然后用vscode打开

 然后就创建好了

运行的时候就是这样子运行 

运行之后启动app

然后页面就出来了

 打包的话就是在下一栏的bulid运行进行打包 

 

2.命令行参数创建

 上下选择回车确定，我这里直接选择了vue2

 

 进入目录然后运行

 然后运行后的页面就是

导入element ui

 选择全部导入别选按需导入，不然后面你做项目需要一个个导入组件太麻烦了

选择要加载的区域设置（使用箭头键）（作为一个前端 至少得有个nvm用于切换node版本 而不是简单的卸载安装）

如果出现这个问题的话

 项目package.json的配置太低，用最新版的node运行不起来
解决方式：
1.安装 node v12.13.1，nvm用于切换node版本
2.再重新拉取项目， 或者删除node_module

 

导入路由

云边散步
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解使用vue-cli脚手架初始化Vue项目下的项目结构
08-27
详解使用vue-cli脚手架初始化Vue项目下的项目结构 在本文中，我们将详细介绍使用vue-cli脚手架初始化Vue项目下的项目结构。vue-cli是Vue提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用...
图文讲解用vue-cli脚手架创建vue项目步骤
01-19
用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构。今天小编我便来记录一下vue-cli脚手架的构建项目的经验。 1、首先便是要搭建好vue-cli脚手架工具才行滴。搭建vue-cli脚手架工具的方法便是如图所示这样...
Vue2.0搭建脚手架（vue-cli）
Phils的博客
10-10 1万+
Vue2.0搭建脚手架（vue-cli）
vue脚手架vue-cli可视化安装与介绍看完觉得很简单！
qq_61950936的博客
08-23 1599
vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点：① 开箱即用② 基于 webpack③ 功能丰富且易于扩展④ 支持创建 vue2 和 vue3 的项目vue-cli 的中文官网首页：https://cli.vuejs.org/zh/✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！
Vue2学习——Vue CLI
最新发布
hhhjjj201830341的博客
05-04 733
使用Vue CLI快速创建一个工程
vue cli可视化
weixin_43617604的博客
03-31 1437
vue cli 可视化 点击此处跳转相关教程 首先要安装 vue/cli npm install -g @vue/cli 然后输入 输入命令：vue ui 2.创建 -> 选择项目地址 -> 点在此创建新项目 3勾选需求 下一步 4.手动 -> 下一步 -> 选择需要用的 -> 下一步 5.创建项目 -> 运行 -> 启动APP -> ...
Vue2脚手架搭建+项目基础依赖安装
什么都干的派森
12-07 584
使用方法可以参考这篇文章。使用方法可以参考这篇文章。使用方法可以参考这篇文章。
Vue可视化创建项目
future_1_的博客
06-17 2469
Vue项目可视化创建
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config ...
Vue学习计划-Vue2--VueCLi（二）vuecli脚手架创建的项目内部主要文件分析
我愿化作繁星
12-08 616
文件内除了容器标签，其他的什么标签页什么都没有，那么我们写的组件在哪里呢？一次类推，子组件也会有子组件，所以就形成了我们的组件树模式。作为一个根，渲染到容器中，其他的功能以组件的形式最终被放到。分析到此吧，下一节我们开始正式进入单文件组件内部的学习。属性内的内容会完全替换掉容器中的内容。我们创建的项目最后要部署是要执行。当我们执行打包命令的时候，脚手架。命令的，最终打包出来的文件就是。是因为我们整个的项目会把。也可以称之为所以组件的。会将我们写的代码打包成。的朋友，可以再看一下。文件是方便我们调试的。
vue-cli（vue脚手架）2.0 搭建项目超详细教程
TeroZhang的博客
05-17 1613
1.安装vue-cli ① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 ② 全局安装vue-cli，在cmd中输入命令: npm install --global vue-cli 安装成功： 安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安
Vue CLI 是如何实现的 -- 终端命令行工具篇
油墨香^-^的博客
02-02 1167
Preset 是什么呢？官方解释是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。},在 CLI 中允许使用本地的 preset 和远程的 preset。这四种prompt分别对应的是预设选项、自定义 feature 选择、具体 feature 选项和其它选项，它们之间存在互相关联、层层递进的关系。结合这四种prompt，就是 Vue CLI 展现开用户面前的所有交互了，其中也包含自定义配置的加载。** 如果在中选择了Manually，则会继续选择feature。
手把手教你使用Vue2脚手架——入门学习笔记（附代码）
Concise200的博客
02-26 5546
Vue 脚手架1. 初始化脚手架2. 脚手架文件结构分析3. ref属性4. props配置项5. mixin混入6. 插件7. scoped样式 Vue CLI是一个基于 Vue.js 进行快速开发的完整系统，通过 @vue/cli 实现的交互式的项目脚手架。 1. 初始化脚手架 1.首先（仅第一次执行）在终端执行npm install -g @vue/cli 全局安装@vue/cli。 2.切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx 3.执行命令npm run se
VUE2项目的搭建
weixin_42017221的博客
02-17 1245
搭建项目时，需要确认电脑上是否有与如何确认电脑上是否存在npm与node呢？按住win+r输入cmd打开命令提示符输入node -v 与-v来确认是否有安装。
用脚手架新建一个vue2的项目
sinat_34896766的博客
01-05 1002
2、在项目新建路径的外层文件夹下打开cmd，输入vue create 项目名(需要安装node，node安装完成后，可用node -v查看安装版本。项目名不能包含大写母，否则会提示以下错误。注意此时的v是大写的V。
vue-cli 脚手架搭建一个web 端项目( vue 2 )
weixin_50339217的博客
01-18 1099
使用 vue-cli 脚手架搭建一个web 端的 vue2 项目
如何可视化的创建Vue项目
weixin_45657411的博客
10-14 1330
如何可视化的创建Vue项目
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
热门推荐
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
安装vue脚手架，vue常用命令
weixin_53574739的博客
02-07 984
注意！创建vue项目时文件夹内容要为空不然无法创建 cmd切换盘符：E：回车。 切换淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 更新npm版本：npm install -g npm 1、安装vue2脚手架 （1）、在cmd命令行中输入脚手架安装命令； （2）、全局安装vue脚手架：npm install -g vue-cli 或者指定版本：npm i vue-cli@2.9.6 -g； （3）、安装以后，输入：vue
vue -v查不到版本号
10-22
当你在命令行中输入"vue -v"时，如果提示"'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件"，那么很可能是因为你没有全局安装Vue CLI。你可以通过以下步骤来安装Vue CLI并查看版本号： 1. 打开命令行工具（如cmd或终端）； 2. 输入命令"npm install -g vue-cli"，等待安装完成； 3. 输入命令"vue -v"，即可查看Vue CLI的版本号。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值