vue.js客服系统实时聊天项目开发（一）路由与子路由 |
您所在的位置：网站首页 › vuerouter的方法 › vue.js客服系统实时聊天项目开发（一）路由与子路由 |
|
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 命令安装。
再来看看main.js 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 十年开发经验程序员，离职全心创业中，历时三年开发出的产品《唯一客服系统》一款基于Golang+Vue开发的在线客服系统，软件著作权编号：2021SR1462600。一套可私有化部署的网站在线客服系统，编译后的二进制文件可直接使用无需搭开发环境，下载zip解压即可，仅依赖MySQL数据库，是一个开箱即用的全渠道在线客服系统，致力于帮助广大开发者/公司快速部署整合私有化客服功能。
开源地址：唯一客服（开源学习版）
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |