乐趣区

关于前端:vuejs客服系统实时聊天项目开发一路由与子路由全局变量elementui搭建基本框架

jiezi

Vue 应用程序设置一些根本配置，包含应用依赖项，设置路由，挂载组件等。这样就能够应用 Vue 框架开发应用程序了先来看看我的客服零碎我的项目的 package.json

{
  "name": "VueLiveChat",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "core-js": "^2.6.5",
    "element-ui": "^2.15.10",
    "sass": "^1.56.0",
    "sass-loader": "^7.3.1",
    "vue": "^2.6.10",
    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

“name”: “VueLiveChat” 示意项目名称为 VueLiveChat
“version”: “0.0.1” 示意我的项目版本为 0.0.1
“private”: true 示意我的项目是公有的，不会被公布到 npm 仓库
“scripts” 蕴含了两个脚本，”serve” 和 “build”。能够应用 npm run serve 或 npm run build 在终端中运行这两个脚本
“dependencies” 蕴含了我的项目运行所需的依赖项，如 axios, element-ui，vue-router 等。
“devDependencies” 蕴含了开发我的项目所需的依赖项，如 @vue/cli-service，vue-template-compiler 等。
所有的依赖项都有对应的版本号，如 “axios”: “^1.1.3” 示意 axios 的版本号为 1.1.3。这些依赖项会在我的项目中应用到，能够应用 npm install 命令装置。`

import Vue from 'vue'
import VueRouter from 'vue-router'
import ElementUi from 'element-ui'
import axios from 'axios'

import 'element-ui/lib/theme-chalk/index.css';

import Login from './components/Login.vue'
import ChatPage from './components/ChatPage.vue'
import ChatApp from './components/ChatApp.vue'
import Main from './components/Main.vue'
import OnlineVisitor from './components/OnlineVisitor.vue'

import App from './App.vue'
//Vue.config.productionTip = false
Vue.prototype.ApiHost = 'https://gofly.v1kf.com';
Vue.prototype.$axios= axios

Vue.use(VueRouter)
Vue.use(ElementUi)

const routes = [{ path: '/login', component: Login},
  {path: '/chatPage', component: ChatPage},
  {path: '/chatApp', component: ChatApp},
  { path: '/main', component: Main ,
    children:[
        {
          path:'onlineVisitor',
          component:OnlineVisitor
        },
    ]
  },
]

const router = new VueRouter({routes})

const app = new Vue({render: h => h(App),
    router
}).$mount('#app')

应用了 VueRouter、ElementUi 和 axios 等依赖项。代码导入了多个组件，如 Login、ChatPage、ChatApp、Main 和 OnlineVisitor。它应用 VueRouter 设置不同的路由并将 App 组件挂载到 HTML 页面的 #app 元素上。

在路由设置中，它定义了多个路由，每个路由对应一个组件。例如，当拜访 /login 时，会显示 Login 组件。它还设置了一个子路由，在 /main 的路由下还有一个 onlineVisitor 的路由，对应的组件是 OnlineVisitor。

还设置了一个全局变量 ApiHost 和 $axios。应用了 Vue.prototype.ApiHost 将 ApiHost 设置为全局变量，并且赋值为 ‘https://gofly.v1kf.com’，这样所有的 Vue 组件都能够拜访这个变量。同理 Vue.prototype.$axios 也是一样的, 这样就能够在所有组件中应用 $axios 拜访 axios 模块。这样设置全局变量有助于在利用中重用常量和变量。

惟一在线客服零碎

https://gofly.v1kf.com

退出移动版