H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vuex 安装

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

下载安装

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

直接下载

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

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

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

<script src="/path/vuex.js"></script>
使用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项目已经创建成功了,此时我们会获得一个初始化的文件夹结构,如下图所示:

本文地址:H5W3 » 【前端技术】Vuex 安装

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址