vue-cli 3.0 版本为我们提供了集 创建、管理、分析 为一体的可视化界面vue UI
打开我们的任意一个vue项目,命令行终端输入vue ui
在这里插入图片描述
片刻等待以后,浏览器自动跳转到http://localhost:8000/project/select,可以看到如下的界面
Vue项目管理器提供了三个功能:

  • 管理项目

  • 创建项目

  • 导入一个已经存在的项目
    在这里插入图片描述
    然后我们点击导入,然后再导入到这个文件夹,如图所示
    在这里插入图片描述
    进入到可视化项目界面,我们可以从左边工作区来管理项目
    在这里插入图片描述
    查看项目插件(这里大多是全局的插件)
    在这里插入图片描述
    查看依赖
    在这里插入图片描述
    相关配置
    在这里插入图片描述
    这里的配置页,基本上是以前的config文件夹的相关内容。
    baseURL:应用的根目录
    output directory:build 生成的目录
    Assets directory:静态资源的目录
    Enable runtime compiler:允许在组件中使用 template ,但是会因此让app多10kb负载。
    Enable Production Source Map:在生产环境使用 js Source Map 便于调试,但是会影响build的速度。
    Parallel compilation:多线程并行编译Babel或者Typescript。
    Enable CSS Modules:默认只有以 *.module.[ext] 结尾的文件才会被视为CSS模块。开启此项,允许你在文件名中删除 module 并将所有的样式文件( css|scss|sass|less|styl(us)? )视为CSS模块 。
    Extract CSS:是否将CSS导出为一个CSS文件,而不是写在js中内联,并动态注入。在构建为Web组件时,默认情况下也会禁用此选项(样式内联并注入shadowRoot), 构建库时,您也可以将其设置为false,以避免用户自己导入CSS。
    Enable CSS Source Maps:为CSS启用source map,会影响构建性能。
    点击更多,可以查看相关的帮助和详情。

    任务
    在这里插入图片描述

Logo

前往低代码交流专区

更多推荐