vue.js的安装方法

一.导言

Vue.js是什么

Vue.js(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue采用自下而上的增量开发设计。Vue的核心库只关注视图层，很容易学习并与其他库或现有项目集成。另一方面，Vue完全能够驱动使用Vue生态系统支持的单文件组件和库开发的复杂单页应用程序。

Vue.js的目标是通过尽可能简单的API实现响应和组合视图组件的数据绑定。

Vue.js是MVVM模式的框架。如果读者有角度经验，他们将能够很快开始使用Vue

vue.js :的特点

易用性：你学过HTML、CSS和JavaScript吗？立即阅读指南，开始构建应用程序！

灵活性：简单紧凑的内核，先进的技术堆栈，足以满足任何规模的应用。

高效：运行大小16kb min gzip，超快虚拟DOM，最省心优化

二、环境建设

Vue推荐开发环境：

Node.js: javascript运行时，不同的系统直接运行各种编程语言

npm: Nodejs下的包管理器。由于npm在中国的使用会比较慢，建议使用淘宝NPM形象(http://npm.taobao.org/)

$ NPM install-g cnpm-registry=https://registry . NPM .淘宝. org

web pack k :的主要目的是通过CommonJS的语法准备所有需要在浏览器端发布的静态资源，比如合并和打包资源。

用户生成的Vue项目模板

第三，安装node.js

从node.js官网下载安装node。安装过程非常简单，可以一直进行到下一步(傻瓜安装)。安装完成后，打开命令行工具并输入node -v，如下所示。如果出现相应的版本号，则安装成功。

npm包管理器集成在节点中，直接输入npm -v会显示npm的版本信息，如下图所示。

好的！节点环境已经安装，npm包管理器已经安装。因为一些npm资源被屏蔽或者因为国外的资源，用npm安装依赖包经常会失败，所以我需要npm - cnpm的国内形象。

安装cnpm

在命令行上，输入npminstall-gcnpm-registry=http://registry.npm.taobao.org，然后等待。安装完成，如下所示。

之后，我们可以用cnpm代替npm来安装依赖包。如果你想了解更多关于cnpm的信息，可以查看淘宝npm镜像官网。

安装vue-cli脚手架搭建工具

在命令行上运行命令npm install -g vue-cli，并等待安装完成。通过以上三个部分，我们需要准备的环境和工具都准备好了，然后我们开始使用vue-cli构建项目。

要使用vue-cli构建项目，我们必须首先选择目录，然后在命令行中将目录转移到所选目录。在这里，我选择了桌面来存储新的项目，所以我们需要先将目录cd到桌面上，如下图所示。

在桌面目录下，在命令行上运行命令vue init webpack firstVue。解释这个命令，意思是初始化一个项目，其中webpack是构建工具，也就是说整个项目都是基于webpack的。FirstVue是整个项目文件夹的名称，会在你指定的目录下自动生成(在我的情况下，会在桌面上生成)，如下图所示。

运行初始化命令时，让用户输入几个基本选项，如项目名称、描述、作者等信息。如果不想填写，默认按回车即可。

打开firstVue文件夹，项目文件如下所示。

这是整个项目的目录结构，其中我们主要对src目录进行修改。这个项目只是一个结构框架，整个项目所需的依赖资源还没有安装，如下图所示。

要安装项目所需的依赖项，首先将cd刻录到项目文件夹(firstVue文件夹)，然后运行命令cnpm install等待安装。

安装完成后，在我们项目目录的firstVue文件夹中会有一个额外的node_modules文件夹，我们项目所需的依赖包资源就在这个文件夹中。

安装依赖包后，可以运行整个项目。

在项目目录中运行项目，并运行命令npm run dev，它将以热加载的方式运行我们的应用程序。热加载让我们可以实时看到修改后的效果，无需在修改代码后手动刷新浏览器。

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

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。