vue.js的安装步骤

1、首先需要安装node.js,去官网下载一个node.js的安装包,一路next就行,安装完后再cmd中输入node -v,如下图出现对应版本号就说明安装成功


2、npm包管理器,是集成在node中的,所以,直接输入 npm -v就会如下图所示,显示出npm的版本信息。


3、npm速度慢等原因可以安装淘宝的cnpm镜像,在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org,等待完成


完成之后,我们就可以用cnpm代替npm来安装依赖包了

4、创建项目,我都是把项目放在E盘下NodeJSProject的文件夹中的,于是先找到E盘,再定位到NodeJSProject文件夹

5、在指定文件夹目录下,在命令行中运行命令 vue init webpack secondVue 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中secondVue 是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中,如下图。


(我的电脑都不能直接按回车),安装完成后NodeJSProject文件夹中就会出现你的项目secondVue,如下图

这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装

6、要安装依赖包,首先cd到项目文件夹(firstVue文件夹),然后运行命令 cnpm install ,等待安装


我的每次都会卡在这里,不知道为什么,但是并不影响使用,安装完成后,secondVue文件夹中会多出一个node_modules的文件夹,安装完依赖包之后,就可以运行整个项目了。


7、运行项目

在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。


npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。
 
项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值