可视化构建工具探索之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工具，选择模板创建项目，项目页面可选择区块添加组件
选择模板，新建项目
创建好的项目目录
本地调试：
页面中添加组件
点击页面列表右侧对应的+号，即可选择对应框架下的物料源，将在该页面目录下生成一侧Component文件夹，存放下载的组件资源，配置路之后，即可生效。
项目目录
导入已有项目
项目适配设置：文档
已有项目接入 Iceworks
将已有项目接入到 Icewokrs 中，需要增加对应信息的项目描述
- 描述项目可被 Iceworks 识别 package.json 文件 keywords 字段增加 ice-scaffold 表示这是一个适配 ice 规范的模板项目。
{
"name": "my-project",
"keywords": ["ice-scaffold"],
// ...
}
复制代码- 描述项目使用的框架语言
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 等，此字段用于与物料源相映射。
- 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 ★，转载请注明出处。