Vue ：项目遇到的问题汇总

登录登出 >主页>用户列表>添加用户>权限列表>角色列表>商品分类>分类参数>商品列表>商品分类

一个vue新项目需要什么：

　　插件：babel，eslint ， router，element ；运行依赖：axios，element-ui vue-router ；开发依赖： eslint ，less ， less-loader

　　新建好项目后： 、assets/css/global.css 全局css文件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/user/User.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home,
    redirect: '/weclome',
    children: [
      { path: '/weclome', component: Welcome },
      { path: '/users', component: Users }
    ]
  }
]

const router = new VueRouter({
  routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径；from 从哪个路径跳转过来；next是一个函数，表示放行
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  // todo 实际上这里需要对token的验证，不然在网站填一个token也能进入到home页面,使用axios拦截器验证token
  next()
})

export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 全局css属性
import './assets/css/global.css'
// 导入axios包
import axios from 'axios'
// 设置请求根路径
axios.defaults.baseURL = 'http://localhost:8080/api/' // 测试端口http://localhost/product/detail.do?productId=28
// axios设置拦截器
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  console.log(config)
  return config
})
// 挂载到vue的原型对象上,每一个vue组件都可使用this访问axios
Vue.prototype.$http = axios

Vue.config.productionTip = false

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

 

👉 学习一下less，内容很少，官方文档：https://less.bootcss.com/

👉 vscode安装eslint,并设置：安装后， 文件>首选项>设置>搜索eslint>点击下边随便的 setting.json >在{}内添加以下代码：

    "eslint.alwaysShowStatus": true,//显示erlint是否运行
    "eslint.quiet": true,//不再显示因为eslint而显示的错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    }

 👉 vue-cli解决 跨域问题： https://zhuanlan.zhihu.com/p/76142250   。注意修改配置后要重新启动；如果代理的路径找不到，还是会去找不代理的路径。

 👉 没有访登录不能访问某个页面： 路由导航守护

 👉 单点登录全称Single Sign On（以下简称SSO），是指在多系统应用群中登录一个系统，便可在其他所有系统中得到授权而无需再次登录，包括单点登录与单点注销两部分

　　https://www.cnblogs.com/ywlaker/p/6113927.html

　　https://juejin.im/post/5cdd42f9518825693f1ebf8d

 👉 储存token https://blog.csdn.net/kevinfan2011/article/details/95166073 

 👉 路由导航守护

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径；from 从哪个路径跳转过来；next是一个函数，表示放行
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  // todo 实际上这里需要对token的验证，不然在网站填一个token也能进入到home页面,使用axios拦截器验证token
  next()
})

 👉 axios

 👉 表单验证https://blog.csdn.net/weixin_41557291/article/details/80772412

 👉 访问子组件，获取到这个组件的内容 ref   https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0

 👉 访问本地图片问题

  访问本地图片：<el-avatar :src="require('../../assets/logo01.png')"></el-avatar>                    上传后不更新https://www.jianshu.com/p/abe2142ce008 

 👉  弹性布局 align-items    http://caibaojian.com/demo/flexbox/align-items.html              display: flex;       justify-content: space-between;

 👉 vue全局键盘监听https://blog.csdn.net/qq_24495287/article/details/89002807

 👉 获取网站icon     https://mikublog.com/tech/953        https://favicon.link/

 👉 图片上传： 思想： https://www.jianshu.com/p/85a52da879bb  具体实现;https://juejin.im/post/5b3f14c2f265da0f5405080f 

　　注意：el-upload开启list-type="picture"，才能在 vue-cropper 显示出图片

 👉  element-ui控件的 点击事件不起作用 ：修改成 @click.native

  vuex

    // 获取vuex
    console.log('vuex', this.$store.state.webInfo.categoryTabActive)
    // 设置vuex
    this.$store.commit('categoryTabActiveChange', '5')
    // 获取vuex
    console.log('vuex', this.$store.state.webInfo.categoryTabActive)

 👉  SFTP(FileZilla) 方便的上传/下载文件 https://www.jianshu.com/p/3648891b17eb

 👉 部署： nginx配置如下，项目打包前要将axios的请求地址改为 nav.anitano.cn/api/

    #nav导航网站
    server{
        listen       80;
        server_name  nav.anitano.cn;
        location /{
              root /data/nav/dist/;
              index index.html index.html;
        }
        #nav导航网站对后端请求转发
        location /api/{
              proxy_pass  http://localhost:8001/nav/;
        }
    }

 

 

 

 

 

。