vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)

1、安装nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,因此js的运行速度已经不再是广泛应用的瓶颈。 Node.js 使用了事件驱动、非阻塞式 I/O 的等模型,进一步提升了js的处理性能。

Vue的脚手架也是使用nodejs来实现和管理的。因此安装nodejs是使用vue脚手架的必备条件。nodejs的安装十分简单,访问官网的地址,进入下载页面直接进行下载:

# 官网下载地址 http://nodejs.cn/download/

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(1)

针对不同的操作系统,下载不同的版本就可以了。因此安装nodejs和安装普通的软件并没有什么区别。

安装完成后,可以打开dos窗口,通过下面命令来验证nodejs是否安装成功。

# 查看nodejs版本 node -v # npm 版本,nodejs附带的包管理工具 npm -v

如果以上命令能够正确输出版本信息,说明nodejs已经安装成功了。

2、安装nrm

(1)nrm是什么

nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换。由于nodejs的库主要在国外,因此下载速度非常慢,这就需要使用国内的镜像库。而各种镜像库五花八门,十分不好管理,而nrm通过管理库的下载源,来很容易地在各个镜像库之前随意切换,并且不会像cnpm那样有侵入性,因此是vue脚手架中不可多得的利器。

(2)安装nrm

安装nrm也是非常简单,一个命令行就解决了,如下:

## nrm 仅仅是提供了依赖包下载的地址 npm i nrm -g # OR npm install -g nrm

上面的两个命令任选其一即可,他们的效果是一样的。

(3)查看数据源

如果想要查看都有哪些数据源可以使用,则使用下面命令即可:

# 查看依赖源 nrm ls

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(2)

nrm ls

从上图可以看出,淘宝的源在前面有一个星号(*),说明我本地正在使用淘宝的数据源。

(4)切换数据源

如果想要切换数据源,可以使用下面命令来切换:

# 设置使用taobao地址 nrm use taobao

(5)添加数据源

有的时候,需要增加自己的私有数据源,那么可以通过下面命令来添加:

nrm add company http://192.168.1.22:8080/repository/npm-public/

(6)删除数据源

如果某个数据源已经不在使用了,可以通过下面命令来删除数据源:

# 删除上面添加的私有数据源 nrm del company

(7)测试数据源

如果数据源较多,也不知道哪个数据源速度较快,则可以使用nrm test命令来测试数据的速度,具体命令如下:

nrm test taobao

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(3)

3、安装vue/cli

vue cli对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。同时,CLI 还支持图形化界面来配置项目,可以非常方便地通过配套的图形化界面创建、开发和管理你的项目。

(1)安装

安装vue cli只需要在dos窗口中,使用如下命令:

# 安装vue/cli npm install -g @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue --version

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(4)

vue --version

(2)升级

如果已经安装,但是需要升级版本,可以使用下面的命令来进行升级:

npm update -g @vue/cli

4、创建项目

vue cli安装完成后就可以使用vue这个命令来创建项目了,具体的命令如下:

# 命令行模式 vue create my-project # OR 通过界面模式 vue ui

上面的命令已经提供了命令行和界面两种方式来创建项目。

命令行模式创建项目,你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel ESLint 设置的 preset。也可以选“手动选择特性”来选取需要的特性。

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(5)

这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。

如果项目已经创建完成了,但是还想安装一个新的插件,可以通过vue add来安装,具体命令如下:

vue add eslint

5、运行项目

项目创建完成,或者你克隆下来一个项目,第一步需要安装项目所需的插件,运行如下命令:

npm install

在等待一段时间以后,会提示插件安装成功,这个时候,就可以使用npm run来运行工程了。具体命令如下:

npm run serve

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(6)

这样在本地访问http://localhost:8080即可以访问了。

6、编译发布项目

如果项目开发完成,需要线上部署,这时候就需要使用npm build命令来编译项目,编译后的项目在dist目录里面。具体的命令如下:

npm run build

vue项目中使用echarts讲解(05-Vue脚手架安装axiosecharts等插件)(7)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页