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

本文介绍了Vue CLI 3.0的图形化项目管理工具Vue UI的使用,包括项目初始化、配置选择、插件管理和项目配置的可视化。通过Web端UI,开发者能更直观地进行项目管理和插件更新,但目前与VSCode的集成尚不完善,开发体验有待提升。
摘要由CSDN通过智能技术生成

前言

@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=
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/cli-plugin-vuex@4.4.6 npm ERR! Found: @vue/cli-service@5.0.8 npm ERR! node_modules/@vue/cli-service npm ERR! dev @vue/cli-service@"^5.0.8" from the root project npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0 || ^5.0.0-0" from @vue/cli-plugin-babel@5.0.8 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"^5.0.8" from the root project npm ERR! 3 more (@vue/cli-plugin-pwa, @vue/cli-plugin-router, @vue/cli-plugin-vuex) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-vuex@4.4.6 npm ERR! node_modules/@vue/cli-plugin-vuex npm ERR! dev @vue/cli-plugin-vuex@"~4.4.0" from the root project npm ERR! npm ERR! Conflicting peer dependency: @vue/cli-service@4.5.19 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-vuex@4.4.6 npm ERR! node_modules/@vue/cli-plugin-vuex npm ERR! dev @vue/cli-plugin-vuex@"~4.4.0" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\35514\AppData\Local\npm-cache\_logs\2023-06-08T07_30_06_817Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\35514\AppData\Local\npm-cache\_logs\2023-06-08T07_30_06_817Z-debug-0.log
06-09
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

crper

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值