【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)

文章目录

    • 前言 —— 本地环境搭建
    • 一. 创建项目文件
    • 二. 选择配置方案
    • 三. 自定义的可选配置项
      • ① 选择Vue语法版本
      • ② class风格的组件语法
      • ③ babel做语法转义
      • ④ 选择路由模式
      • ⑤ 选择CSS预处理器
      • ⑥ 选择代码规范检测工具
      • ⑦ 选择什么时候进行代码规则检测
      • ⑧ 选择单元测试框架
      • ⑨ 选择E2E测试框架
    • 四. 选择配置存放位置
    • 五. 是否保存当前配置为预设
    • 六. 等待项目的创建完成
    • 七. 运行项目并访问
    • 写在最后

前言 —— 本地环境搭建

使用Vue CLI 4.0搭建项目之前,你要确保你的本地已经安装好了node.js环境(推荐 v10 以上)以及npm。可查出版本号即可:

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第1张图片
之后就可以使用npm全局安装我们的Vue CLI 4.0:

npm install -g @vue/cli
vue -V

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第2张图片

一. 创建项目文件

Vue CLI 4.0中全新的项目创建命令为:

vue create project-name //文件名 

注意: 这里的文件名不能出现大写字母(驼峰命名法无效)。

在这里插入图片描述

二. 选择配置方案

之后会让我们选择创建项目的配置方案:

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第3张图片
可以看到在最新版中有三个选项:

  • Default([Vue 2] babel,eslint)—— 基于Vue 2语法的默认配置;
  • Default([Vue 3 Preview] babel,eslint)—— 基于Vue 3语法的默认配置;
  • Manually select features —— 自定义选择配置;

❀ 拓展一下❀

之前一直都是Vue 2.0版本,所以并没有其中的第二个选项。而在前段时间(2020.9.19 凌晨),官方终于发布了Vuejs 3.0的正式版本,代号:海贼王(One Piece)。

发布的英文原文地址:v3.0.0 One Piece

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第4张图片


回到这一步的选择中,我们选择第三项:自定义配置(Manually select features)。通过键盘 ↑ ↓ 键选择选项,之后回车确定选择并下一步。

三. 自定义的可选配置项

这里会列出所有的可配置项供我们选择:
(操作为:按 空格space 是选中或取消选中,按 a 是全选,按 i 是反选)

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第5张图片
有关每一个可配置项的简单介绍如下:
(如果你选择了其中某些项,你可以点击下表中对应的名称,快速查看该项详细的进一步配置信息)

可配置项 简介 备注
Choose Vue version 选择Vue版本 为新增项, 需要进一步选配Vue语法版本(2.x / 3.x Preview)
Babel 转码器 可以将ES6代码转为ES5代码
TypeScript JavaScript的超集语言 包含并扩展了JavaScript语法,需要被编译输出为JavaScript才能在浏览器端运行
Progressive Web App (PWA) Support 渐进式Web应用程序
Router vue路由管理器 Vue全家桶成员之一,学习建议选配
Vuex vue状态管理模式 Vue全家桶成员之一,中大型项目常选,学习建议选配
CSS Pre-processors CSS预处理器 需要进一步选配 less / sass / stylus
Linter / Formatter 代码风格检查和格式化 需要进一步选配ESlint
Unit Testing 单元测试 企业开发常选,学习不建议选配
E2E Testing end to end测试 企业开发常选,学习不建议选配

其中除了Choose Vue version和Babel前两项是推荐大家固定默认选择的,其他选项原则上来说都可以根据你实际项目需要自由选择

还要说明的是,这里的选项并不是只能在这里添加,Vue中也支持项目后期以插件的形式自由添加这些选项。

这里我为了日后看的方便,就全选一次:

在这里插入图片描述
之后需要进一步选择的细节,我都会罗列。所以后续的章节可以选择性跳过。

① 选择Vue语法版本

Choose Vue version选项的进一步配置,供用户自由选择项目的Vue语法版本,鉴于海贼王(Vue 3.0版本)刚刚面世,市面上还没有大面积的普及,还是以Vue 2.0居多。

在这里插入图片描述
所以新手入门来说,还是推荐大家从2.0版本开始学习Vue语法基础。

② class风格的组件语法

是否使用class风格的组件语法,推荐使用,输入 y 即可:

? Use class-style component syntax? (Y/n)

③ babel做语法转义

是否使用babel做语法转义,推荐使用,输入 y 即可:

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

④ 选择路由模式

提示如下:是否使用历史路由模式 ?输入yes即代表你选用历史路由模式(history mode);输入no则代表你选用的是哈希路由模式(hash mode)。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

路由的具体表现为浏览器地址栏中的URL链接地址。浏览器中支持两种不同的路由特性,所以对应的路由模式就以下两种:

① 历史路由模式(history mode)

典型URL格式为:https://www.abc.com/hello。在该模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致。如果后端缺少对 /hello 的路由处理,将返回 404 错误。所以历史路由模式需要在后台配置路由信息。

② 哈希路由模式(hash mode)

典型URL格式为:https://www.abc.com/#/hello,该地址的hash的值为 #/hello。它的特点在于:hash值虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响。从始至终请求的都是一个页面,不需要在后台配置路由信息,这部分工作现由前端完成。


一般情况下,两种模式均可,不过这里我推荐NO。这样开发完成后,打包出来丢到服务器上就可以直接使用了。选yes的话还需要到服务器那边进行设置。

之后讲到Vue Router的时候,还会重点分析这两种路由模式。之后来更新链接~

⑤ 选择CSS预处理器

这里主要有三种CSS预处理器可供选择:Sass,Less和Stylus。

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第6张图片
其中Sass又细分为:

  • Sass/Scss(with dart-sass) —— 自动编译实时生效;
  • Sass/Scss(with node-sass) —— 需要保存后才会生效;

不过 sass 官方目前主推 dart-sass ,最新的特性都会在这个上面先实现。所以这里我选择Sass/Scss(with dart-sass)。

⑥ 选择代码规范检测工具

Vue提供一个插件化的javascript代码规范检测工具,其中ESLint + Prettier使用较多,建议选择。(其实吧,这个东西用起来还是比较烦的)

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第7张图片
具体可总结为以下两点:

  • 确实可以提高我们写代码的规范性,也便于团队开发中代码格式的一致性管理;
  • 规范太严苛了,尤其是令人抓狂的缩进… 喜欢自由的不建议选择;

⑦ 选择什么时候进行代码规则检测

在这里插入图片描述
两个选项的意思分别是:

  • Lint on save —— 保存就检测;
  • Lint and fix on commit —— fix和commit时检测;

建议选择第一项 Lint on save(保存就检测)。这样检测才是实时的,不然等到commit的时候,问题可能都已经积累很多了。

⑧ 选择单元测试框架

测试这一块实在不熟,这里我也是借鉴的大佬博客。具体选什么,你们有需要的,肯定比我懂得多~

在这里插入图片描述

  • Mocha + Chai —— mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装;
  • Jest —— 安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha,Jest配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect;

⑨ 选择E2E测试框架

E2E(End To End)即端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。

在这里插入图片描述
可以看到,Vue中推荐使用的E2E测试框架有以下三种:

框架 断言 实现 是否跨浏览器支持 开源
cypress Chai、Chai-jQuery 等 Chrome
nightwatch assert 和 Chai Expect selenium
webdriverIO mocha 和 Chai selenium

难搞,突然有点想试试前端自动化测试,怎么肥事 ?全栈冲冲冲!?!

  • cypress —— 安装方便,测试写法和单元测试一致,只支持 Chrome 类浏览器,有支持其他浏览器的计划;
  • nightwatch —— 需要安装配置 selenium,selenium-server需要安装jdk(Java Development Kit);
  • WebDriverIO —— 可拓展性非常高,相比较原生Selenium而言,WebDriverIO 的代码非常的简单易懂,api和方法与jquery相似,非常方便前端上手。同时WebDriverIO 也支持mobile端的测试;

不太懂,就先选了个nightwatch,之后还有一步选择测试所用的浏览器环境:

在这里插入图片描述
这里有Chrome和Firefox两兄弟,不过我选Chrome,毕竟永远滴神!!

四. 选择配置存放位置

(到这一步,之前的配置过程就算是全搞完了,这全家桶也太顶了… 从来没觉得到这一步有这么远,额…)

在这里插入图片描述
配置文件的存放位置有两个选择:

  • In dedicated config files —— 每项配置的信息均以独立文件的形式存放;
  • In package.json —— 所有配置项的信息都存放在package.json文件内;

由于我们这里配置项实在是有点多,就选独立文件存放吧。最后生成的项目目录截图为:

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第8张图片
实际上你们在创建项目时,会用到的配置项并不多,也可以选择都放在一个package.json文件内。

五. 是否保存当前配置为预设

最后一步还会问你,是否要保存当前配置为预设 ?

输入yes即为保存,之后你还需要给这套配置方案命名。等你下次创建项目时,它就会出现在1.2节里的那一步的可选项列表,就能让你快速创建出符合你需求的项目。

? Save this as a preset for future projects? (y/N)

我这里就不保存了,你们平时倒是可以保存一套适合自己的配置方案,方便学习。

最后附上我本次项目创建的所有配置的过程记录:

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第9张图片

六. 等待项目的创建完成

配置阶段完成后,剩下的就交给Vue CLI 4.0 吧!他会帮我们构建好项目结构,安装好项目所需的各种依赖和插件。

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第10张图片
【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第11张图片

七. 运行项目并访问

看到下图中的成功信息,就说明你的项目构建完成啦!

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第12张图片
可以继续执行提示的代码,来运行你的项目:

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第13张图片
等待项目运行成功,如下图所示。他会告诉你:项目已经部署在你本地的8080端口了!
(不要纠结我这里为什么不是8080,问就是端口被占用了,所以顺延8081)

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第14张图片
直接ctrl + 鼠标左键单击本地链接(或者你自己在浏览器地址栏手动输入链接)即可在浏览器中打开,就像下图这样~ 我这里选配了TypeScript语言,所以可能会有些许不同。

【 Vue全家桶 · Vue CLI(二)】Vue CLI 4.0 的详细使用攻略(2020.10最新版)_第15张图片


写在最后

这一篇基础的使用Vue CLI 4.0工具创建Vue项目的过程解析,内容多到着实让我出乎意料,不过还是耐着性子写完了。

之后还打算写一篇利用Vue UI这个可视化的工具来实现对Vue项目的管理(主要演示创建过程)。

每一个不曾起舞的日子,都是对生命的辜负!

—— 尼采

你可能感兴趣的:(Vue,vue,Vue,CLI,4.0)