zoukankan      html  css  js  c++  java
  • vue单文件组件的构建

      在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好。

      但当在更复杂的项目中,就有了很大的弊端。

      我们就可以用文件扩展名 .vue的单文件组件来解决这些问题。

      我们建议你参考 webpack-simple ,只要遵循指示,你就能很快的运行一个用到 .vue 组件 。

      

          这是vue-cli的项目模板。

       npm install -g vue-cli
       vue init webpack-simple my-project
       cd my-project
       npm install
       npm run dev
     
    • npm run dev:Webpack + vue-loader与适当的配置源地图和热重新加载。

    • npm run build:使用HTML / CSS / JS进行构建。

      在App.vue中引入你项目的页面(import)

      

      export default{

        components:{

          "home":Home,
          "goods":Goods,
          "shopcar":Shopcar
      }

      在component中  引用以上组件

      }

      在项目页面组件中的结构如下:

      

      同样在export default中

        data:fuction(){

        },

        methods:{

        }

        这里要注意一点的是data是一个方法   就这个特殊

        完成后   npm run build  完成打包  代码会自动压缩

        index.html    dist文件夹

        这两个一起拿出来 就可以上线了

        

        以上就是vue单页面组件的构建

        

      

  • 相关阅读:
    Command Line Tools for win32
    鼠标快速复制粘帖工具!
    IBM T系列笔记本安装2003未知设备问题!
    拔智齿!痛苦磨难中!
    I am a hero!
    vim学习笔记!
    产生数
    NumPy矩阵运算
    1130:找第一个只出现一次的字符
    小A与小姐姐给气球涂色[dp + 快速幂]
  • 原文地址:https://www.cnblogs.com/wgy1608/p/6555979.html
Copyright © 2011-2022 走看看