快速创建Vue的第一个项目

什么是Vue?

Vue.js是一个渐进式javascript框架,渐进式就是由浅入深、由简单到复杂的方式去使用Vue.js。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。与此同时,Vue、 React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star。

创建Vue项目的工具

Visual Studio Code


Visual Studio Code(简称“VS Code” )是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代Web和云应用的跨平台源代码编辑器, 可在桌面上运行,并且可用于Windows,macOS和Linux。它具有对JavaScript,TypeScript和Node.js​的内置支持 ,也是一款免费的跨平台代码编辑器,支持多种编程语言和框架,包括JavaScript、TypeScript、Python、C#等。它具有智能感知、调试、 Git 版本控制、插件扩展等丰富的功能,并提供了用户友好的界面和高效的工作流程。Visual Studio Code可以用于开发Web应用程序、桌面应用程序、移动应用程序等,也可作为普通文本编辑器使用。由于其轻量级、快速、易扩展的特点,Visual Studio Code已成为开发者们喜爱的工具之一。

没有安装的也可点击连接到官网下载:Visual Studio Code - Code Editing. Redefinedicon-default.png?t=N7T8https://code.visualstudio.com/

Node.js

Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好,V8引擎执行Javascript的速度非常快,性能非常好,基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。没有安装的也可点击连接到官网下载:Node.Js中文网 (p2hp.com)icon-default.png?t=N7T8https://nodejs.p2hp.com/

创建项目前的准备

检验Node的安装情况

检查Node是否安装成功,并查看版本号:按住电脑的win+R键盘,调出终端控制台,输入命令行:node -vnode --version,如果能出现以下界面,即代码node安装成功。

vue cli 脚手架的安装

 通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本,如果不写,则下载最新版本

npm install -g @vue/cli

PS:如果使用npm方式安装脚手架速度太慢,或者是卡死的话,可以选择淘宝镜像cnpm的方式安装:

安装淘宝镜像的命令行

①  npm install -g cnpm --registry=https://registry.npmmirror.com

如果安装了cnpm淘宝镜像的话,可使用下面的命令行安装@vue/cli脚手架,网速会相对来说快一些

 ②  cnpm install -g @vue/cli

如果能出现以下界面,即代码vue cli 脚手架安装成功。

项目的创建

为了怕大家第一次创建找不到项目,我们在桌面创建一个新的文件夹Vue,再从Vue中打开cmd命令框

vue create 命令创建项目

helloworld 是项目名,可自行定义          

1.创建项目命令行   vue create helloworld  然后回车

2.问你是否选中该路径快速创建项目选择YES

3.不选择Vue3和Vue2,选择第三个Manually select features

4.再选择第一个和第四个以及第六个

5.再选择2.X

6.再选择如下,问我们是否保存选择YSE

7.如下图,即创建项目成功

小结

今天我们学习了快速创建Vue项目相信大家看完有一定的收获。种一棵树的最好时间是十年前,其次是现在! 把握好当下,合理利用时间努力奋斗,相信大家一定会实现自己的目标!加油!创作不易,辛苦各位小伙伴们动动小手,三连一波!!本文中也有不足之处,欢迎各位随时私信点评指正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值