VUE CLI脚手架入门在线code实战操作步骤

最新推荐文章于 2023-11-16 20:38:27 发布
最新推荐文章于 2023-11-16 20:38:27 发布
阅读量2.4k 收藏
点赞数
分类专栏： 技术积累
原文链接：http://www.codeforest.cn/course/302?inviteCode=EGQE1
版权

进入http://www.codeforest.cn/course/302/的在线上机环境，打开桌面的命令行终端，使用命令查看环境是否支持vue，以及vue的版本号。操作命令如下：

vue --version

 版本是4.5.7，可以只用创建项目，使用操作命令

开始检出我们的代码，工作文件夹thago_work，打开我们的命令行控制终端，然后创建我们的项目：

 vue create my-app

运行测试

npm run serve

运行结果如图

文章来源：http://www.codeforest.cn/course/302?inviteCode=EGQE1

千年板蓝根
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Invitecode-website:invite通过邀请码享受您最喜欢的服务的折扣
04-29
Invite-code.com 所有邀请码都在正确的位置 :label: :money-mouth_face: :backhand_index_pointing_right: :gear: 怎么跑 安装 npm install bundler install 发展 npm run dev :label: 如何添加代码 新增公司 选择公司的唯一ID（例如acme ） 打开_data/companies.yml 将唯一的ID添加到all 在此示例的末尾，添加公司元数据 acme : # replace acme by the unique id name : ACME title : Get a 20 € in your ACME account color : ' #f4f4f4 ' # should match the theme color of the company guide : Create an account using this invite code and
14款优秀的代码展示网站
weixin_34167819的博客
06-25 1374
本文列出的这些网站可以分享和展示你的代码。它们都提供在线预览功能，所以别人可以看到你的代码如何运行。它们有时候也被称作“代码广场”或者“沙箱”。 它们不仅仅提供简单的代码展示功能，还提供很多代码协作和实际编程过程会用到的功能。例如，当你需要别人帮你调试源代码的时候，可以使用这些网站分享你有问题的代码，然后把链接分享给帮助你的人。这使得他们可以方便的查看你的源代码并提供解决方案。 1.CodeP...
（推荐）VS code在线工具——code-serve 在云服务器上的安装和使用 与常见的问题解决 (超详细)
WoeGod的博客
05-22 3万+
code-server是一款在线的vscode工具，可以使得我们通过浏览器就可以使用vscode，很好的解决了远程编辑服务器中文件的问题，方便好用。 code-server的地址为： https://github.com/cdr/code-server code-server官方指导给出了三种方法： Run over SSH Docker Binaries 在这里我们使用Binaries方法进...
在线代码编辑器code-server
wbsu2004的博客
05-02 8031
在任何地方的任何机器上运行 VS Code 并在浏览器中访问它。
在线代码编辑器CodePen和CodeSandbox
最新发布
EmotionComputer
11-16 379
如果你需要构建复杂的Web应用程序，并且需要更多的功能和工具支持，那么CodeSandbox可能是更好的选择。你也可以根据自己的喜好和习惯尝试两个平台，看哪个更符合你的工作流程和需求。社区和分享：CodePen拥有庞大的用户社区，用户可以轻松分享和发现其他用户的代码作品，也可以通过评论和喜欢与其他用户互动。功能：CodePen提供了一个集成的编辑器和预览窗口，可以轻松编写和展示前端代码。CodeSandbox提供了更多的功能，如自动保存、版本控制、调试工具等，使得开发更加便捷和高效。
vue-cli 使用vue-bus来全局控制的实例讲解
12-29
讲真，我写标题的时候不知道怎么写的好，之前写过一篇关于vue-bus的，不过是基础版本的，今天讲的是用脚手架来搭建的环境下的使用 与使用路由相似，我们需要先倒入这个vue-bus 指令如下： npm install vue-bus 导入...
vue3-source-code-reading-vue source code
03-24
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset 与Vue 2相比的变化 请查阅《 。 注意：IE11支持仍在等待中。 支持图书馆 我们所有的官方库和工具现在都支持...
vue3SourceCode-vue source code
03-24
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset 与Vue 2相比的变化 请查阅《 。 注意：IE11支持仍在等待中。 支持图书馆 我们所有的官方库和工具现在都支持...
vue-hap-tools：vue.js，快应用统一开发框架
03-03
vue-hap-tools基于快应用官方脚手架hap ，支持使用vue.js 2.x的语法及其开发方式来开发web与快应用程序，抹平快应用与vue.js开发的差异性，尽可能支持代码扩展程度。扩展支持vue.js的大部分常用特性，vue-router，...
vue3.0-resolve:solve解决vuejsvue-next源代码-vue source code
03-24
npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset 与Vue 2相比的变化 请查阅《 。 注意：IE11支持仍在等待中。 支持图书馆 我们所有的官方库和工具现在都支持...
code online-线上码-随时随地在线写代码，支持主流语言 go lua luajit php perl python ruby woo dotnet
weixin_45979656的博客
10-10 1462
code online-线上码-随时随地在线写代码，支持主流语言 go lua luajit php perl python ruby woo dotnet 目前支持大多数的脚本语言，和编译语言golang dotnet(C#) 》web在线编辑器：Code Online 线上码
5 个好用且免费的在线代码编辑器
web前端开发
08-20 2900
英文 |https://javascript.plainenglish.io/5-best-free-ides-on-the-internet-b5602d41bf68翻译 | 杨小二免...
Hack the box invited code（邀请码获取）
热门推荐
StriveBen的博客
03-15 4万+
0x00 Hack The Box 一个在线的渗透测试平台。 0x01 访问网址 https://www.hackthebox.eu/invite 0x02 打开console ，输入 makeInviteCode()后， 在post响应中获取到一串base64编码： 注意这里有的是 Va beqre gb trarengr gur vaivgr pbqr,...
vue开发问题——根据http code码排除网络请求的故障，axios示例
Lazy33的博客
01-10 1374
如何一步一步排查网络请求无法请求到res回执
vue-codemirror—基于vue的代码在线编辑
qq_45780380的博客
11-12 3万+
vue-codemirror—基于vue的代码在线编辑器 CodeMirror（下面简称为cm）是一款基于JavaScript、面向语言的前端代码编辑器。它支持开箱即用，自带了超过100种语言的库，同时还有很多附加功能，目前得到了jetbrains等公司的支持。在这个分类下，能够与cm并驾齐驱的另一个编辑器则是ACE。CodeMirror官网：https://codemirror.net/ 1. CodeMirror引入 在cm官网使用手册中，介绍了在项目中引入cm的方式。如果是传统项目，使用cdn或者
在线编程之Code-Server部署
qq_16674623的博客
07-31 1464
部署code-server并在平板中用浏览器敲代码与电脑同步应用背景、想法和场景背景想法应用场景前期准备服务器本地仓库 应用背景、想法和场景 背景 不知道有没有小伙伴和我有一样的感受，就是手上接了一些私活，然后经常要维护，或者说一天不敲代码浑身不舒服的情况（这里凡尔赛一下哈哈哈）。这样就容易造成一个麻烦，就是出门一直要带着电脑，不然就感觉心理慌慌的。因此，我就想了一些方法用向日葵连接自己的电脑（以前没上大学前没有电脑，经常改bug时候都是用手机连接VPS连的，不是云电脑！因为穷用不起云电脑的配置，那个速度能
发现一个可以通过浏览器在线打开桌面使用pycharm、vscode、eclipse、qtcreator的网站
千年板蓝根
09-28 623
本人编程技能菜的掉渣，知道发现可以通过浏览器打开桌面并且启动编程IDE的网站，我感觉从未有过的???????????????? 话不多说，先来看看他们是怎么通过浏览器打开编程工具的IDE的！！！！！来来来我们一步一步的去看看用的啥技术！ 打开网站代码森林：http://www.codeforest.cn 真实的硬件是怎么真实的呢》知道我使用学习了qt五子棋编程，c++的项目，来看一下我的效果 桌面是ubuntu的环境 还有人脸识别，哈哈apt试试还不错 转载注明出处来源：http:/
使用vue-cli构建一个项目并上传到GitHub，生成在线预览地址
weixin_42541725的博客
02-18 1094
使用vue-cli构建一个项目并上传到GitHub，生成在线预览地址
【Vue.js】vue用户登录功能
weixin_43655896的博客
02-05 6705
vue实现用户登录功能
vscode安装vue-cli脚手架
06-28
### 回答1： 1. 首先需要安装Node.js，可以在官网下载安装包进行安装。 2. 安装完成后，打开命令行工具，输入以下命令安装Vue CLI脚手架： ``` npm install -g @vue/cli ``` 3. 安装完成后，可以在命令行工具中输入以下命令创建一个新的Vue项目： ``` vue create my-project ``` 4. 等待安装完成后，可以在VS Code中打开该项目，开始开发Vue应用。 ### 回答2： VSCode是一款非常流行的代码编辑器，它提供了丰富的插件和扩展，可以帮助开发者更加高效地编写代码。而Vue-cli是Vue.js的官方脚手架工具，可以快速创建Vue.js应用程序。本文将介绍如何在VSCode中安装和使用Vue-cli脚手架。 1. 安装Node.js Vue-cli是一个基于Node.js的工具，因此需要先安装Node.js。可以在Node.js官网下载对应系统的安装包进行安装。 2. 安装Vue-cli 在安装Node.js完成后，使用npm工具全局安装Vue-cli。在命令行中输入以下命令： ``` npm install -g @vue/cli ``` 3. 创建Vue项目 在VSCode中打开一个新的终端窗口，输入以下命令创建一个新的Vue项目： ``` vue create my-project ``` 其中my-project是你要创建的项目名称，可以自行替换。 4. 运行项目 Vue-cli创建完成后，进入到项目目录下，使用以下命令运行项目： ``` cd my-project npm run serve ``` 5. 在VSCode中调试项目 在VSCode中打开创建的Vue项目文件夹，打开src/App.vue文件，进行代码编辑。在编辑过程中，可以通过调试工具进行调试。点击调试工具栏上的加号按钮，选择Vue.js，然后在.vscode/launch.json文件中设置Vue.js配置。完成设置后，点击开始调试，即可开始调试Vue项目。 总结：以上就是在VSCode中安装和使用Vue-cli脚手架的方法。通过这种方式，可以快速创建Vue.js应用程序，并在VSCode中进行编辑和调试。这种方法可以提高开发者的工作效率，是Vue.js开发的常用方式之一。 ### 回答3： VSCode是代码编辑器中的一款，它提供了许多方便的功能，让我们更加便捷地进行代码编写，Vue-cli是Vue的脚手架工具，用于快速搭建Vue项目。在VSCode中安装Vue-cli脚手架非常简单，下面是安装步骤： 1. 首先，你需要确保已经安装了Node.js环境，如果没有安装，可以到Node.js官网下载安装包进行安装。 2. 打开VSCode，在菜单栏中选择“终端-Terminal”，打开终端，在终端窗口中输入以下命令来安装Vue-cli： npm install -g @vue/cli 这个过程可能需要一些时间，请耐心等待。 3. 安装完成后，在终端中输入以下命令验证Vue-cli是否安装成功： vue -V 如果显示出版本信息，说明安装成功。 4. 当Vue-cli安装完成后，您可以通过新建Vue项目进行体验，输入以下命令： vue create my-project 其中“my-project”是您创建的项目名称，您也可以根据自己的需要来修改名称。 5. 在第四步中输入以上命令后，系统会自动下载各种依赖包和插件，这个过程可能需要一些时间，请耐心等待。 6. 当项目搭建完成后，您可以通过以下命令来启动项目： cd my-project npm run serve 其中“my-project”是您创建的项目名称。 7. 最后，您可以打开浏览器，浏览localhost:8080来查看您的Vue项目。 总之，在VSCode中安装Vue-cli脚手架是一件非常简单的事情，您只需要按照以上步骤一步一步操作即可。如果您在安装过程中出现了问题，请及时寻找相关的解决方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值