spring cloud+vue在线视频网站 3.vue搭建管理页面

最新推荐文章于 2024-08-17 13:49:41 发布

Mosiclone

最新推荐文章于 2024-08-17 13:49:41 发布

阅读量6.6w

点赞数

本文链接：https://blog.csdn.net/Mosiclone/article/details/108715392

版权

本文介绍了如何使用Vue创建管理页面，包括集成bootstrap后台管理模板ace，设置路由vue-route，以及进行后台管理页面的初步开发。在过程中详细讲述了创建vue项目，引入ace模板，处理路由和解决报错的方法。

摘要由CSDN通过智能技术生成

1 使用 vue 创建 admin 项目

使用 vue 创建前端项目网上有很多教程，这里简单说一下。
首先需要有 npm 和 node，先下载这两个工具。brew install npm 和brew install node，完成后可以npm -v和node -v检查，若显示版本号说明安装成功。(新版本 node 自带 npm)
然后在 idea 打开 terminal 输入npm install -g @vue/cli 下载 vue 脚手架，安装成功后输入 vue create admin 创建一个新的 vue 项目，这里一直 y 走完即可。
进入 admin 文件夹后执行 npm run dev ，可以在http://localhost:8080看到 vue 的欢迎页面。
如果 main.js 文件的 import 报红，应该是 es 的版本问题，修改成 es6 后就消失了。
在这里插入图片描述

2 集成 bootstrap 后台管理模板 ace

ace 是集成 bootstrap 的一个后台管理模板，可以直接去 github链接下载，导入到 admin 中到 public 文件夹中。接着使用 ace 模板中的页面，首先是 login 页面，先将 ace 文件夹中的 login.html 文件中的 head 标签内的内容和 script 引入 js 的部分拷贝到 public 文件夹中的 index.html。其中，在 login.html 中，<script src="assets/js/jquery-2.1.4.min.js"></script> 这种绝对路径引用的方式复制到 index.html 中后会读取不到，需要改成<script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script>。全部替换后 index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Login Page - Ace Admin</title>

    <meta name="description" content="User login page" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/fonts.googleapis.com.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-part2.min.css" />
    <![endif]-->
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-rtl.min.css" />

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="<%= BASE_URL %>ace/assets/css/ace-ie.min.css" />
    <![endif]-->

    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

    <!--[if lte IE 8]>
    <script src="<%= BASE_URL %>ace/assets/js/html5shiv.min.js"></script>
    <script src="<%= BASE_URL %>ace/assets/js/respond.min.js"></script>
    <![endif]-->
    <!--[if !IE]> -->
    <script src="<%= BASE_URL %>ace/assets/js/jquery-2.1.4.min.js"></script>

    <!-- <![endif]-->

    <!--[if IE]>
    <script src="<%= BASE_URL %>ace/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script type="text/javascript">
      if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这时运行 serve ，进入 localhost8080 如果可以看到引用的 bootstrap 等文件说明引入成功。
在这里插入图片描述
接着把 login.html 中的 div 复制到 app.vue 中的 template 中，删除其他没有用到的 css 之类的部分。

<template>
  <div class="main-container"...><!-- /.main-container -->
</template>

<script>
  $('body').attr('class', 'login-layout light-login');
export default {
    
  name: 'App'
}
</script>

其中，因为$('body').attr('class', 'login-layout light-login');复制错误，报错 no-undef ，最终修改了 package.json 中 es 的 rules 解决，rules 也可能在 .eslintrc.js 中。

{
   
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
   
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
   
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },
  "eslintConfig": {
   
    "root": true,
    "env": {
   
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
   
      "parser": "babel-eslint"
    },
    "rules": {
   
      "no-undef": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

这里就成功的将 login 页面引入到 admin 项目中。

3 集成路由 vue-route

下面先在 src 文件夹新建一个 router.js 文件来作为路由，同时新建一个 view/login.vue 文件，把之前 app.vue 中的代码粘贴进去，最后在 main.js 中将 router 添加进 vue 根目录。

修改后的 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
   
  router,  //将router.js中的路由添加进app
  render: h => h(App),
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login.vue'

Vue.use(Router)

export default new Router({
   
    mode: 'history',  //路由设置为history模式
    base: process.env.BASE_URL,
    routes: [{
   
        path: '*', 
        redirect: '/login', // *匹配所有字符重定向到login页面
    }, {
   
        path: '/login',
        component: Login,
    }]
})

app.vue

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

添加了登陆页面之后添加一个管理页面，这里用 blank.html 。复制 blank 中的两段 div 代码，其中因为包含 script ，所以会报错，这里把中间的两段 script 代码删掉。这个版本的 vue 语法中，template 只能包含一个 div ，所以用一个 div 将上面两个 div 包住。

admin.vue 的最终代码如下：

<template>
    <div>
        <div id="navbar" class="navbar navbar-default          ace-save-state"...>
        <div class="main-container ace-save-state" id="main-container"...><!-- /.main-container -->
    </div>
</template>

这时访问 http://localhost:8080/admin 背景会有问题，因为在 login 中添加的背景在 admin 中依然存在。
这时需要修改 login 和 admin 中的 script 部分，添加下面代码：

<script>
    export default {
   
        name: "login",
        mounted: function(){
   
            $('body').removeClass('no-skin');
            $('body').attr('class', 'login-layout light-login');