Vue.js 开发标准化工具 Vue CLI

Vue.js 开发标准化工具 Vue CLI

MIT
JavaScript
跨平台
2018-08-13
王练

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 搭建交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

  • 一个运行时依赖 (@vue/cli-service),该依赖:

    • 可升级;

    • 基于 webpack 构建,并带有合理的默认配置;

    • 可以通过项目内的配置文件进行配置;

    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合,集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。

该系统的组件

Vue CLI 有几个独立的部分——如果你看了项目的源代码,你会发现这个仓库里同时管理了多个单独发布的包。

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli 创建的项目中。

CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了:

  • 加载其它 CLI 插件的核心服务;

  • 一个针对绝大部分应用优化过的内部的 webpack 配置;

  • 项目内部的 vue-cli-service 命令,提供 servebuild 和 inspect 命令。

如果你熟悉 create-react-app 的话,@vue/cli-service 实际上大致等价于 react-scripts,尽管功能集合不一样。

CLI 服务章节涵盖了它的具体用法。

CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin-(社区插件) 开头,非常容易使用。

当你在项目内部运行 vue-cli-service 命令时,它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分,或在后期加入到项目中。它们也可以被归成一组可复用的 preset。

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

Vue CLI 3.0 正式发布,Vue.js 开发标准化工具

Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时; 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践。...

2018/08/13 11:54

没有更多内容

加载失败,请刷新页面

没有更多内容

没有更多内容

加载失败,请刷新页面

没有更多内容

vue-cli

主流前端框架 前端框架三巨头: Vue.js:vue.js以轻量易用著称 React.js:vue.js和React.js发展速度最快, AngularJS:AngularJS是老大。 vue-cli 为什么使用? 在开发中,需要打包的东西不止是...

01/12 00:23
11
0
vue-cli

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。 vue-cli怎么使用? 安装vue-cli之前,需要先安装了vue和webpack,不知道怎么安装的可以看我之前的文章《Vue + W...

2017/02/13 15:05
17
0
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

2018/06/23 17:31
103
0
Vue中路由管理器Vue Router使用方式(二)-推荐

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件 使用步骤,本人假设已经安装好了Vue CLI工具,了解更多参考:VSCode 搭建Vue开发环境之Vue CLI 1.创建项目 vue create hello...

2018/10/17 21:59
48
0
vue-cli 2.0 3.0区别

1.安装 (npm新版本 包命名更严格, vue-cli3.0相应跟着变化) 2.0安装 $ npm install -g vue-cli 3.0安装 npm install -g @vue/cli 2.目录结构: 2.0生成目录结构: 3.0目录结构: 从CLI 3的...

02/12 11:44
9
0
使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

2018/06/24 09:33
67
0
vue学习路线

vue学习路线:语法学习,vue-cli脚手架搭建,vue router,vuex

2018/05/08 19:48
146
0
EasyUI的Vue版本

背景 最近Easyui释放出了vue版本,尝试一波。 vue cli3 cli的全称是command-line interface,即命令行界面,简而意之vue cli就是vue的命令行界面版本。这里假设你已经安装好了npm(全称 Node...

2018/09/13 14:49
1K
3

没有更多内容

加载失败,请刷新页面

返回顶部
顶部