简介
@vue/cli 是一个基于 Vue.js 构建的标准化的脚手架工具。使用它可以快速生成一个符合最佳实践的 Vue.js 工程。
安装
使用 npm 安装：
npm install -g @vue/cli
或者使用 yarn 安装：
yarn global add @vue/cli
安装完成后，执行下面的命令来检查是否安装成功：
vue --version
如果正确安装，会打印出当前的 @vue/cli 版本号。
创建项目
使用 @vue/cli 创建项目非常方便。执行下面的命令来创建一个新的项目：
vue create hello-world
其中 hello-world 是项目名称，你可以自定义。执行命令后会提示你选择要安装哪些插件。你可以选择默认插件，也可以根据项目需求手动选择插件。
安装过程可能需要一些时间，等待安装完成后，执行下面的命令来启动项目：
cd hello-world npm run serve
打开浏览器，在地址栏中输入 http://localhost:8080，你将看到一个简单的示例页面。
-- -------------------- ---- -------
----------
---- --------------
-- --- --
------
-----------
--------
------ ------- -
----- -------------
------ -
------ -
---- -------- -- ---- ------ -----
-
-
-
---------插件使用
在 @vue/cli 中，插件是通过 vue add 命令安装的。可以使用官方提供的插件，也可以安装社区提供的插件。下面介绍下如何使用官方提供的插件。
PWA
Progressive Web App（渐进式Web应用）是一种可以提供离线访问、即时更新、推送通知等功能的Web应用。@vue/cli 内置了 @vue/cli-plugin-pwa 插件来一键开启 PWA 的功能。
执行下面的命令来安装 @vue/cli-plugin-pwa 插件：
vue add @vue/cli-plugin-pwa
安装完成后，需要将生成的 service-worker.js 文件添加到 .gitignore 中，避免将缓存文件提交到代码仓库中。
# .gitignore /dist/ /node_modules/ /public/service-worker.js
TypeScript
TypeScript 是 JavaScript 的超集，增加了类型系统等功能。在 @vue/cli 中使用 TypeScript 需要安装 @vue/cli-plugin-typescript 插件。
执行下面命令来安装 @vue/cli-plugin-typescript 插件：
vue add @vue/cli-plugin-typescript
执行命令后会生成一个 tsconfig.json 文件，这是 TypeScript 的配置文件。
-- -------------------- ---- -------
-
------------------ -
--------- ---------
--------- ---------
--------- -----
------ -----------
------------ -----
------------------- -------
------------------------- -----
------------------ ----
--
---------- -
--------------
---------------
----------------
----------------
--
---------- -
--------------
-
-ESLint & Prettier
ESLint 是一个常用的 JavaScript 代码检查工具，可以帮助我们检查代码中潜在的问题。Prettier 则是一个代码格式化工具，可以保证代码风格的一致性。
在 @vue/cli 中安装 ESLint 和 Prettier 需要分别安装 @vue/cli-plugin-eslint 和 @vue/cli-plugin-prettier 插件。
执行下面命令来安装 @vue/cli-plugin-eslint 插件：
vue add @vue/cli-plugin-eslint
安装完成后，在项目的 package.json 中会生成 eslintConfig 配置。
-- -------------------- ---- -------
-
--------------- -
------- -----
------ -
------- ----
--
---------- -
-----------------------
----------------
------------------------------
----------------
----------------------------------
--
-------- ---
---------------- -
--------- ---------------------------
-
-
-执行下面命令来安装 @vue/cli-plugin-prettier 插件：
vue add @vue/cli-plugin-prettier
安装完成后，需要在项目的根目录下创建一个 .prettierrc.js 文件用来配置 Prettier 的格式化规则。
-- -------------------- ---- ------- -- -------------- -------------- - - --------- -- -- ------------ -------- ------ -- --------------- ----- ----- -- ------------- ------------ ----- -- --------------- -------------- ------- -- --------------------------------------- --------------- ----- -- ---------------------- ------------------- ----- -- ---------------------- ------------ --------- -- ------------------------------------------- ---------- ---------- -- ---- -
生产环境打包
使用 vue-cli-service build 命令来打包生产环境代码。
npm run build
上面的命令会在 dist 目录下生成一个打包好的静态资源文件。
总结
@vue/cli 是一个非常实用的脚手架工具，使用它可以快速搭建一个符合最佳实践的 Vue.js 工程。在使用时，我们需要逐步掌握插件的使用方法，对于不同的项目需求进行选择和定制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbe32b5cbfe1ea0611b44