VUE中组件的使用

关于vue组件引用

使用Nodejs的方法

1. 被引用的组件要暴露 module.exports={};

2. 引用时 用 var abc= require("组件的路径")

3. 然后 就可以用abc点出来组件中的东西 属性或者方法

4. 代码

5. ```
   //cal.js的内容 一定要包裹在对象中 还要是顶级作用域 如不能再函数值暴露 没用
   module.exports={
   sayHi:function(){
   console.log("你好啊")
   }
   };

   //main.js 引用后就可以使用了 也要是顶级作用域 注意 命名很重要 要一致
   var abc=require("./cal.js");
   console.log(abc);
   abc.sayHi();
   ```

   ?

ES6的方法(整体抛出)

1. 被引用的组件要暴露 export default {}

2. 引用时 用 import Cal from "组件的路径";

3. 然后 就可以用 Cal点出来组件中的东西 属性或者方法

4. 代码

5. ```
   //cal.js的内容 一定要包裹在对象中 还要是顶级作用域 如不能再函数值暴露 没用
   export default {
   add:function (n1,n2){
   return n1+n2;
   },
   num:34
   };

   //main.js 引用后就可以使用了 也要是顶级作用域 注意 命名很重要 要一致
   import Cal from "./cal.js";
   console.log(Cal.add(4,5));
   console.log(Cal.num);
   ```

ES6的方法(单个抛出)

1. 代码

2. ```
   //cal.js的内容
   //声明直接导出
   export const num =123;

   //先声明后导出
   const Cal ={
   sub:function(n1,n2){
   console.log(n1-n2);
   }
   };
   export { Cal };

   //main.js 引用后就可以使用了 也要是顶级作用域 注意 命名很重要 要一致
   import { Cal,num} from "./cal.js";
   Cal.sub(12,1);
   console.log(num);
   ```

使用 node工具 合成浏览器可以使用的 js文件

写好js后 使用 npm run test 跑下 生成 build.js 每次修改都要跑一下