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:
> 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源的连接速度,询问你是否切换至淘宝镜像
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 <space> to select, <a> to toggle all, <i> to invert selection)
>( ) 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版要发版了,下周应该会有官方文档出来
相关文章
- 使用 Vue.js 和 Semantic-UI 做一个简单的愿望清单
- vue之node.js的简单介绍
- 【转】Vue中mintui的field实现blur和focus事件
- 微信小程序四六级小助手平台+后台管理系统|前后分离VUE
- Vite 按需引入 Ant Design Vue 3.0
- vue/cli中css.sourceMap-open-inline-host-port-https-openPage-compress -devServer.proxy的简单介绍
- vite搭建vue项目-集成别名@、router、vuex、scss,按需加载Vant,就是这样简单
- vue中sync的使用原来这么简单
- 精品微信小程序二手交易小程序+后台管理系统|前后分离VUE
- vue.js:简单购物车作业案例
- vue-tools
- vue绑定内联样式
- Vue简单使用
- Vue 简单实例 购物车5 - 结算
- Vue 简单实例 购物车4 - 全选和反选功能
- Vue 简单实例 购物车1 - 购物车列表渲染
- 基于vue-cli、elementUI的Vue简单入门例子
- 使用VSCode配置简单的vue项目
- yearProgress.vue
- 「2021」高频前端面试题汇总之Vue篇(下)
- Vue函数式组件 简单实现
- vue中v-bind的简单使用
- 灵活的Vue组件——原来这么简单
- Vue实例详解与生命周期
- vue 原理简单实现
- Vue初探--响应式原理篇
- Vue-book----一个简单的全栈项目
- vue开发过程中跨域最简单解决方案
- vue-router单页应用简单示例
- Vue.js——vue-resource全攻略【5】
- 使用 Vue.js 制作一个简单的调查问卷平台
- vue——axios简单配置
- vue 实现邮戳边缘