vue_UI_webpack_0">vue UI 告别webpack配置

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

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

结果：
在这里插入图片描述
开始体验

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

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

管理项目

创建新项目

导入一个已经存在的项目
在这里插入图片描述

创建项目

在这里插入图片描述
点击在此创建新项目就可以开始新建项目。

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

1.创建

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

2. 预设项目

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

3. 自定义功能

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

4. 配置

在这里插入图片描述
这一步，我们需要配置：

是否使用类样式语法

为 TypeScript 自动选择 polyfill

使用 history 路由还是 hash 路由（默认使用hash路由，如果使用history路由则需要服务端做相应配置）

选择使用的 css预处理语言 : scss/sass、less、stylus

选择代码检查或者格式化的配置：TSLint / ESLint
以及在何时执行Lint
在这里插入图片描述

5. 完成

点击创建项目, 我们提示，将我们的配置保存为新的预设方案。以方便我们下一次直接创建。
在这里插入图片描述
耐心等待安装完成。

项目细节

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

1. 插件

这里大多是全局的插件。
在这里插入图片描述

2. 依赖

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

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

3. 配置

在这里插入图片描述

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

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

4. 任务

serve 开发环境

在这里插入图片描述
这里对应的任务，对应于 package.json中的 script脚本。

控制台能很方便的看到单页应用运行的信息，包括错误数，警告数，静态资源大小，模块大小，依赖项大小。点击左上角启动app 就可以在浏览器打开应用。
在这里插入图片描述
分析功能，能帮助我们分析代码和模块的大小。一般在生产模式下，才会考虑这个问题。

build 生产环境

在这里插入图片描述

各个功能和 serve 中的类似，可以很明显的看到编译后的文件和未编译文件在大小上的差距。

inspect 审查

在这个模式下，我们可以看到详细的webpack配置。
在这里插入图片描述
点击 setting 图标，可以选择开发环境，生产环境，测试环境。

编译build时生产环境设置

在使用vue ui>vue ui生成的vue项目中，通常不会生成配置文件config，所以在config里修改index.js的办法行不通。但是vue ui>vue ui有更简单的解决办法！

以上图片是第一步，不要着急。如果打包的首页还是白屏那么请继续往下看

在这里插入图片描述

按照以上两步设置，基本上就可以解决白屏的问题了。

总结

vue ui>vue ui 提供了一套完整的vue项目构建的页面。既保留了vue-cli的即开即用的便利性，同时也保证了webpack配置的自由度。
对于使用vue-cli的用户来说，友好度非常高，整个功能从构建到管理到优化。对于开发者来说十分友好。页面也很炫酷，各个功能都恰到好处。

vue UI 告别webpack配置

vue_UI_webpack_0">vue UI 告别webpack配置

创建项目