zoukankan      html  css  js  c++  java
  • webpack中如何使用vue

    1、安装vue包 

    npm i vue -S

    2、默认webpack无法打包.Vue文件,需要安装相关的loader

    npm i vue-loader vue-template-compiler -D

    3、在webpack.config.js文件中

    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    module.exports={
        // 手动指定入口和出口
        entry:path.join(__dirname,'./src/main.js'),//入口,表示要是用webpack打包的文件
        output:{
            path:path.join(__dirname,'./dist'),//指定打包文件的输出目录
            filename:'bundle.js'//输出文件的名称
        },
        plugins:[
            new VueLoaderPlugin()
        ],
        module:{//用于匹配第三方模块加载器
            rules:[
                {test:/.vue$/,use:'vue-loader'}
            ]
        },
        resolve:{
            alias:{//修改vue被导入时候包的路径
                "vue$":"vue/dist/vue.js"
            }
        }

    4、新建后缀为vue的文件,例如建login.vue

    <template>
        <div>
            <h1>这是登录组件</h1>
        </div>
    </template>
    
    <script>
    </script>
    
    <style>
    
    </style>

    5、在main.js中

    import Vue from 'vue'
    import login from './login.vue'
    
    var vm = new Vue({
        el:'#app',
        data:{
            msg:''
        },
        // render:function(createElement){
        //     return createElement(login)
        // }
        //简写
        render:c=>c(login)
    })

    6、在index.html中使用login组件,npm运行即可

  • 相关阅读:
    常见makefile写法
    CMake入门指南
    CMAKE的使用
    Google NewSQL之Spanner
    Google Spanner (中文版)
    全球级的分布式数据库 Google Spanner原理
    idea刷新项目、清除项目缓存
    彻底理解Java的Future模式
    Elasticsearch 三种分页方式
    ElasticSearch 深度分页解决方案
  • 原文地址:https://www.cnblogs.com/lijianshen/p/12005210.html
Copyright © 2011-2022 走看看