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: >
default(babel, eslint) > Manually select features // 手动选择功能
我们选择 default 走向
default 路线
Pick the package manager to use when installing dependencies: // 用哪个下载依赖
> 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 源的连接速度, 询问你是否切换至淘宝镜像, 我这里的连接状况还可以, 没有提示.
完成之后我们可以看到除 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
之后
看到可以自由组合现在所需的功能了.
创建的过程中会询问配置文件保存位置是 config.js 还是 package.json, 但是其中也是一些简单的配置.
变化
可以看到以前繁琐的配置文件不见了, 变成了一种约定大于配置的状态 (查看 issues, 其实还是能配置的, 需要创建 vue.config.js 文件), 根据命令行描述和文档说明是可以在此基础上配置其他各种插件的, 但是我没有深入研究.
文档中有提到
It automatically infers the entry file in the current directory
, 所以我尝试着添加过个 html 文件看是否能达到直接变成多页面应用, 没有成功, 可能还有其他方法.
添加了对 npm 源的连接速度的判断
后话
vue-cli 还在开发当中, 文档还没完成, 创建完项目根据配置不同还是存在一些问题的, 大家可以去 讨论 并提出你的想法, 参与 pr.
来源: https://segmentfault.com/a/1190000013090943