vue UI —— 告别webpack配置-CSDN博客

vue UI 告别webpack配置

[TOC]
vue-cli 3.0 的候选版本也已经发布多时了。vue-cli 3.0 版本为我们提供了集 创建、管理、分析 为一体的可视化界面vue ui，妈妈再也不用担心我不懂配置啦~让我们来一起尝尝鲜吧~

    #安装最新版的vue-cli
    
    npm install -g @vue/cli
    
    #yarn/npm 安装（二选一） 
    
    yarn global add @vue/cli
    
    #检查vue-cli版本
    
    vue -V
    
    #运行 vue ui
    
    vue ui

结果：

7bc79b66_4910_48b8_8982_460211f31b3c

开始体验

在http://localhost:8000 页面中，我们可以看到如下的界面(我开启了“夜间模式”，所以是黑色背景)。

Vue项目管理器提供了三个功能：

管理项目
创建新项目
导入一个已经存在的项目

03649878_6ee0_46b0_86cb_b91de1871368

创建项目

首先我们试着创建一个项目，如下图：

ba90f1df_f9c1_411b_9939_024bc6035b21

点击在此创建新项目就可以开始新建项目。

c9b3848a_ad98_4950_8558_203caedede8e

而上方的地址栏，可以帮助我们选择根目录，新建文件夹，还有很顺手的 收藏功能。

1.创建

83d5751d_2697_4a0a_aa9f_8916ed76961c

要求输入项目名称，选择包管理器，还有很贴心的若目标文件夹已存在则将其覆盖以及常用的git init。这里，我偏好 yarn 来管理依赖包。

2. 预设项目

a707139c_88a3_4da8_8b08_6b80a207fc26

这里采用了约定大于配置的思想，使用了预设的功能。我们既可以一键创建一个新的vue项目，也可以采用自定义的方式，甚至支持git的远程预设。基本能满足常用的应用场景了。

3. 自定义功能

b69b67a9_39ac_474d_884b_6e4b3722db4c

在这里，我们可以自定义的选择我们需要用到的功能。除了项目中可能用到的 vuex、vue-router 这种业务相关的功能外，我们还能选择 ccs预处理、eslint、typescript、test、PWA 等这种项目相关的功能。能帮助我们减少很多复杂的配置。以 css预处理 为例，我们不需要再去配置自行 less-loader、sass-loader、stylus-loader 。

4. 配置

800242e9_78a7_4daa_acb4_76c35b1d9817

这一步，我们需要配置：

是否使用类样式语法
为 TypeScript 自动选择 polyfill
使用 history 路由还是 hash 路由（默认使用hash路由，如果使用history路由则需要服务端做相应配置）
选择使用的 css预处理语言 : scss/sass、less、stylus
选择代码检查或者格式化的配置：TSLint / ESLint
以及在何时执行Lint

5. 完成

点击创建项目, 提示将我们的配置保存为新的预设方案。以方便我们下一次直接创建。

d37be9db_de9b_4a97_8771_21dd70d5e6a0

耐心等待安装完成。

359c9584_740e_4e2f_9c7a_f0e706eefe45

项目细节

等待安装完成之后，会自动跳转到项目管理页在这个页面，我们可以详细的看到项目里做了哪些配置。主要是跟 packages.json 相关的配置。

1. 插件

这里大多是全局的插件。

9f277eb6_1038_4d81_a23e_bb2dba3741b1

2. 依赖

5f03d267_dc87_4ea3_b69a_7ca62475fde8

在这里，我们可以很方便的管理项目相关的依赖，也可以删除依赖。

点击查看详情，查看依赖的具体说明。

3. 配置

4269b72f_5a4e_4719_a594_f281f1b866dd

eb175fa3_0181_440c_9461_a599adc5ff22

这里的配置页，基本上是以前的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，会影响构建性能。

点击更多，可以查看相关的帮助和详情。