原 荐 EasyUI的Vue版本

背景

最近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 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 arro
w 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 dedica
ted 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
:anchor:  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:   http://localhost:8081/ 
  - 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 --save
npm 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.1
added 1 package from 1 contributor and audited 12409 packages in 9.434s
found 0 vulnerabilities

使用easyui

main.js

在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

新建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 /src
import 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.js

vue.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

参考：

Installation

Vue CLI 3

Working with Webpack

easyui for vue

vuejs2.0构建import导入时报错问题 运行时构建和独立构建是什么 搞了半天？