Vue CLI 3.x 简单体验

文档

中文文档 补充于02月10日

vue脚手架的3.x版本已经在开发中，现在还处于alpha版本。
我们来看看有哪些变化。

使用

npm install -g @vue/cli

命名方式已经改为npm推荐的新的包名规则，使用作用域。详情可查看此文章。

命令变化

vue -h
我们看到

create [options] <app-name> 创建一个由vue-cli-service支持的新项目
invoke <plugin> 在已创建的项目中添加插件
serve [options] [entry] 在开发者模式下以零配置运行一个js或vue文件
build [options] [entry] 在生产模式下以零配置构建一个js或vue文件
init <template> <app-name> 旧api 需要@vue/cli-init // 就是原来的vue-cli init <template> <app-name>

中文是我加的
说到零配置，可以看看这个Parcel，生态还不完善，零配置的缺点就是不够自由。

那么vue-cli-service是什么？这个几个新的命令有是什么？
我们先试着创建一个项目。

初始化模板

vue create my-project
这个时候会进入选项



? Please pick a preset:

&gt; default (babel, eslint)

&gt; Manually select features //手动选择功能

我们选择default走向

default路线



Pick the package manager to use when installing dependencies: //用哪个下载依赖

&gt; Use Yarn

  Use NPM

// 现在的顺序是Yarn在第一位的
因为没有装Yarn，所以使用NPM

然后出现提示，进入安装过程



Vue CLI v3.0.0-alpha.5

✨  Creating project in E:\git\note\my-project. // 创建项目

�  Initializing git repository... // 初始化git库

⚙  Installing CLI plugins. This might take a while... // 安装脚手架插件

提示里多了些符号，气氛变得活泼起来。

其实这个过程中还会判断你对npm/yarn源的连接速度，询问你是否切换至淘宝镜像



 Your connection to the the default npm registry seems to be slow.

 Use https://registry.npm.taobao.org for faster installation?

完成之后我们可以看到除node_modules之外的目录结构变成了



│  package-lock.json

│  package.json

├─public

│      favicon.ico

│      index.html

└─src

    │  App.vue

    │  main.js

    ├─assets

    │      logo.png

    └─components

            HelloWorld.vue

build哪里去了？config哪里去了？配置都消失了？

我们观察一下npm脚本命令



  "serve": "vue-cli-service serve",

  "build": "vue-cli-service build",

  "lint": "vue-cli-service lint"

现在是依靠vue-cli-service来运行的。那么那些配置应该就在vue-cli-service当中（所谓零配置），所以vue-cli-service应该是起的一个服务。

自定义路线

我们选择Manually select features之后



? Check the features needed for your project: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)

&gt;( ) TypeScript

 ( ) Progressive Web App (PWA) Support

 ( ) Router

 ( ) Vuex

 ( ) CSS Pre-processors

 ( ) Linter / Formatter

 ( ) Unit Testing

 ( ) E2E Testing

看到可以自由组合现在所需的功能了。
创建的过程中会询问配置文件保存位置是config.js还是package.json，但是其中也是一些简单的配置。

vue-cli-service功能

vue-cli-service应该还提供了一些没说明的用法
这部分会持续更新

生成 web components 规范的组件代码

配置npm 脚本"build:components": "vue-cli-service build --target wc-async **/*.vue"

可以直接把 Vue 的组件代码生成 web components 规范的组件代码，不过要记得 web components 的规范里组件名中是必须有横线的，所以使用 app 这样的组件名会导致构建失败
来自勾三股四微博

变化

可以看到以前繁琐的配置文件不见了，变成了一种约定大于配置的状态（查看issues，其实还是能配置的，需要创建vue.config.js文件），根据命令行描述和文档说明是可以在此基础上配置其他各种插件的，但是我没有深入研究。
文档中有提到It automatically infers the entry file in the current directory，所以我尝试着添加过个html文件看是否能达到直接变成多页面应用，没有成功，可能还有其他方法。
添加了对npm源的连接速度的判断

后话

vue-cli还在开发当中，文档还没完成，创建完项目根据配置不同还是存在一些问题的，大家可以去讨论并提出你的想法，参与pr，去拿contribution吧。

更新于02月07日beta版要发版了，下周应该会有官方文档出来

原文地址：https://segmentfault.com/a/1190000013090943