最新博文

• Vue 路由设置梳理 （4）首页重定向

  vue

  首页重定向，即进入域名自动切换到首页地址。实现方法有两种：

  （1）App.vue，create()生命周期函数中使用编程实路由跳转

  <template>

    <div id="app">

      <router-view></router-view>

    </div>

  </template>

  
  

  <script>

  export default {

      created(){

        this.$router.push({path:'/auth/index'});

      }

  }

  </script>

  
  

  （2）路由配置文件router/index.js中，' / ' 这个路由路径匹配到首页组件

  const routes=[

      {

          path: "/",

          name: "layout",

          component: () => import("@/components/base/layout"),

          redirect: "/auth/index",

          children: [],

      },

      {

          name:'aIndex',

          path:'/auth/index',

          component:aIndex

      },

      {

          name:'bIndex',

          path:'/base/index',

          component:bIndex

      },

  
  

  
  

  
  

  
  

  风口下的猪2022-06-29【vue】

  阅读更多

• Vue 路由设置梳理 （3）申明式路由跳转及编程式路由跳转

  vue

  vue中的

  申明式路由跳转通过<router-link>标签实现

  编程式路由跳转通过this.$router实现

  两者都在vue-router的install中进行了挂载，所以不用在main中再挂载

    Object.defineProperty(Vue.prototype, '$router', {

      get () { return this._routerRoot._router }

    })

  
  

    Object.defineProperty(Vue.prototype, '$route', {

      get () { return this._routerRoot._route }

    })

  
  

    Vue.component('RouterView', View)

    Vue.component('RouterLink', Link)

  
  

  
  

  重点来了，到底是选择申明式跳转还是event+编程式跳转呢？

  要看具体情况，如果跳转控件在页面跳转后仍然存在（即menu、tab等固定控件），建议使用申明式路由跳转，因为router-link有active-class、exact等属性，能简化样式控制。

  
  

  
  

  风口下的猪2022-06-24【vue】

  阅读更多

• Vue 路由设置梳理 （2）路由规则编写

  vue

  后端路由定义的是路径与函数/接口的映射关系，而前端路由则定义的是路径与组件的映射关系。

  Vue中，前端的页面跳转，实际上是跟组件节点App.vue通过路由规则（路径与组件的映射关系）根据路径调用不同组件进行动态渲染。即vue的页面跳转就是根组件的动态渲染

  
  

  一般将页面放到page或者view文件夹下

  import modulelearn from '@/views/base/module';

  import test from '@/views/base/test';

  import defaultPage from '@/views/base/defaultPage';

  
  

  定义路由规则，主要是path路径属性和component组件属性，即申明路径与组件的映射关系

  const routes=[

      {

          path:'/base/defaultPage',

          name:'defaultPage',

          component:defaultPage

      },

      {

          path:'/base/module',

          name:'modulelearn',

          component:modulelearn

      },

      {

          path:'/base/test',

          name:'test',

          component:test

      }

  ];

  
  

  
  

  注意：

  vue-cli生成项目的@指向src文件夹，src是整个项目的设计文件夹，即项目的资源、代码、页面都放在src

  
  

  风口下的猪2022-06-24【vue】

  阅读更多

• Vue 路由设置梳理 （1）安装及初始路由

  vue

  vue的路由初始，主要分为四个步骤

  （1）安装vue-router插件

  （2）定义路由对象实例

  （3）在main.js中将路由对象实例挂载到vue实例

  （4）在根组件，也就是App.vue中使用<router-view></router-view>标签

  
  

  一.安装vue-router插件

  执行npm install vue-router --save

  不过一般会涉及到版本控制（像composer），所以安装插件时一般带上版本，建议3.5.2这个版本

  npm install vue-router@3.5.2 --save

  
  

  二.定义路由对象实例

  定义对象路由实例，主要包含

  （1）vue-router插件引入

  （2）编写路由规则

  （3）vue-router通过路由规则和其它一些路由参数实例一个路由实例

  （4）导出该路由对象实例，供main.js挂载到vue实例对象上

  import Vue from 'vue';

  import VueRouter from 'vue-router';

  import modulelearn from '@/views/base/module';

  import test from '@/views/base/test';

  import defaultPage from '@/views/base/defaultPage';

  
  

  Vue.use(VueRouter);

  const routes=[

      {

          path:'/base/defaultPage',

          name:'defaultPage',

          component:defaultPage

      },

      {

          path:'/base/module',

          name:'modulelearn',

          component:modulelearn

      },

      {

          path:'/base/test',

          name:'test',

          component:test

      }

  ];

  
  

  const router=new VueRouter({routes:routes});

  export default router;

  
  

  
  

  三.将路由实例挂载到vue实例上

  通过new({})实例中加上router属性及其router值即可

  import Vue from 'vue'

  import App from './App.vue'

  import router from "@lib/router/index.js"

  
  

  Vue.config.productionTip = false

  
  

  new Vue({

    router:router,

    render: h => h(App),

  }).$mount('#app')

  
  

  四.在根组件App.vue中加入router-view标签

  <router-view>标签会根据当前的路径，动态渲染不同的组件替换到router-view的位置

  没有router-view标签，则不能实现视觉上的跳转

  <template>

    <div id="app">

      <router-view />

    </div>

  </template>

  
  

  
  

  
  

  风口下的猪2022-06-24【vue】

  阅读更多

• vue组件化梳理 （1）组件注册

  vue

  组件的注册，主要分为全局组件和局部组件注册

  
  

  一.全局组件的注册

  全局组件，供全局调用，一般放在项目components下

  （1）全局组件在main.js上挂载，使用Vue.component()

  import menuLeft from '@/components/menu_left.vue'

  Vue.component('menu-left',menuLeft)

  
  

  二.局部组件的注册

  局部组件直接放到页面节点，遵循一个功能组既包含页面，也包含功能组下页面所需组件

  eg:

  menu
      ---components
           |___add_picker.vue
           |___edit_button.vue
      ----add.vue
      ----edit.vue

     

  在使用组价的页面

  （1）import引入组件

  （2）在components:{}中申明挂载

  （3）页面中直接使用

  <template>

  <div>

    <test-title></test-title>

    <div class="hello">

      test页面

    </div>

  </div>

  </template>

  
  

  <script>

  import testTitle from "@/views/base/components/test-title.vue";

  export default {

    created(){

      console.log('这里是test')

    },

    components: {

      testTitle

    }

  }

  </script>

  
  

  
  

  
  

  风口下的猪2022-06-23【vue】

  阅读更多

• 关于 vue 中使用html2canvas 遇到报错（ Element is not attached to a Document）

  特效

  风口下的猪2022-06-23【特效】

  阅读更多

• vue路由跳转了但界面不显示的问题及解决

  vue

  安装了vue-router、配置了router.js、在main.js中也挂载了。但页面跳转时，只是浏览器网址增加了路由，而页面一片空白，里面的js方法也没有执行。

  
  

  主要是在父组件，也就是App.vue中没有引入跳转组件

  在App.vue中的app下加上<router-view></router-view>即可

  <template>

    <div id="app">

      <router-view />

    </div>

  </template>

  
  

  
  

  
  

  风口下的猪2022-06-22【vue】

  阅读更多

• 【解决】控制台报错Uncaught TypeError: Object(...) is not a function at eval (vue-router.esm-bundler.js

  vue

  打开http://localhost:8080/，控制台报错

  
  

  Uncaught TypeError: Object(...) is not a function
      at eval (vue-router.esm-bundler.js?f2fc:2127:1)
      at Object../node_modules/vue-router/dist/vue-router.esm-bundler.js (app.js:2218:1)
      at __webpack_require__ (app.js:679:30)
      at fn (app.js:89:20)
      at eval (index.js?3672:1:1)
      at Object../src/router/index.js (app.js:2358:1)
      at __webpack_require__ (app.js:679:30)
      at fn (app.js:89:20)
      at eval (main.js?1c90:1:1)
      at Object../src/main.js (app.js:2350:1)

  
  

  cmd运行npm run dev没有报错，但也没有显示成功
  

  
  

  
  

  看了好多篇文章，找了好几天的错，也没有找到解决方法，都不管用，找的心累了，这不终于整好了

  【解决办法】： 降低vue-router版本

  因为vue-router版本过高，所以报错（我的默认版本是4.0.14的版本）

  "dependencies": {
      "element-ui": "^2.15.6",
      "vue": "^2.5.2"
    },
    "devDependencies": {
      "node-sass": "^7.0.1",
      "sass-loader": "^12.6.0",
      "vue-loader": "^13.3.0",
      "vue-router": "^4.0.14",
    } 

  
  

  1、package.json中修改vue-router版本，然后再npm install下

  2、或者在cmd输入

  npm install vue-router@3.5.3

  
  

  再运行npm run dev，成功了

  
  
  
  

  
  

  
  

  
  

  风口下的猪2022-06-22【vue】

  阅读更多

• vue.use()的作用是什么

  vue

  vue.use()主要是用来安装vue插件的，使用全局方法Vue.use()时，会默认阻止多次注册相同的插件。

  使用注意事项：

  （1）vue.use()的参数可以是一个组件或者一个函数

  a.如果是组件，则组件必须定义install方法；

  b.如果是函数，则函数默认为install方法

  （2）其必须在调用new Vue()启动应用之前调用

  
  

  
  

  
  

  风口下的猪2022-06-21【vue】

  阅读更多

• 通过vue-cli创建vue项目

  vue

  一.安装node环境

  
  

  二.安装vue

  npm i -g vue

  
  

  三.安装vue-cli脚手架

  npm i -g @vue/cli

  
  

  四.创建vue项目

  在想要放置的文件目录中cmd，执行

  vue create 项目名称

  
  

  
  

  五、进入详细选择

  (上下 方向键选择,空格键确定,enter进入下一步)

  
  

  1、默认vue2版本和默认vue3版本都是有Eslint和Babel的，Eslint是代码规范的，Babel是将ES6转化为ES5的。（这边新手不建议安装有Eslint的，所以选择自主配置--最后一种）

  （按 space 键来进行是否选择，一般建议以上已勾选的选择）
  

  Babel：es6 转 es5

  Router：路由

  Vuex：数据容器，存储共享数据

  CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等

  Linter / Formatter：代码格式校验（一般情况下默认勾选了，记得取消！！！）

  
  

  2、选择vue版本--目前选择2版本

  
  

  3、是否选择history路由模式，（这里选择“N”）

  
  

  4、选择css预处理器，一般选择Less

  
  

  5、Babel、ESLint 等工具会有一些额外的配置文件，这里的意思是问你将这些工具相关的配置文件写到哪里：

  In dedicated config files：分别保存到单独的配置文件

  In package.json：保存到 package.json 文件中

  这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。

  
  

  
  

   6、是否将刚才的选择保存起来，下次可以直接用，一般选择N，可以根据自己需要选择

  
  

  
  

  7、开始创建，创建完成后可以打开文件

  命令： cd 项目名称  是选择定位到项目

  命令：npm run serve   则是运行项目，运行的项目就是刚刚cd项目的项目

  
  

  8、运行项目后，出现如下页面就算是创建成功啦

  
  

  
  

  
  

  风口下的猪2022-06-21【vue】

  阅读更多

• binlog操作杂项（1）----mysqlbinlog命令使用时报错 unknown variable 'default-character-set=utf8mb4' 的解决办法

  MySQL

  在cmd中执行mysqlbinlog命令，报错default-character-set=uft8mb4

  两种方法解决：

  （1）修改mysql.ini中的utf8配置

  改default-character-set=utf8mb4为character-set-server = utf8mb4

  （2）执行命令时增加忽视错误修饰词 --no-defaults

  mysqlbinlog --no-defaults D:/MySQL5.7.26/data/mysql-bin.000001 > h:/1_bin.sql
  

  
  

  
  

  
  

  
  

  风口下的猪2022-06-20【MySQL】

  阅读更多