阅读 3503

可视化构建工具探索之Vue Cli3.0 & 阿里飞冰

Vue Cli3.0可视化构建工具——Vue UI

一、安装环境

安装了最新的Vue CLI。打开Terminal,输入: npm install -g @vue/cli or yarn global add @vue/cli

使用-V来查看刚刚安装的版本: vue -V 3.0.0-rc.10

更新vue-cli之后,之前的2.0版本的构建方式就不可用了 需要再下载

yarn global add @vue/cli-init

初始化Vue UI,在一个干净的目录下输入:

vue ui

该命令自动打开浏览器,显示如下界面

二、添加项目

添加新项目有两种方式

1.可视化添加

可视化添加

如果保存过自定义项目配置,开始创建时,会在第一个选项显示;配置的选项会同步到vue.config.js这个文件中

点击创建项目之后,可以保存此次配置,在以后创建项目时使用相同配置

跳过此次步骤,开始下载相关插件,此时命令行同步下载,可视化工具通过操控命令行来新建项目

2.命令行添加

vue create <project-name>

? Please pick a preset: (Use arrow keys)
❯ my-test (vue-router, vuex, sass, babel, eslint)
  default (babel, eslint)
  Manually select features
  
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
 
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): SCSS/SASS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
 ? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n
复制代码

按下空格键进行选取

Vue CLI v3.0.0-rc.10
✨  Creating project in /Users/zjy/ttt.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.0.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
⠐ @babel/highlight@7.0.0-beta.47
复制代码

开始构建项目

三、工具分析

1.插件

安装完成之后,可以查看项目下安装的插件,可以添加其他插件

2.依赖

查看项目依赖的资源,可以直接查看相关官网或源码

3.配置

可对项目进行配置,配置的选项会在vue.config.js中

4.任务

可以本地调试,打包,

对项目进行性能分析

四、Vue Cli3项目结构分析

少了很多文件夹,目录结构更加清晰,vue-cli2.0中的build,config统一到了vue.config.js中 移除了static文件夹,添加了public Src中添加了views文件夹,用来存放视图组件,components中存放公共组件

1.vue.config.js配置

参考文档:配置文档

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 compiler: false,
 // 调整内部的 webpack 配置。
 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行为。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
 ....
}
复制代码

阿里飞冰

飞冰:官网

进如官网下载GUI工具,选择模板创建项目,项目页面可选择区块添加组件

enter image description here
enter image description here

选择模板,新建项目

enter image description here
enter image description here
enter image description here
创建好的项目目录
enter image description here

本地调试:

enter image description here

页面中添加组件

点击页面列表右侧对应的+号,即可选择对应框架下的物料源,将在该页面目录下生成一侧Component文件夹,存放下载的组件资源,配置路之后,即可生效。

项目目录

enter image description here

导入已有项目

项目适配设置:文档

已有项目接入 Iceworks

将已有项目接入到 Icewokrs 中,需要增加对应信息的项目描述

  1. 描述项目可被 Iceworks 识别 package.json 文件 keywords 字段增加 ice-scaffold 表示这是一个适配 ice 规范的模板项目。
{
  "name": "my-project",
  "keywords": ["ice-scaffold"],
  // ...
}
复制代码
  1. 描述项目使用的框架语言

package.json 文件增加 scaffoldConfig 字段对象,示例如下:

{
  // ...
  "scaffoldConfig": {
    "type": "react",
    "name": "ice-design-pro",
    "title": "ICE Design Pro",
    "screenshot": "https://img.alicdn.com/tfs/TB1_bulmpOWBuNjy0FiXXXFxVXa-1920-1080.png"
  }
}
复制代码

其中 scaffoldConfig.type 字段描述当前项目所使用的框架名 react vue angular 等,此字段用于与物料源相映射。

  1. package.json 存在可执行命令 npm run start npm run build

这两个命令用于 启动调试服务 构建项目 功能使用,你可以使用自己定义的命令行工具。

{
  "scripts": {
    "start": "custom-cli start",
    "build": "custom-cli build"
  }
}
复制代码

结语

Vue Cli3.0针对vue项目进行可视化构建,阿里飞冰针对了主流的三大框架,但对react物料支持最多,同时也支持自定义物料进行构建。但该产品目前处于初期阶段,不足之处较多,例如项目下载依赖失败率较大,导入的项目页面目录必须为pages,编译之后的文件目录必须为build,否则软件无法识别并进行展示。随着软件进一步优化,这些问题应该会逐步解决。对于有自己固定框架模板的团队来说,可以考虑使用这样一套成熟的工具来快速搭建项目。

广而告之

本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。

欢迎讨论,点个赞再走吧 。◕‿◕。 ~

关注下面的标签,发现更多相似文章
评论

查看更多 >