未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

安装了最新的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 :sparkles: 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] :mag: 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工具,选择模板创建项目,项目页面可选择区块添加组件


可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
选择模板,新建项目
可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰

创建好的项目目录


可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
本地调试:
可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
页面中添加组件

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

项目目录
可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
导入已有项目

项目适配设置: 文档

已有项目接入 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,否则软件无法识别并进行展示。随着软件进一步优化,这些问题应该会逐步解决。对于有自己固定框架模板的团队来说,可以考虑使用这样一套成熟的工具来快速搭建项目。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: vue,项目,gt,cli,config,lt,Vue,添加,配置,features,build,可视化
分页:12
转载请注明
本文标题:可视化构建工具探索之Vue Cli3.0 &amp; 阿里飞冰
本站链接:https://www.codesec.net/view/588631.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(20)