vue-cli2,vue-cli3(vue脚手架)超详细教程

文章目录

vue-cli脚手架

顾名思义,脚手架就是用来协助,配合,帮助构建一个项目的。使用vue-cli仅需5分钟就可以搭建一个完整的Vue.js应用,相较于人工操作,具有安全,高效的特点。

vue-cli与平台无关,功能更加齐全。无论是预编译模板,注入依赖,还是模拟生产环境等功能,vue-cli都具备,而且占用内存少,更高效,运行速度非常快。

Node.js环境安装

要安装Vue.js脚手架,需要依赖Node.js的npm命令,npm是Node.js所衍生的一个命令,因此我们需要安装Node.js

  1. Node.js官网下载自己计算机的版本

vue-cli2,vue-cli3(vue脚手架)超详细教程
vue-cli2,vue-cli3(vue脚手架)超详细教程

  1. 首先点击下载好的Node.js,然后傻瓜式安装点击next即可,需要注意的是,一定要根据自己的磁盘来分配安装地址

vue-cli2,vue-cli3(vue脚手架)超详细教程

vue-cli2,vue-cli3(vue脚手架)超详细教程

  1. 这一步建议选中复选框,这样即便安装过程中有需要依赖的如Visual C/C++或类似.NET Framework的安装包,Node也会自动将它们安装好。

vue-cli2,vue-cli3(vue脚手架)超详细教程

vue-cli2的安装

npm,cnpm介绍

vue-cli的安装,需要用到npm或cnpm,在这里先来了解npm和cnpm及它们的区别

npm

npm是Node.js的一个工具,它的主要作用是进行包管理(包括卸载,安装,依赖管理等)

cnpm

由于npm是从国外的服务器下载的,受网络的影响比较大,也可能会出现异常,所以必须使用国内镜像来代替国外的服务器。国内的淘宝镜像则称为cnpm

在进行脚手架配置时,将以cnpm为主,两者的用法完全相同,区别时一个以npm作为命令的开头,另一个以cnpm作为命令的开头

命令参数说明

需要注意的时,npm和cnpm仅是下载的位置不同,除此之外所以的参数,功能和作用都是完全相同的

-S参数:-S是-save的缩写,它表明是将安装包的信息加入生产阶段

-D参数:-D是-save-dev的缩写,所代表的是save和dev这两项的综合,是在开发阶段,所以大多数情况下选择-D

安装脚手架

在安装脚手架之前,我们需要安装cnpm来替换npm(原因在前面已经说了)

cnpm的安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli2,vue-cli3(vue脚手架)超详细教程

安装vue-cli

输入如下命令安装vue-cli

cnpm install -gD vue-cli

vue-cli2,vue-cli3(vue脚手架)超详细教程

为了验证Vue.js脚手架是否安装成功,输入vue -V命令(注意-V的V是大写的),如果显示Vue.js版本,就代表Vue.js脚手架安装成功

vue-cli2,vue-cli3(vue脚手架)超详细教程

用脚手架生成项目目录

在资源管理器的C:ue-learnuecli2路径下输入cmd进入命令行

vue-cli2,vue-cli3(vue脚手架)超详细教程

使用webpack模板创建项目,projectName是项目名称

vue init webpack projectName

创建后,会有一个交互式的选项让你选择:

vue-cli2,vue-cli3(vue脚手架)超详细教程

安装完成后,还需要安装对应的项目依赖包,由于项目依赖包基本都在国外的服务器,国内需要*才能访问,因此需要把npm的下载源换成国内的

npm config set registry https://registry.npm.taobao.org

cd 到项目目录, 执行命令 npm install 安装对应的项目依赖包

vue-cli2,vue-cli3(vue脚手架)超详细教程

安装好的Vue.js项目依赖包后输入npm run dev即可运行刚刚安装好的Vue.js模板项目

vue-cli2,vue-cli3(vue脚手架)超详细教程

根据提示在浏览器中访问http://localhost:8080就可以打开运行好的Vue.js项目了

vue-cli2,vue-cli3(vue脚手架)超详细教程

vue-cli3的安装

输入以下命令安装vue-cli3

cnpm install -gD @vue/cli

安装好vue-cli3,使用以下命令查看安装是否成功,若成功,则会出现安装版本

vue -V

vue-cli2,vue-cli3(vue脚手架)超详细教程

使用vue-cli3图形界面

输入以下命令,启动图形化的vue-cli3界面

vue ui

单击“创建”按钮,出现如下图的界面,首先在目录路径上输入之前创建好的vue-learn文件夹的路径,然后在此目录下创建vuecli3的文件夹

vue-cli2,vue-cli3(vue脚手架)超详细教程

单击创建好的vuecli3文件夹进入文件夹内,然后单击底部的“+"在此创建新项目按钮

vue-cli2,vue-cli3(vue脚手架)超详细教程
vue-cli2,vue-cli3(vue脚手架)超详细教程
vue-cli2,vue-cli3(vue脚手架)超详细教程
vue-cli2,vue-cli3(vue脚手架)超详细教程
vue-cli2,vue-cli3(vue脚手架)超详细教程

单击右上角的”安装devtools按钮,然后单击"继续"按钮可以安装基于谷歌浏览器的插件(国内需要*才能安装),方便在调试Vue.js项目过程中进行定点调试

vue-cli2,vue-cli3(vue脚手架)超详细教程

vue-cli2,vue-cli3(vue脚手架)超详细教程

单击“任务”按钮,单击“save”按钮,然后单击“运行"按钮,等待几分钟即可,单击"启动app"按钮就可以在浏览器中打开本次创建的Vue.js项目

vue-cli2,vue-cli3(vue脚手架)超详细教程

单击”build"按钮,进入构建项目页面,然后点击"运行"按钮,等待一会就会生成项目的发布文件

vue-cli2,vue-cli3(vue脚手架)超详细教程

找到项目文件夹目录C:ue-learnuecli3uecli3-test,在里面会有一个新的dist文件夹就是发布成功后的文件,直接将这些文件上传到服务器根目录,就可以作为服务器的前端页面文件了

vue-cli2,vue-cli3(vue脚手架)超详细教程

上一篇:day12-函数进阶作业


下一篇:安装react ts 脚手架 + scss