EasyUI的Vue版本

jk 1年前 ⋅ 1396 阅读

源于：今日头条（查看原文）

背景

最近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
⚓ 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);
EasyUI的Vue版本

 

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>

如下效果：

EasyUI的Vue版本

 

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>

如下图：

EasyUI的Vue版本

 

设置网页入口

App.vue

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

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

如下图:

EasyUI的Vue版本

 

设置Vue路由

router.js

EasyUI的Vue版本

 

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
 }
 }
 }
}

如下图：

EasyUI的Vue版本

 

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

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

效果

EasyUI的Vue版本

 

源码

hello_vue_easyui


注意：本文归作者所有，未经作者允许，不得转载

#转载今日头条
阅读全部

全部评论: 0 条

    我有话说: