indent

vue-cli 4.0 使用笔记

css-loader postcss-loader 的区别

scss 全局变量的使用

vue.config.js
1
2
3
4
5
6
7
8
9
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/assets/css/variables.scss";`
}
}
}
};

直接按以上方式配置即可,不需要安装sass-resources-loader。

vue组件的局部注册与全局注册

swiper无法获取正确的宽度和高度

添加下面2个参数

1
2
observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper

前端应用快速启动服务 Anywhere

安装命令:npm install -g anywhere

使用:在要启动静态服务的目录下执行

anywhere -p 8080

-p 后跟端口号

vue 跳转

router-link会渲染为a标签

  • params跳转
    地址不携带参数;
    获取参数方式:~ this.$route.params ~
    相应连接: /project/details

    1
    <router-link :to="{name: 'team-details', params: { id: 1 }}"></router-link>
    1
    2
    3
    4
    5
    {
    path: "/team/details",
    name: "team-details",
    component: () => import("XXX.vue")
    }
  • query跳转
    地址携带参数;
    获取参数方式:~ this.$route.query ~
    相应连接: /project/details?id=2

    1
    <router-link :to="{name: 'team-details', query: { id: 1 }}"></router-link>
    1
    2
    3
    4
    5
    {
    path: "/team/details",
    name: "team-details",
    component: () => import("XXX.vue")
    }
  • js this.$router.push跳转不指定query/params
    相应连接: /project/details/2

    1
    2
    3
    this.$router.push({
    path: `/team/details/${id}`
    })
    1
    2
    3
    4
    5
    {
    path: "/team/details/:id",
    name: "team-details",
    component: () => import("XXX.vue")
    }

注意:如果提供了 path,params 会被忽略

849890769@qq.com

Proudly published with Hexo