VUE中组件的使用

1. 关于vue组件引用

   1. 使用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();
         

         ​

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

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

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

   1. 在项目目录 npm init -y 初始化 设置 package.json 文件 script项 "test": "webpack ./main.js ./build.js"; //使用 webpack工具 把 当前文件夹的main.js 转换为 build.js文件
   2. npm install webpack@2.2.1 --save-dev --registry https://registry.npm.taobao.org //使用淘宝镜像 下载 webpack的包
   3. 写好js后 使用 npm run test 跑下 生成 build.js 每次修改都要跑一下