背景

最近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 create hello-world

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 pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  Sass/SCSS ❯ Less  Stylus 

Css的预处理器选择Less。

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 pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less? Pick a linter / formatter config:  ESLint with error prevention only  ESLint + Airbnb config  ESLint + Standard config ❯ ESLint + Prettier 

代码标记和格式化，选择ESLint + Prettier。

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 pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less? 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

Lint的其他功能，选择Lint on save。

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 pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)❯ In dedicated config files  In package.json 

In dedicated config file表示专门给该项目定制配置文件。

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 pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files? Save this as a preset for future projects? (y/N) N

默认选择No，表示不把现在的配置设置为本机的默认配置。 如果这里创建工程非常慢，需要注意两点，查看~/.vuerc文件中，是否配置了淘宝镜像:

{ "useTaobaoRegistry": true}

第二点，去掉npm的代理设置：

npm config set proxy null npm config set https-proxy null

这样处理之后，就可以正常的创建vue工程了。 看到如下类似文字，表示vue工程创建成功。

added 1427 packages from 781 contributors in 23.935s Invoking generators... Installing additional dependencies...added 21 packages from 70 contributors in 10.153s⚓ Running completion hooks... Generating README.md... Successfully created project hello-world. Get started with the following commands: $ cd hello-world $ npm run serve

验证vue工程，是否有效：

 $ cd hello-world $ npm run serve DONE Compiled successfully in 3106ms 11:50:30  App running at: - Local:   - Network: unavailable Note that the development build is not optimized. To create a production build, run npm run build.

在浏览器中打开，没有报错，说明vue工程创建成功。

EasyUI添加easyui到vue工程

npm install vx-easyui --savenpm WARN babel-loader@8.0.2 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.+ vx-easyui@1.0.1added 1 package from 1 contributor and audited 12409 packages in 9.434sfound 0 vulnerabilities

在main.js文件中添加文本，如下：

import 'vx-easyui/dist/themes/default/easyui.css';import 'vx-easyui/dist/themes/icon.css';import 'vx-easyui/dist/themes/vue.css';import EasyUI from 'vx-easyui';Vue.use(EasyUI);

新建MyEasyUI.vue,如下实现：

<template> <div> <DataGrid :data="data" style="height:250px"> <GridColumn field="itemid" title="Item ID"></GridColumn> <GridColumn field="name" title="Name"></GridColumn> <GridColumn field="listprice" title="List Price" align="right"></GridColumn> <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn> <GridColumn field="attr" title="Attribute" width="30%"></GridColumn> <GridColumn field="status" title="Status" align="center"></GridColumn> </DataGrid> </div></template><script> export default { data() { return { data: [ {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"}, {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"}, {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"}, {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"}, {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"}, {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"}, {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"}, {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"}, {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"}, {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"} ] } } }</script>

如下效果：

MyEasyUIHome.vue

在MyEasyUIHome.vue的View中使用MyEasyUI组件，如下实现：

<template> <div class="home"> <MyEasyUI /> </div></template><script>// @ is an alias to /srcimport MyEasyUI from "@/components/MyEasyUI.vue";export default { name: "MyEasyUIHome", components: { MyEasyUI }};</script>

如下图：

设置网页入口App.vue

添加一个easyui的页面入口，在App.vue中，主要是添加一行:

 <router-link to="/myeasyui">EasyUI</router-link>

如下图:

设置Vue路由router.jsvue.config.js

在工程根目录，新建vue.config.js文件，配置Webpack：

module.exports = { configureWebpack: { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 } } }}

如下图：

这样就启用了vue的运行时+编译器模式，进行运行。

到这里为止，就可以完成了vue+easyuivue的使用了。

效果源码

hello_vue_easyui