Vue 2.x折腾记 - (11) @Vue/Cli 3.0.0 图形化项目管理,至关人性化

前言

@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

因此说,配置最多分三块,最少是集中化

1. 独立文件这类,.babelrc,.postcssrc.js
2. vue.config.js
3. 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 title titleTemplate: '%s - Welcome!', // title is now "My Example App - Yay!" htmlAttrs: { lang: 'zh' } } } }) export default class AppDownload extends Vue { private checkBrowser: boolean = false;// 检测浏览器运行 UA private 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-agent let 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了;

有不对之处请留言，会及时修正，谢谢阅读