EasyUI的Vue版本

本文介绍了如何在Vue CLI3环境下,从创建工程到设置路由,一步步集成并使用EasyUI。通过添加EasyUI到Vue工程,配置main.js、创建组件,设置网页入口和Vue路由,实现了Vue应用与EasyUI的结合。最终展示了成功集成后的效果和源码。
摘要由CSDN通过智能技术生成

背景

最近Easyui释放出了vue版本,尝试一波。

vue cli3

cli的全称是command-line interface,即命令行界面,简而意之vue cli就是vue的命令行界面版本。这里假设你已经安装好了npm(全称 Node Package Manager),npm是nodejs的包管理器。vue的cli需要依赖npm来安装。

npm install -g @vue/cli

安装成功后,验证一下vue:

vue --version

创建vue工程

vue create hello-world

设置vue工程

Vue CLI v3.0.3
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

这里选择手动选择功能,即Manually select features

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

这里选择了

  • Babel:JavaScript的编译器。
  • PWA:渐进式网络应用程序(英语:Progressive Web Apps,简称:PWA)是一种普通网页或网站架构起来的网络应用程序,但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。
  • Vue Router:Vue Router 是 Vue.js 官方的路由管理器。
  • Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
  • CSS Pre-processors:css 预处理器。
  • Linter / Formatter:用来标记源代码中有疑义段落的工具和格式化工具。
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-
processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) Y

HTML5 History 模式选择默认的Yes

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-
processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) Yes
? Pick a CSS pr
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值