vue.js客服系统实时聊天项目开发(一)路由与子路由-全局变量-elementui搭建基本框架
2023-02-25 18:19:03 时间
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模块。这样设置全局变量有助于在应用中重用常量和变量。
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023