├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── api │ ├── index.js │ └── modules │ │ └── HomeApi.js ├── components │ ├── AMISRenderer.vue │ ├── Navbar.vue │ ├── Sidebar.vue │ ├── SidebarItem.vue │ └── Topbar.vue ├── index.scss ├── main.js ├── router │ ├── index.js │ ├── menu.js │ └── modules │ │ └── guard.js ├── store │ ├── index.js │ └── modules │ │ └── App.js └── views │ ├── Form.vue │ ├── Home.vue │ ├── Layout.vue │ ├── Mixed.vue │ ├── Table.vue │ └── Tabs.vue └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Files 2 | .DS_Store 3 | .ruby-version 4 | test.sass 5 | npm-debug.log 6 | yarn.lock 7 | 8 | # Folders 9 | .idea/ 10 | .sass-cache 11 | gh_pages 12 | _site 13 | node_modules 14 | /dist 15 | /lib 16 | /sdk 17 | /public 18 | /gh-pages 19 | /.vscode/* 20 | /output 21 | /toolkit/amis-renderer 22 | /toolkit/output 23 | /coverage 24 | /schema.json 25 | /npm 26 | /mock/cfc/cfc.zip 27 | /jssdk 28 | .rollup.cache 29 | 30 | dist 31 | tsconfig.tsbuildinfo 32 | lerna-debug.log 33 | .rollup.cache 34 | package-lock.json 35 | revision.json 36 | **/revision.json 37 | ~$* 38 | 39 | !/.vscode/iconConfig.json 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VUE 2 AMIS DEMO 2 | 3 | 用来演示在 vue2 中如何使用 amis，演示如何交叉调用。 4 | 5 | ## 如何运行 6 | 7 | ```bash 8 | // 安装依赖 9 | npm i 10 | 11 | 12 | // 启动服务 13 | npm run serve 14 | ``` 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vite Vue2 Simple Starter 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue2-amis-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "serve": "vite", 9 | "serve:dev": "vite --mode development", 10 | "serve:prod": "vite --mode production", 11 | "build": "vite build", 12 | "build:dev": "vite build --mode development", 13 | "build:prod": "vite build --mode production" 14 | }, 15 | "author": "", 16 | "license": "ISC", 17 | "dependencies": { 18 | "amis-core": "6.9.0", 19 | "amis-formula": "6.9.0", 20 | "amis-ui": "6.9.0", 21 | "amis": "6.9.0", 22 | "axios": "^1.4.0", 23 | "element-ui": "^2.15.13", 24 | "qs": "^6.11.2", 25 | "vue": "^2.7.14", 26 | "vue-router": "^3.6.5", 27 | "vuex": "^3.6.2" 28 | }, 29 | "devDependencies": { 30 | "@vitejs/plugin-legacy": "^4.1.0", 31 | "sass": "^1.63.6", 32 | "vite": "^4.4.3", 33 | "vite-plugin-compression": "^0.5.1", 34 | "vite-plugin-static-copy": "^1.0.1", 35 | "vite-plugin-vue2": "^2.0.3", 36 | "vue-template-compiler": "^2.7.14" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 13 | -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | /** 4 | * AXIOS INTERCEPTOR 5 | * INTERCEPTORS.REQEUST.USE => BEFORE REQUEST 6 | * INTERCEPTORS.RESPONSE.USE => AFTER RESPONE 7 | */ 8 | 9 | const service = axios.create({ 10 | baseURL: 'http://www.sample.com', 11 | withCredentials: true, 12 | timeout: 30000 13 | }) 14 | 15 | service.interceptors.request.use((config) => { 16 | 17 | }, (error) => { 18 | 19 | }) 20 | 21 | service.interceptors.response.use((response) => { 22 | 23 | }, (error) => { 24 | 25 | }) 26 | 27 | export default service; -------------------------------------------------------------------------------- /src/api/modules/HomeApi.js: -------------------------------------------------------------------------------- 1 | import service from '..' 2 | /** 3 | * AXIOS MODULE SAMPLE 4 | */ 5 | const DEFAULT_HEADER = { 6 | 'TEST': "TEST" 7 | } 8 | 9 | export default { 10 | getDataList: (data) => { 11 | return service({ 12 | method: 'GET', 13 | url: "urlSample", 14 | data: data, 15 | headers: DEFAULT_HEADER 16 | }) 17 | } 18 | } -------------------------------------------------------------------------------- /src/components/AMISRenderer.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 25 | -------------------------------------------------------------------------------- /src/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 45 | -------------------------------------------------------------------------------- /src/components/SidebarItem.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | -------------------------------------------------------------------------------- /src/components/Topbar.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #app, 4 | .app-wrapper { 5 | margin: 0; 6 | padding: 0; 7 | width: 100%; 8 | height: 100%; 9 | position: relative; 10 | } 11 | 12 | .app-wrapper { 13 | display: flex; 14 | } 15 | 16 | #main-aside > .el-menu { 17 | height: 100%; 18 | } 19 | #main-container { 20 | padding: 0; 21 | position: relative; 22 | } 23 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import ElementUI from "element-ui"; 3 | import "element-ui/lib/theme-chalk/index.css"; 4 | import "./index.scss"; 5 | import App from "@/App.vue"; 6 | import store from "@/store"; 7 | import router from "@/router"; 8 | 9 | Vue.use(ElementUI); 10 | 11 | Vue.config.productionTip = false; 12 | 13 | new Vue({ 14 | router, 15 | store, 16 | render: (h) => h(App), 17 | }).$mount("#app"); 18 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter from "vue-router"; 3 | import Layout from "../views/Layout.vue"; 4 | import menu from "./menu"; 5 | 6 | Vue.use(VueRouter); 7 | 8 | const createRouter = () => 9 | new VueRouter({ 10 | routes: [ 11 | { 12 | path: "/", 13 | redirect: "/index", 14 | component: Layout, 15 | name: "main", 16 | meta: { 17 | title: "首页", 18 | icon: "fa fa-yx-home", 19 | }, 20 | children: menu, 21 | }, 22 | ], 23 | }); 24 | 25 | const router = createRouter(); 26 | export default router; 27 | -------------------------------------------------------------------------------- /src/router/menu.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | path: "index", 4 | name: "index", 5 | component: () => import("@/views/Home.vue"), 6 | meta: { 7 | title: "首页", 8 | }, 9 | }, 10 | { 11 | path: "table", 12 | name: "table", 13 | component: () => import("@/views/Table.vue"), 14 | meta: { 15 | title: "Table", 16 | }, 17 | }, 18 | { 19 | path: "form", 20 | name: "form", 21 | component: () => import("@/views/Form.vue"), 22 | meta: { 23 | title: "Form", 24 | }, 25 | }, 26 | { 27 | path: "tabs", 28 | name: "tabs", 29 | component: () => import("@/views/Tabs.vue"), 30 | meta: { 31 | title: "Tabs", 32 | }, 33 | }, 34 | { 35 | path: "mixed", 36 | name: "mixed", 37 | component: () => import("@/views/Mixed.vue"), 38 | meta: { 39 | title: "Mixed", 40 | }, 41 | }, 42 | ]; 43 | -------------------------------------------------------------------------------- /src/router/modules/guard.js: -------------------------------------------------------------------------------- 1 | import router from ".."; 2 | /** 3 | * Vue-router Navigation Guard 4 | */ 5 | //External Route Guard Before Routing 6 | router.beforeEach((to, from, next) => { }) 7 | 8 | //External Route Guard After Routing 9 | router.afterEach((to, from) => { }) -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import App from './modules/App' 4 | 5 | Vue.use(Vuex); 6 | 7 | export default new Vuex.Store({ 8 | strict: true, 9 | modules: { 10 | App 11 | } 12 | }) -------------------------------------------------------------------------------- /src/store/modules/App.js: -------------------------------------------------------------------------------- 1 | const state = {}; 2 | 3 | const mutations = {}; 4 | 5 | const actions = {}; 6 | 7 | const getters = {}; 8 | 9 | export default { 10 | state, mutations, actions, getters 11 | } -------------------------------------------------------------------------------- /src/views/Form.vue: -------------------------------------------------------------------------------- 1 | 4 | 52 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 30 | -------------------------------------------------------------------------------- /src/views/Layout.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 74 | -------------------------------------------------------------------------------- /src/views/Mixed.vue: -------------------------------------------------------------------------------- 1 | 18 | 113 | -------------------------------------------------------------------------------- /src/views/Table.vue: -------------------------------------------------------------------------------- 1 | 4 | 167 | -------------------------------------------------------------------------------- /src/views/Tabs.vue: -------------------------------------------------------------------------------- 1 | 4 | 221 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import legacy from "@vitejs/plugin-legacy"; 3 | import { createVuePlugin } from "vite-plugin-vue2"; 4 | import viteCompression from "vite-plugin-compression"; 5 | import path from "path"; 6 | import { viteStaticCopy } from 'vite-plugin-static-copy'; 7 | 8 | const HOST = "0.0.0.0"; 9 | const REPLACEMENT = `${path.resolve(__dirname, "./src")}/`; 10 | 11 | export default (/** if you want to use mode : { mode }*/) => { 12 | return defineConfig({ 13 | base: "./", 14 | server: { 15 | host: HOST, 16 | port: process.env.PORT, 17 | }, 18 | resolve: { 19 | extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"], // .vue added 20 | alias: [ 21 | { 22 | find: "@/", 23 | replacement: REPLACEMENT, 24 | }, 25 | { 26 | find: "src/", 27 | replacement: REPLACEMENT, 28 | }, 29 | ], 30 | }, 31 | plugins: [ 32 | viteStaticCopy({ 33 | targets: [ 34 | { 35 | src: path.resolve(__dirname, './node_modules/amis/sdk') + '/[!.]*', 36 | dest: 'amis/sdk' 37 | } 38 | ] 39 | }), 40 | createVuePlugin(/* options */), 41 | legacy({ 42 | targets: ["ie >= 11"], 43 | additionalLegacyPolyfills: ["regenerator-runtime/runtime"], 44 | }), 45 | viteCompression(), 46 | ], 47 | }); 48 | }; 49 | --------------------------------------------------------------------------------