【Vue学习总结】1.Vue环境搭建、运行第一个项目

我们来搭建Vue的运行环境,并构建一个官方实例工程运行。

我们登录Vue的官网https://cn.vuejs.org,可以看到Vue的起步按钮,其三个特色也在首页进行了标明:

一、搭建Vue的开发环境

在使用Vue之前,我们首先要搭建Vue的环境,我们点击上面的“起步”按钮,进步基础教程页面:
【Vue学习总结】1.Vue环境搭建、运行第一个项目
我们点击左侧树形菜单的“安装”,进入Vue的安装教程页面,一般搭建Vue环境有两种模式,一种模式是“直接用 <script> 引入”(像第一篇我们写的两个例子一样),另一种方式是使用脚手架来搭建Vue环境,这里我们详细讲解一下第二种模式。

1、安装Node.js
因为搭建Vue的工具的命令行是需要Node.js支持的,所以我们首先要安装Node.js。安装Node服务组件的详细步骤见https://www.runoob.com/nodejs/nodejs-install-setup.html,这里不再赘述。
安装完成之后,在cmd窗口中输入“node –version”可以看到Node的版本时,Node环境就安装成功了:
【Vue学习总结】1.Vue环境搭建、运行第一个项目
注:随同NodeJS一起安装的还有一个NPM包管理工具,是后面我们构建环境需要的很重要的安装包工具。

2、安装Vue的命令行工具(脚手架工具)
Vue提供了一个官方的脚手架工具,这个工具可以快速搭建单页面应用的环境,通过这个脚手架工具构建出来的工程,带有热重载、保存时lint校验,以及生产环境可用的效果。

安装脚手架工具,我们需要用到npm,npm是JavaScript世界的包管理工具,并且是Node.js平台的默认包管理工具。通过npm可以安装、共享、分发代码,管理项目依赖关系。后端的同学,可以理解为npm像是maven一样。

打开cmd,通过以下指令下载Vue的脚手架工具:

npm install --global vue-cli

运行后我们可以看到在从远程仓库中下载Vue命令行工具
安装完成之后,我们就可以在cmd中使用Vue的命令了。

二、构建并运行一个项目

1、构建一个测试工程
然后我在E盘中设置了一个“vue-cli”的文件夹,准备在里面生成一个名为“vue-demo01”的vue项目,指令如下:

vue init webpack vue-demo01

在安装过程中,需要设置一些参数,如下:
【Vue学习总结】1.Vue环境搭建、运行第一个项目
前三个分别是定义即将构建的工程的名称、描述以及作者信息,然后提示是否安装vue-router,这里选择Y,这个具体是什么,我们后面来讲解。然后就是会否使用EsLint,它是一个语法检查工具,这里我们选择N,因为一旦我们输入语法有问题,它都会报错,在开发熟练的情况下,为了提高效率就不选择它。剩下的创建测试环境、测试运行等直接回车即可。

安装完毕之后,会在相应盘符下得到一个结构完整的工程样例,结构如下:
【Vue学习总结】1.Vue环境搭建、运行第一个项目

2、运行构建的工程
然后我们在命令行打开这个工程的目录,执行npm的run命令,这里运行模式为dev开发模式:

npm run dev

可以看到项目跑起来了,默认运行在8080端口。
我们在浏览器中输入“ http://localhost:8080”,即可查看到刚刚我们构建的样例工程的主页面:
【Vue学习总结】1.Vue环境搭建、运行第一个项目

这里我们使用代码编辑器(这里我用的是Hbuilder),打开工程的目录:
【Vue学习总结】1.Vue环境搭建、运行第一个项目
我们修改一下App.vue,在上面加上一句“你好!123”:
然后保存该文件,不用刷新刚刚的页面,写的字符就自动出现了:
【Vue学习总结】1.Vue环境搭建、运行第一个项目

至此我们完成了Vue环境的搭建,以及使用脚手架生成一个工程的操作。下一篇我们对生成的工程进行目录结构分析,进行一些基本语法的讲解。

发布者:小站,转转请注明出处:http://blog.gzcity.top/4675.html

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年7月6日 10:58
下一篇 2022年7月6日 15:05

相关推荐

  • WebLogic中间件任意命令执行漏洞。

    一、背景简介 Weblogic是一款商用中间件应用服务器产品,可以为应用程序提供运行访问环境。 二、漏洞详情 公开日期:2022-07-29漏洞编号:暂无危害等级:高危漏洞描述:由于没有过滤危险字符,导致攻击者可以对T3/IIOP接口发送恶意内容,执行任意命令。 三、影响版本 未知 四、处置情况 1.暴露在公网的WebLogic应配置对外禁用T3和IIOP,…

    2022年8月3日
    3.4K8720
  • 反编译获取微信小程序源码(包含错误解决办法)

    本文章仅用于分享自己反编译的过程以及解决办法,切勿小程序反编译成功后做一些违法事情! 一. 前言 微信小程序的反编译听起来很屌,其实非常简单,就是纯粹的傻瓜式的操作。GitHub有写好的node.js脚本!要想拿到微信小程序源码,找到源文件在手机存放的位置就行,源文件拿到,用反编译脚本跑一下,微信小程序代码包里的所有文件、资源就出来了。 二. 微信小程序的小…

    学习笔记 2022年11月15日
    936610
  • Pycharm激活码,Pycharm稳定专属激活码

    2018.2~2023版本用这个,下面激活码直接复制粘贴到activation code即可激活软件 FDXL1Y2811-eyJsaWNlbnNlSWQiOiJGRFhMMVkyODExIiwibGljZW5zZWVOYW1lIjoiQmVub2l0IE1lbmVuZGV6IiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbW…

    学习笔记 2023年4月13日
    1.9K870
  • OOM专题-String 和 StringBuilder的最大可用长度是多少

    String 直接量 超出 65535之后(127KB),IDEA 编译器会报错,因为 直接量是存储在常量池,常量池的定义规定中 有长度限制 2e16 。 String在运行期间的拼接后的最大长度是 int 的最大值 。 StringBuilder 长度是 int 的最大值 2e32 ,21亿 个字符,42亿字节 Byte= 大小4G。 超出长度的需要 用文…

    Java 2022年7月5日
    340360
  • There is insufficient memory for the Java Runtime Environment to continue.

    [TRACE-ID:] 2022-08-01 10:56:10.984 DEBUG [bootstrap,,,] 28396 — [ main] eEncryptablePropertySourcesPostProcessor [ 78] : Application Event Raised: ContextRefreshedEvent# The…

    2022年8月1日
    26630

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

评论列表(3条)