Vue-项目实战-集成admin-解决各类报错问题

正在改错

已于 2022-03-17 21:59:16 修改

阅读量722

点赞数

文章标签： vue.js javascript ecmascript

于 2022-03-17 21:40:39 首次发布

本文链接：https://blog.csdn.net/m0_61621530/article/details/123560524

版权

1版本问题vue2和vue3的main.js不同，一定要注意老师用的那个版本

2idea导入admin，代码不V图标，和没有代码提示（要在html中有提示新建一个 test.vue）

在插件市场中Vue.js

3代码检查问题

在.eslintr.js文件中添加

'no-mixed-spaces-and-tabs':0,
'no-undef': 'off',

可以针对自己的问题反复尝试，网上主要就这两种方法

4集成vue-router

1可以用命令生成也可以复制一个router.js,router.js是main.js的子路由

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'/*转发到子路由*/

Vue.config.productionTip = false

new Vue({
  router,/*和第三行对应*/
  render: h => h(App),
}).$mount('#app')

router.js

import Vue from "vue"
import Router from "vue-router"
import Login from "./views/login.vue"/*配置路由*/
import Admin from "./views/admin.vue"
import welcome from "./views/admin/welcome.vue"


Vue.use(Router);

export default new Router({
    mode: "history",/*地址栏格式还有一种hash */
    base: process.env.BASE_URL,
    routes: [{
        path: "*",
        redirect: "/login",/*在地址栏中输入/login就能进入login.vue*/

    },
         {
        path: '/login',
        component: Login
    },
     {
        path: '/admin',
        component: Admin,
       children:[{
         path: 'welcome',/*配置admin的子路由*/
         component: welcome,
       }]

    }]
})

还要在package.json中添加

vue-router的依赖

"dependencies": {
    "babel-eslint": "^10.0.3",
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.1.3"
  },

5vue<script>中的页面跳转的语法


<script>

    export default {
        name: 'login',
      mounted:function(){
        $('body').removeClass('no-skin');/*移除no-skin 渲染*/
        $('body').attr('class', 'login-layout light-login');/*添加login-layout light-login 渲染*/
        //console.log(login)
      },
      methods:{
         login1(){/*login1事件*/
            this.$router.push("/admin")/*在地址栏中输入admin 跳转到admin.vue*/
          }

      }

    }
</script>