VUE中组件的使用

1. 关于vue组件引用
2. 使用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();

      ```

      ?

3. 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);

      ```

4. 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);

      ```

5. 使用 node工具 合成浏览器可以使用的 js文件
6. 在项目目录 npm init -y 初始化 设置 package.json 文件 script项 "test": "webpack ./main.js ./build.js"; //使用 webpack工具 把 当前文件夹的main.js 转换为 build.js文件
7. npm install [email protected] --save-dev --registry https://registry.npm.taobao.org //使用淘宝镜像 下载 webpack的包
8. 写好js后 使用 npm run test 跑下 生成 build.js 每次修改都要跑一下

原文地址：https://www.cnblogs.com/var-chu/p/8490987.html