前言

@vue/cli v3从开始到现在已经经历了四个月的迭代(目前RC3),

除了终端初始化的姿势,还引入了一个新的项目初始化姿势;

Web端的初始化,体验了一下,效果很不错;

后方多图,感兴趣的可以瞧瞧,不感兴趣的请止步,免得浪费你的时间,谢谢..

官网及安装

官网 : Vue Cli
安装:npm i -g @vue/cli

常规命令

大体中文注释下

Usage: vue <command> [options]Options:-V, --version                         输出当前脚手架版本-h, --help                            使用帮助Commands:create [options] <app-name>           基于vue-cli-service初始化一个项目,终端 add <plugin> [pluginOptions]          添加插件到该项目invoke <plugin> [pluginOptions]       在项目中激活(调用)插件inspect [options] [paths...]          检查项目中的webpack选项serve [options] [entry]               零配置运行开发模式build [options] [entry]               零配置运行生产模式ui [options]                          web端界面初始化项目init [options] <template> <app-name>  类似`vue-cli`初始化远程的模板(需要遵循v3规格的)执行 vue <command> --help 获取该选项更详细的帮助.

其他不多说,今天只想演示下Web端UI初始化…

UI初始化

0.终端跑起来!!!

在终端执行vue ui, 会默认初始化localhost:8000且自动打开

点击顶部tab的Create进入初始化界面, 点击Create a new project here进入新项目初始化

里面的目录都是可以展开的,类似本地目录的体验,会遍历出来展示

1.填写目录名什么的

2.选择配置的细粒度

3.选择需要开启的东东

4.针对上一步的选择进一步的配置

最后点击Create Project就会开始执行相关的操作和安装对应的依赖了

其实就是终端在执行,只是页面也会给你看一些效果,一个遮罩层loading和一些文字

5.创建完毕会有一个管理后台…相当酷炫..

插件库

这个真的很实用,对于项目的拓展什么的

开发运行

详细的记录了模块大小,这是把分析插件展示出来了…这样写代码的时候更能感知项目的大小了

不仅如此,任务还可以配置访问的域名,是否开启https,对应的开发模式

6. 插件更新直观体验

有些更新会有一个感叹号提示该版本可能不稳定,如图所示

点击更新后显示一个遮罩层,就是终端在安装;

7. 项目配置的可视化

目前这块我看了下还是不大完善的,需要详细配置的还是需要阅读官方脚手架的文档,写一个vue.config.js,

等会我会稍微点一下,也很容易

vue-cli 3的配置文件引入了一个全局配置文件的概念,在根目录新建一个vue.config.js,

比如我们最常用的接口的反向代理,多线程编译(提升编译速度,只有当内核大于1的时候)

vue.config.js


module.exports = {devServer: {proxy: {'/': {target: 'xxx'changeOrigin: true// pathRewrite: {//     '^/api': '/'// }}}},parallel:true,};

你在项目初始化的还可以选择.babelrc,postcss这类插件文件独立出来,也能集中在package.json

所以说,配置最多分三块,最少是集中化

独立文件这类,.babelrc,.postcssrc.js
vue.config.js
package.json

更多的配置请查阅官方手册: Vue Cli

书写demo

想知道大概写起来是什么样的么..

我拿了一个下载页面来改了改,可以跑起来大概是这样的

产品的url我就不展示了,统一用xxx

AppDownload.vue


<template><div class="page"><div class="appicon"><img src="../../assets/share/yourAppIcon@2x.png"><p><span>真实的</span><br><span>才是最精彩的</span></p></div><wechat-browser-check :check-open="checkBrowser" /><a:href="downloadUrl"class="goto-download"@click="checkWXPlatform">{{ storeName }}</a></div>
</template><script lang="ts">import {Component, Vue} from 'vue-property-decorator';import WechatBrowserCheck from '@/components/WechatBrowserCheck.vue';import service from '@/api/index.ts';const device: any = require('current-device').default;@Component({components: {WechatBrowserCheck,},metaInfo() {return {title: 'App Download', // set a titletitleTemplate: '%s -  Welcome!', // title is now "My Example App - Yay!"htmlAttrs: {lang: 'zh'}}}})export default class AppDownload extends Vue {private checkBrowser: boolean = false;// 检测浏览器运行 UAprivate downloadUrl: string = ''; // 下载链接private storeName: string = 'APP 下载'; // 商店名称private country: string = 'CN' // 国家created() {// 若是 PC 端if (device.desktop()) {window.location.href = 'xxx';}this.fetchBasicInfo();}checkWXPlatform():void {this.checkBrowser = true;}async fetchBasicInfo() {try {const [country = 'CN',downloadUrl = 'xxx'] = await Promise.all([service.get('/country').then((res: any) => res.state === 200 && res.data),service.get('/android_v').then((res: any) => res.state === 200 && res.data.android_apk_url)]);this.getMobileApp(country, downloadUrl);} catch (error) {console.log('网络错误');}}getMobileApp(country: string, downloadUrl: string): void {if (device.ios() || device.ipad() || device.iphone()) {country === 'CN'? (this.storeName = 'IOS 下载'): (this.storeName = 'App Store');this.downloadUrl ='xxx';}// 获取下载链接if (device.android() ||device.androidPhone() ||device.androidTablet()) {this.country === 'CN'? (this.storeName = 'Android 下载'): (this.storeName = 'Google Play');this.downloadUrl = downloadUrl;}}}
</script><style scoped lang="scss">.page {position: relative;-webkit-overflow-scrolling: touch;height: 100%;background: url(../../assets/share/mountainWater.png) no-repeat left top;background-size: cover;.appicon {position: absolute;top: 65px;left: 56px;width: 251px;img {display: block;width: 150px;height: 150px;border-radius: 22px;box-shadow: 0 0 1px rgba(32, 89, 138, 0.31);}p {margin: 35px 0;text-align: left;letter-spacing: 1px;color: #205b8a;font-size: 24px;font-weight: 600;font-stretch: normal;line-height: 15px;> span {display: block;padding: 5px 0;white-space: nowrap;}}}.goto-download {position: absolute;z-index: 3;bottom: 81px;left: 50%;display: block;width: 638px;height: 87px;transform: translateX(-50%);text-align: center;text-decoration: none;color: #fff;border-radius: 100px;background: rgba(70, 55, 61, 1);box-shadow: #000 0 2px 4px;font-size: 32px;line-height: 87px;}}
</style>

WechatBrowserCheck.vue


<template><div v-if="showIntro"class="intro-layer"><div class="desrc"><p class="desrc-tips">请点击右上角的选择浏览器打开,谢谢!</p></div></div>
</template><script lang="ts">import {Component, Emit, Model, Prop, Vue, Watch} from 'vue-property-decorator'@Component({})export default class WechatBrowserCheck extends Vue {private deviceType: string = ''; // 设备类型private showIntro: boolean = false;@Prop({default: 'wechat'})types!: String;@Prop({default: false})checkOpen!: Boolean;@Watch('checkOpen')oncheckOpenChanged(val: string, oldVal: string) {if (val) {this.openAlert();}}openAlert() {if (this.checkOpen) {if (Array.isArray(this.types)) {this.types.map(item => {if (item === this.deviceEnvCheck()) {this.showIntro = true;}return item;});} else {this.deviceEnvCheck() === this.types? (this.showIntro = true): (this.showIntro = false);}console.log('deviceType:' + this.deviceEnvCheck(), 'types:' + this.types);}}deviceEnvCheck() {// 检测需要弹窗的设备类型// 获取访问的user-agentlet ua: string = navigator.userAgent.toLowerCase() || window.navigator.userAgent.toLowerCase();if (/MicroMessenger/gi.test(ua)) {return 'wechat';}if (/WeiBo/gi.test(ua)) {return 'weibo';}if (/QQ/gi.test(ua)) {return 'qq';}if (/(iPhone|iPad|iPod|iOS)/gi.test(ua)) {return 'ios';}}};
</script><style lang="scss" scoped>.intro-layer {position: fixed;z-index: 9999;top: 0;left: 0;width: 100%;height: 100%;background-color: #f2f2f2;background-image: url(../assets/share/openbrowser.png);background-repeat: no-repeat;background-position: center 80px;background-size: 100% auto;.desrc {width: 90%;height: auto;margin: 10px auto;padding: 10px;border-radius: 10px;background-color: #fff;.desrc-tips {font-size: 15px;}}}
</style>

编码体验目前来说并不好,周边库还不够完善,需要迭代一段时间才有改善;

目前class书写风格是依赖vue-class-component来实现[装饰器]

一些特性(prop,watch这些)也是依赖一个库vue-property-decorator[装饰器]

jsx结合的也不是很彻底..需要做一些妥协,和react的jsx也有所差异

总结

总体的感觉是很不错的,感觉以后其他的脚手架也会引入这类的WEB UI,大大改善了体验;

不过目前来说,用ts + 装饰器结合Vue的开发体验还不是很好,因为有一些BUG…

对JSX的支持,并不完善,和react的jsx也有所差异

目前来说ts+装饰器组合配合最好的是angular, 从ng2开始就引入了,现在都ng6了;

期待Vue及周边库下半年的改进..下个月新脚手架应该就正式版了(最晚不过中秋)

原文：Vue 折腾记 - (11) @Vue/Cli 3.0.0 图形化项目管理,相当人性化

vue-cli/vue-ui相关推荐

vue cli vue 3.x
vue cli & vue 3.x https://cli.vuejs.org/dev-guide/ui-api.html#ui-api https://cli.vuejs.org/zh/gu ...
yarn全局安装vue/cli vue不是内部命令
yarn全局安装vue/cli vue不是内部命令在使用 yarn global add @vue/cli安装 @vue/cli之后执行vue --version 报错:'vue' 不是内部或外部 ...
Vue CLI + VUE +vConsole/eruda 在移动端进行调试
Vue CLI + VUE +vConsole/eruda 在移动端进行调试 Vue CLI + VUE +vConsole/eruda 在移动端进行调试 eruda vConsole Vue CLI ...
七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
windows安装vue脚手架(vue-cli)及vue ui无反应,npm i -g @vue/cli报错解决方案
首先去node.js官网下载系统对应的node.js版本. 安装完成之后,在命令行下,输入 node -v及npm -v检查node和npm(node自带npm)安装是否成功. 安装全局的cli.在命 ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
vue cli 4 多环境_Vue 笔记整理19
19.1 vue-cli起步 19.1.1 什么是vue-cli Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: - 通过 @vue/cli 搭建交互式的项目脚手架. - 通 ...
Vue CLI 官方文档（一）@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
Vue、Vuejs从入门到精通 | Vue CLI详解
学习视频来源:B站<Vue.Vuejs从入门到精通> 个人在视频学习过程中也同步完成课堂练习等,现将授课材料与个人笔记分享出来. sudo npm install -g @vue/cli ...
Vue CLI配置与安装
文章目录一.关于Vue CLI 安装Node.js 安装Vue CLI 创建Vue CLI项目启动项目停止服务重启服务二. Vue CLI项目结构关于.vue视图文件关于路由配置关于r ...

vue-cli/vue-ui

前言