vue UI 告别webpack配置

目录

  • vue UI 告别webpack配置

    • 开始体验

      • 创建项目
    • 项目细节
      • 1. 插件
      • 2. 依赖
      • 3. 配置
      • 4. 任务
    • 总结

vue UI 告别webpack配置

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

结果:

开始体验

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

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

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

创建项目

首先我们试着创建一个项目,如下图:

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

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

1.创建

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

2. 预设项目

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

3. 自定义功能

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

4. 配置

这一步,我们需要配置:

  • 是否使用类样式语法
  • TypeScript 自动选择 polyfill
  • 使用 history 路由还是 hash 路由(默认使用hash路由,如果使用history路由则需要服务端做相应配置)
  • 选择使用的 css预处理语言 : scss/sasslessstylus
  • 选择代码检查或者格式化的配置: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 图标,可以选择开发环境,生产环境,测试环境。

总结

vue ui 提供了一套完整的vue项目构建的页面。既保留了vue-cli的即开即用的便利性,同时也保证了webpack配置的自由度。

对于使用vue-cli的用户来说,友好度非常高,整个功能从构建到管理到优化。对于开发者来说十分友好。页面也很炫酷,各个功能都恰到好处。

think more,code less

原文地址:https://www.cnblogs.com/DDante/p/9432253.html

时间: 2024-10-12 13:04:34

vue UI 告别webpack配置的相关文章

@vue/cli 3 安装搭建及 webpack 配置

首先卸载旧版1 npm uninstall vue-cli -g //or 2 yarn global remove vue-cli 再次安装 1 npm install -g @vue/cli 2 //or 3 yarn global add @vue/cl 查看版本 vue --version //or vue -V 创建项目vue create  my-project //项目名// Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作.  //你必须通过  

vue-cli#2.0 webpack 配置分析

目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前端Vue多页面)中,我们尝试从webpack-simple原型项目改造为一个多页面的Vue项目.而这里,我们继续往前,尝试把Vue多页面改造为Nodejs直出.由于步骤较多,所以本文片幅较长. 本文源代码:https://github.com/kenkozheng/HTML5_research/tr

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外的好处.例如手Q的多webview架构,新开页面有利于ios右划返回,也避免了返回时页面的刷新. 所以,这里我们探讨一下如何配置实现多页面的项目框架.这里是开篇,先以最简单的纯前端多页面为例入手,最终目标是完成Node.js多页面直出+前后端同构的架构. 本文源代码:https://github.c

移动端(钉钉微服务)webpack配置需要移除hash来解决应用更新后白屏的问题

钉钉微服务webpack配置调整方案 1: Vue CLI配置修改方法 a. 修改build下webpack.prod.config.js.去掉图中三处hash(.[chunkhash]): b. 修改build下webpack.base.config.js.去掉图中hash: 2: 非Vue CLI配置修改方法: 类似CLI,通常去除config文件中的output的filename和chunkFilename的hash值以及rules中对应的hash值. 原文地址:https://www.c

vue-cli中webpack配置解析

版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.de

vue利用vue ui命令创建项目

上次用git bash,用create 命令创建vue项目,这是玩个炫酷的------vue ui (前提是有安装node.js). 在目标文件  vue ui 可以看到他在8000端口出现了一个gui图形窗口 剩下的基本很友好.点击创建项目,会让填项目名称,选择包管理工具,是否上传git, 然后让选择预设.预设就是你的下载loader包的配置. 你如果想要彻底删除以前自己保存的预设,可以找c盘下的用户,搜索 .vuerc,把你不想要的预设删除就可以了. 最后一步点击创建项目,vue-cli 会

Vue(四)之webpack和vue-cli

01-webpack介绍 官方文档:https://www.webpackjs.com/concepts/ 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. # 全局下载webpack的3.12.0版本 npm install [email pro

Vue UI:Vue开发者必不可少的工具

译者按: Vue开发工具越来越好用了! 原文: Vue UI: A First Look 译者: Fundebug 本文采用意译,版权归原作者所有 随着最新的稳定版本Vue CLI 3即将发布,是时候来看看有什么新鲜有趣的特性了.基于整个Vue.js开发者社区的反馈而大幅度改良,该版本提供了很多以工作流为中心的工具. 我想会提升每一位Vue.js的开发者工作效率的特性就是Vue UI.一个可视化图形界面方便你去创建.更新和管理项目的方方面面. 今天,我会跟你一一介绍Vue UI的beta版本中可