Vuex 安装

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。首先我们来了解一下Vuex的安装，后面我们再继续具体讲解什么是Vuex。

下载安装

Vuex 有三种安装方式，下面我们一起来看一下：

直接下载

我们可以直接下载vuex的文件，链接地址：https://unpkg.com/vuex。这个链接会一直指向 NPM 上发布的最新版本，目前的版本为vuex v3.1.2。

或者我们还可以根据自己的需要来指定版本，直接在链接后面加上版本号，这样访问的就是制定版本的文件了。例如：https://unpkg.com/[email protected]。

将下载好的vuex.js放至本地项目中，然后我们可以在页面中，通过如下方式引入 ：

使用NPM安装

我们还可以使用npm包管理工具来安装 Vuex，命令格式如下所示：

npm install vuex --save

在命令中加上-save是因为这个包需要在生产环境中使用。

示例：

使用Yarn安装

我们还可以使用Yarn的方式来安装Vuex：

yarn add vuex

在使用yarn之前，需要先在系统中安装yarn，在Yarn 中文网可以找到 window 下的三种安装方法，或者可以npm 来安装yarn，命令如下所示：

npm install -g yarn

示例：

创建一个Vue项目

我们可以先创建一个Vue项目，然后在Vue项目中安装Vuex。

• 首先确认本机中node和 npm 环境是否已经安装配置完成，Node.js下载地址：https://nodejs.org/en/。

  这里下载安装步骤就不演示了，完成好后可以在终端中运行以下命令，如果出现版本号则表示安装成功。

  

  虽然node自带npm，但是可能不是最新版本，如果想更新npm，可以运行下列命令：

    npm install -g npm
  

• 然后安装vue-cli，这是Vue脚手架，是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

  npm install vue-cli -g   // 全局安装
  

  大家直接在终端执行即可，这里就不上图了。安装好后通过vue list命令来检查是否安装成功。

• 然后选定路径，创建一个新的项目，例如再桌面上创建一个命名为testvue的文件夹，在文件夹中创建一个名为testproject的项目（项目名不可以大写，会报错），执行下列命令：

  vue init webpack testproject
  

  

• 创建好后，在项目根目录中安装依赖，然后再运行一下（注意是项目根目录哟），命令如下所示：

  npm install
  npm run dev
  

  如图所示：

  

• 这样vue项目已经创建成功了，此时我们会获得一个初始化的文件夹结构，如下图所示：