欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

详解vue.js三种安装方式

时间:2020-06-23|栏目:JavaScript|点击:

详解vue.js三种安装方式

详解vue.js三种方式安装

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

下面介绍三种 Vue.js 的安装方法:

1.独立版本

我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。-> <script src = ../vue.js> </script> 开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用)

2.使用CDN方法

unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js,

如(<script src=http://www.php.cn/"https:/cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>)

3.NPM方法(推荐使用)

在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

首先,先列出我们接下来需要的东西:

node.js环境(npm包管理器)

vue-cli 脚手架构建工具

cnpm npm的淘宝镜像

1) 安装node.js

从node.js官网下载并安装node,安装过程很简单,一直点下一步就ok了,安装完之后,我们通过打开命令行工具(win+R),输入

node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。

详解vue.js三种安装方式

详解vue.js三种安装方式

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

详解vue.js三种安装方式

详解vue.js三种安装方式

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

2) 安装cnpm

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

详解vue.js三种安装方式

详解vue.js三种安装方式

完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。

3) 安装vue-cli 脚手架构建工具(必须在全局中进行安装)

在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。

是否安装成功:vue -V

webpack的版本查询:webpack -v

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

首先我们要选择存放项目的位置,然后再用命令行cd到项目的目录中,在这里,我选择在c盘下创建新的目录(NodeTest 目录),用cd 将目录切到该目录下,如下图:

详解vue.js三种安装方式

详解vue.js三种安装方式

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

若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中:vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包:

详解vue.js三种安装方式

是否是在本目录下进行创建

详解vue.js三种安装方式

输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写就可以了。

Project name :项目名称 ,如果不需要更改直接回车就可以了。注意:这里不能使用大写,所以我把名称改成了vueclitest

Project description:项目描述,默认为A Vue.js project,直接回车,不用编写。

Author:作者,如果你有配置git的作者,他会读取。

Install vue-router? 是否安装vue的路由插件,我们这里需要安装,所以选择Y

上一篇:必须知道的高性能Javascript知识

栏    目:JavaScript

下一篇:vue.js实现照片放大功能

本文标题:详解vue.js三种安装方式

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/2076.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7