Vue-cli3.x+ 杂记

简写与配置

动态路由，获取params新的实现方式

• 通常方式

//---路由部分
routes:[
  {
    path:'/categories/edit/:id?' 
    component:'xxx'
  }
]
//---单文件组件中
created(){
   console.log(this.$route.params.id);
}

• 新的传递params方式：
  路由中props为true，代表将连接中任何参数，以props方式注入到新组件中去

//---路由部分
routes:[
  {
    path:'/categories/edit/:id?' 
    component:'xxx'，
    props: true
  }
]
//---单文件组件中
props:[
  'id'
]

修改开发环境的端口号
1.方法一，在package.json中，通过罗列参数配置
如：

"scripts": {
    "dev": "vue-cli-service serve --port 8081"
}

2.方法二，在package.json同级新建一个vue.config.js 【就相当于以前的webpack.config.js】文件，配置
如：

module.exports = {
    devServer:{
        port:8081
    }
}

官网示例 地址

官网示例 截图

vue add 的本质
vue add 插件名 是vue-cli3提供的
vue add 是用yarn安装插件的

vue.config.js中的配置
官网

vue.config.js中的配置
这里的配置，以DevServer为例 又都 适用于webpack中的DevServer

安装sass-loader之后，直接sass语法即可，无需任何配置

1.安装

npm install sass-loader node-sass webpack --save-dev

2.在main.js(app.js)引用sass文件 或者 在单文件组件中使用sass

import './你的sass文件名.scss';

或者

<style lang = "scss" scoped>
  @import "../common/scss/base"; //引用的sass变量文件  
  .top{
        color:$myColor;
  }
</style>

3.配置webpack 【在vue-cli3.x+中，这个省略了、因为 vue-cli3内置了webpack的配置】
传统第三方插件针对webpack.config.js的使用方法，在vue3.x+中不再需要了

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

包引入的问题：

vue.config.js不同于webpack.config.js，npm官网中的包，大部分只有针对webpack.config.js的引入插件方式，
怎么将三方包引入到vue.config.js是个问题
但是有的包，有针对vue-cli3.x+中vue.config.js使用如何使用的展示
如 sass-resources-loader 这个包：

vue3.x引入插件