zoukankan      html  css  js  c++  java
  • 【Vue】08 Webpack Part4 使用Vue

    新建一个目录创建Vue项目:

    cd ..
    mkdir webpack-vue
    cd webpack-vue

    安装Vue

    cnpm install vue

    保持之前的目录结构:

    在Main.js中引用Vue组件:

    // 引入包的时候,像Java一样 使用import
    import Vue from 'vue'
    let application = new Vue({
        el : "#application",
        data : {
            name : "阿伟"
        }
    });

    页面引用bundle.js文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="./dist/bundle.js"></script>
        <title>Title</title>
    </head>
    <body>
    
    <div id="application">
        <p v-text="name"></p>
    </div>
    
    </body>
    </html>

    但是打完包运行查看后发现报错了:

    报错信息提示我们使用的仅运行时版本的vue,也就是阉割版,移除部分功能,无法像之前的样子使用Vue

    解决方案:在webpack.config.js中配置解析:

    const path = require('path');
    
    module.exports = {
        entry : "./src/main.js", // 入口 可以是字符串,数组,对象
        output : { // 出口,通常是一个对象 至少包含路径和文件名
            path : path.resolve(__dirname, 'dist'),
            filename : "bundle.js"
        },
        module : {
            rules : [
                { test : /.css$/, use : ['style-loader', 'css-loader'] }
            ]
        },
        resolve : {
            alias : {
                'vue$' : 'vue/dist/vue.esm.js'
            }
        }
    }

    再次构建:

    结果还是报错:

    vue找不到定义的application的id属性

    只要把引入文件放在body最后面就行了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="./dist/bundle.js"></script>
        <title>Title</title>
    </head>
    <body>
    
    <div id="application">
        <p v-text="name"></p>
    </div>
    
    <script src="./dist/bundle.js"></script>
    </body>
    </html>

    渲染终于正常:

  • 相关阅读:
    Scala 获取当前时间
    mnist 数据集的识别源码解析
    tf.nn.softmax_cross_entropy_with_logits的用法
    softmax函数
    实现手写体 mnist 数据集的识别任务
    MNIST 数据集
    神经网络之激活函数
    模块化神经网络
    np.c_与np.r_
    学习率的选取-滑动平均
  • 原文地址:https://www.cnblogs.com/mindzone/p/13377202.html
Copyright © 2011-2022 走看看