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" />