大川渝读者博客
当前位置: WEB技术 > 教程大全 > vue.js安装步骤教程

vue.js安装步骤教程

2020-09-05 分类:教程大全 作者:大川渝读者博主 阅读(61)

1.安装node.js

从node.js官网下载并安装node

 -1

安装过程很简单,一直点下一步就ok了。

1.1我们通过打开命令行工具(win+R)输入node -v查看node的版本,若出现相应的版本号说明你安装成功了

 -2

切换盘符指定安装路线

 -3

1.2.npm包管理器,是集成在node中的,所以安装了node也就有了npm直接输入 npm -v 命令,显示npm的版本信息。

 -4

现在node环境已经安装完成了,npm包管理器也有了,听说由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm(淘宝的镜像)

2.安装cnpm

在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然后等待,没报错表示安装成功,(我的已经安装过了,显示更新成功的信息),如下图:

 -5

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

3.安装vue-cli脚手架构建工具

在命令行运行命令npm install -g vue-cli 然后等待安装完成。如下图:

npm install @vue/cli @vue/cli-init -g

 -6

通过以上三个步骤,我们所需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

首先我们要选择存放项目的位置(在这里我就进入E盘了,你也可以进入其他盘符来创建)用DOS命令e:先进到我的E盘,再输入dir查看所有E盘中所有的文件及文件夹(可以看到现在E盘并没有NodeDemo这个文件夹)

 -7

2.接下来我们开始新建一个文件夹,(在这里我就把创建的NodeDemo文件夹放在E盘了,你也可以选择其他盘符来存放demo)输入md NodeDemo然后按回车键,注意md后面有一个空格。然后可以用dir查看一下文件夹是否创建完成:如下图(我已创建好了)

 -8

3.然后再用cd命令将目录转到选定的目录:如下图

 -9

在NodeDemo目录下,在命令行中运行命令 vue init webpack firstApp。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在NodeDemo 目录生成该文件夹),

运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了如下图:

 -10

等待一会,就会显示创建项目创建成功,如下图

 -11

接下来,我们去看NodeDemo目录下去看是否已创建文件:

 -12

打开firstApp项目,项目中的目录如下:

 -13

介绍一下目录及其作用:

build:最终发布的代码的存放位置。

config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。

node_modules:npm 加载的项目依赖模块(整个项目需要的依赖资源)

src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:

assets:放置一些图片,如logo等

components:目录里放的是一个组件文件,可以不用。

App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。

main.js :项目的核心文件

static:静态资源目录,如图片、字体等。

test:初始测试目录,可删除

.XXXX文件:配置文件。

index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。

package.json:项目配置文件。

README.md:项目的说明文件。

这就是整个项目的目录结构,其中,我们主要在src目录中做修改。

(第一次创建vue项目的话 好像node_modules这个依赖包资源就会没有,反正没有的话就cnpm install 安装一下依赖就好了)我这个项目现在创建完就有 node_modules这个依赖包资源文件夹了就不用 再cnpm install 安装依赖包资源。

安装项目所需要的依赖先cd 进入到firstApp文件夹先

 -14

然后:执行 cnpm install (这里可以用cnpm代替npm了)

 -15

安装完成之后,我们到自己的项目中去看,(如果没有的话)会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。

 -16

安装完依赖包资源后,我们就可以运行整个项目了。运行项目前一定要确保依赖包资源存在

运行项目

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

项目启动后,在浏览器中输入项目启动后的地址:localhost:8080

 -17

在浏览器中会出现vue的logo:

 -18

「大川渝读者网站“说明”,如果觉得本站文章对您有用,欢迎赞助购本站永久VIP本站成长!」

>>文件解压密码:(注意要小写以及前后无空格)

------------------------------------------------

解压密码: www.dcydz.com   

------------------------------------------------

>> 免责声明:

--------------------------------------------------------------------------------------

本文件均是收集整理自网络,作为学习交流使用,不可用于任何商业途径。

如非免费资源,请在试用之后24小时内立即删除。

使用前请您先阅读以下条款,否则请勿使用本站提供的文件!

1) 本站不能绝对保证所提供软件或程序的完整性和安全性。

2) 请务必在使用前查毒 (这也是您使用其它网络资源所必须注意的)

3) 近来部分国产软件、汉化安装程序捆绑流氓插件,请在安装过程谨慎点击每一个下一步。

4) 由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。

5) 本站提供的文件均为网上搜集,如涉及或侵害到您的版权请立即通知我们撤下。

---------------------------------------------------------------------------------------

「壹年博客,如果觉得本站文章对您有用,欢迎打赏帮助本站成长」

赞(0) 打赏

如果本文对你有所帮助,欢迎打赏¥:$$就足够感动我:).

支付宝
微信
0

如果本文对你有所帮助,欢迎打赏¥:$$就足够感动我:).

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 - vue.js安装步骤教程

博客简介

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 476 篇
  • 草稿数目: 2 篇
  • 分类数目: 15 个
  • 独立页面: 11 个
  • 评论总数: 65 条
  • 链接总数: 6 个
  • 标签总数: 2068 个
  • 注册用户: 567 人
  • 访问总量: 8660505 次
  • 最近更新: 2020年9月27日
           

赞助购本站终身VIP邀请码:

     
扫码赞助购:( $ _ $ ) 9.9元~庆国庆特惠~

温馨提示:

    已微信或者支付宝赞助购本站终身VIP的用户,
    请添加微信:Mojietou 或者 QQ: 405056000
    发送支您已付成功订单截图获取注册邀请码!

   

服务热线:
 181XXXX8010

 QQ在线交流

 旺旺在线