vue自用笔记-随笔1

1. vue init webpack  文件名
2. cnpm install axios mint-ui –S
3. cnpm install less less-loader –D

vue项目中引用mint-ui，使用按需加载过程中，需要安装 babel-plugin-component （cnpm install babel-plugin-component -D
），并要在.babekrc文件的”plugins”中添加,["component",[

    {"libraryName":"mint-ui","style":true}

  ]]

​
["component",[
          {"libraryName":"mint-ui","style":true}
      ]]

例如：
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",["component",[
    {"libraryName":"mint-ui","style":true}
  ]]]
}

​

//学习vue过程中学习的知识点

Object.assign（）方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Vue组件可能会有这样的需求：在某种情况下，需要重置Vue组件的data数据。此时，我们可以通过this.$data获取当前状态下的data，通过this.$options.data()获取该组件初始状态下的data。然后只要使用Object.assign(this.$data, this.$options.data())就可以将当前状态的data重置为初始状态，非常方便！
 ———————————————— 
上边那段文字引用自  原文链接：https://blog.csdn.net/creabine/article/details/81664203

4.想要使用animate.css动画效果，安装npm install vue2-animate -S ，引用 import 'vue2-animate/dist/vue2-animate.min.css'

5.想要在全局引用公共less文件，>1先安装sass-resources-loader >2在build>utils.js修改less配置，在less后添加

.concat(
    {
        loader: 'sass-resources-loader',
        options: {
            resources: path.resolve(__dirname, '需要全局引入的less的位置及文件名')
        }
    }
)

如果不止一个文件，就在后面继续使用concat拼接

注意：如果时使用vue-cli3构建的环境

》1引入loader 》2配置vue.config.js

vue add style-resources-loader
// vue.config.js
const path = require("path");
module.exports = {
    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: [path.resolve(__dirname, "less文件路径")]
        }
    }
};

以上关于全局引用公共less文件的方法引自文章https://www.cnblogs.com/lyzw-Y/p/10257448.html