vue-cli中的安装方法(图文并茂的详细步骤)

脚手架是一种工具，通过输入简单的指令来帮助您快速构建基本环境。

vue-cli是vue.js的脚手架，用于快速自动生成vue.js webpack的项目模板，大大降低了使用webpack的难度。以下是详细的安装步骤

Vue-cli脚手架模板是基于节点下的npm安装的，所以需要先安装节点

1.要安装node，vue需要基于一定版本的npm，所以先把npm升级到最新版本，而且在安装过程中，个人比较喜欢淘宝镜像，所以先安装cnpm(因为速度和稳定性都比较好)

2.打开目标文件夹下的终端

3.实施cnpm安装vue-cli -g全局安装

运行vue查看安装是否成功

4.运行vue init webpack(注意：模板名称)sell2(注意：项目名称)

5.进入项目文件夹并执行cnpm install以安装下载到模板的package.json中的依赖项。安装完成后，将在项目文件夹中自动生成节点模块文件，以存储已安装的依赖文件

6.因为多个依赖项非常多的编辑器在检索模块文件时会消耗大量内存，所以在使用webstorm editor启动项目时，我们通常会右键单击节点-模块文件夹以停止检索文件

注意：webstorm一打开就卡住了，无法操作文件夹。解决方法是以文件夹的形式打开并删除node-modules文件夹，然后阻止检索，然后重新安装cnpminstall *(此方法需要在安装依赖项后运行一次，然后删除node_modules子文件，webstorm打开项目，禁止检索node_module文件夹，然后删除文件夹并重新安装)

7.应针对正在运行的项目执行npmrundev(注意：此时不能使用cnpm运行，但必须使用npm)

8.将所需资源投入到项目中

9.我们需要使用路由功能，所以我们需要安装vue路由器

安装方法：vnpm安装vuve-路由器-保存

10.在build/devs-server.js下编写自定义变量和路由函数。

这样，您可以在运行的项目下获得想要的json数据，如下所示：

通过这种方式，成功地配置了路由，并获得了您想要的数据

11.在编写代码之前，在html文件下引入初始化样式(保持样式统一美观)

12、调用组件的方式

13.需要sass(个人需求)，所以安装了sass-loader。

安装方法：cnpm安装sass-loader-save-dev

下次sass-loader的版本信息将由Pakcage.json文件生成

因为sass-loader依赖于node-sass，所以我们也需要安装node-sass

安装方法：cnpm安装节点-sass-save-dev

此时，您可以在模块中定义SCS来编写SCS代码，也可以创建一个新的*。可以使用的scss文件

@ import./path”；要调用其他scss文件和已定义的scss方法，

使用@include方法名(参数)；打电话

14、需要使用ajax请求，使用vue-resource

安装方式：cnpm install vue-resource - save安装完成后会在package.json中生成保存版本信息。

使用方法如下：

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