vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)

前言(日常废话)

因为之前用的一直是vue-cli的2.9.6版本,这段时间将电脑上的2.x版本给卸了,装上了4.4.6版本。害,脑子不好使,总是记不住,好记性不如烂笔头,搁这儿做一下记录,见下:

正文

一、前期准备工作

node.js的10.0.0以上版本(必须)、cnpm(淘宝镜像)(可选)、vue-cli4以上版本(必须)
这一趴主要是介绍在创建vue-cli项目的一些前置环境,如果电脑上已经装有上述条件可跳过,如果没有可按下列步骤一步一步来。

1.1、node.js(10.0.0以上版本)

看官大大们可以在这个地址:node的下载链接 选择自己电脑的版本进行相对应的下载,然后傻瓜式下一步即可。安装完成之后
在命令行输入:node -v 即可查看当前电脑的node版本号
在命令行输入:npm -v 即可查看下载node时自动下载的npm的版本号

1.2、vue-cli(4.x版本)

下载完node,就可以用node提供的npm来下载我们的主角vue-cli了。
如果你不确定自己的电脑是否安装有vue-cli,可以在命令行中输入vue -V来进行查看,如果版本已经是4.x的了,这一步就可以跳过了。如果版本不是4.x,但是想用4.x的话,
可以在命令行输入:npm uninstall -g vue-cli进行当前vue-cli的卸载。
然后在命令行输入:npm install -g @vue/cli进行vue-cli最新版本的安装。
如果想安装指定版本的vue-cli只需在最新版本安装的命令后面加上@版本号即可,举例:npm install -g @vue/[email protected]

1.3、cnpm(淘宝镜像)

使用npm进行下载操作时,由于是从果歪的服务器进行下载操作,所以有时会因为网络因素导致插件下载失败,因此MY大大的TB团队就弄了这个造福种花家程序员的cnpm。装这个主要是为了在进行一些插件下载操作的时候会快些,看个人选择,可装可不装。
安装:在安装完node可以使用node的npm包管理工具了,我们就可以在命令行工具里输入:
npm install cnpm -g --registry=https://registry.npm.taobao.org
然后回车等待安装完成即可,安装完成以后可以输入 cnpm -v,来进行当前cnpm版本号的查看。

二、项目创建

2.1在项目文件夹进入命令行

这里项目的创建选择的不是vue的可视化项目创建,而是传统的命令行创建,所以我们首先要进入到项目将要存在的文件夹命令行。
通过win+R,然后输入cmd,再一层一层cd进入文件夹的方式太慢了。这里有一个方法可以直接进入,那就是在预备创建项目文件的文件夹的地址栏输入cmd,就可以进入到处于该路径的命令行工具进行操作了,这个技巧相信会看到这个帖子的大大肯定是知道了,就当听我说了个废话。。。

在项目文件夹进入命令行图1
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第1张图片

2.2项目创建

然后在命令行输入vue create 项目名称,下图中的命令名称为“vuex-demo2”
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第2张图片
接着按下回车,耐心等待项目的创建即可,创建完毕后,会显示如下界面,让我们选择已有配置方案,下图配置方案有三种,第一个是什么都不配置,第二个是默认的配置了babel和eslint,第三个是进行手动配置
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第3张图片
我在这里选择第三个手动配置Manually…然后回车,出现下图
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第4张图片
上面一共有九项,我们可以通过键盘上下键来进行切换,通过空格键进行选中与取消选中,确认选择完毕后,按回车下一步,接下来对着九项逐个介绍。

选项 说明
Babel 主要作用是将代码中的ES6以及更高的语法兼容至浏览器可读取的ES5(建议选择)
TypeScript TS 是 JS 的超集,扩展了 JS 的语法,使得JS代码编写更加的规范…选择后会有进一步的选择(看项目要求选择)
Progressive Web App (PWA) Support 一个渐进式网络应用程序(看个人习惯与需求选择)
Router Vue的路由功能,选择后会有进一步选择(看项目需求选择)
Vuex Vue的状态管理(如果项目偏大些,建议选择)
CSS Pre-processors CSS的预编译,选择后会有进一步的选择(看个人习惯与需求选择)
Linter / Formatter 这个是代码检验和格式检查(看个人习惯与需求选择)
Unit Testing 以开发的角度进行代码测试(看个人习惯与需求选择)
E2E Testing 以用户的角度进行代码测试(看个人习惯与需求选择)

我根据写的这个demo选择了Babel、Router、Vuex这三项,选择完后按下回车键:
选择路由模式图
因为选择了Router,所以要进行进一步选择:是否使用history模式,因为history模式需要后端支持,所以我选择了否继续使用原来的哈希模式,按下n然后回车Enter:
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第5张图片
这个选项的意思是选择将babel、Eslint、etc等配置文件放在哪里?
In dedicated config files => 一个专门的配置文件(选择了这项,在项目生成时会生成一个单独的新的配置文件)
In package.json => 放在package.json中 (选择了这项,就直接放在了package.json中)

我这里选择了下面的 In package.json 回车:
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第6张图片
这一行询问的是,是否将刚刚设置的一串配置保存下来,如果保存了,在下一次创建项目就会有这个选项出来,我这选择的是不保存,n、Enter。进入项目的创建。等待。。。
vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装)_第7张图片
可以看到提示成功创建了项目 ‘项目名称’
还有两个提示:
cd ‘项目名称’ =>进入项目文件
npm run serve =>(进入项目文件后)运行项目
至此,整个基于vue-cli的4.x版本命令行创建的项目算是成功结束了[撒花]!!!

写给看贴的你

本人见识短浅,如有错误地方请指正批评;如有涉及侵权,请手下留情,联系本人,看见即删(手动狗头保命)。
祝各位看官大佬们身体健康、诸事顺心、仙运荣昌、少写bug多加薪…

你可能感兴趣的:(vue-cli的4.x版本命令行创建项目(node.js下载、cnpm安装))