新建一个目录创建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>

渲染终于正常：

【Vue】08 Webpack Part4 使用Vue的更多相关文章

  1. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  2. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  3. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  4. 在基于vue的webpack脚手架开发中使用了代理转发，结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办？

    环境:            有2个业务接口需要转发到82的服务器上:     ../user/getCode.do     ../user/doLogin.do 现象:          使用上述的 ...

  5. 基于Vue 和 webpack的项目实现

    Vue.js 是一款极简的 mvvm 框架,如果让我用一个词来形容它,就是 “轻·巧” .如果用一句话来描述它,它能够集众多优秀逐流的前端框架之大成,但同时保持简单易用.废话不多说,来看几个例子: & ...

  6. Vue.js——webpack

    Vue.js——60分钟webpack项目模板快速入门 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开 ...

  7. vue+node+webpack搭建环境

    一.环境搭建 1.1.去官网安装node.js( http://www.runoob.com/nodejs/nodejs-install-setup.html  ) 注意node的版本,只有支持和谐模 ...

  8. Vue.js + Webpack

    vue.js Vue.js是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 以上是Vue.js官方定义,故名思议,以数据驱动视 ...

  9. 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  10. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

随机推荐

  1. c# winfrom DataGridView 动态UI下载功能(内含GIF图) || 循环可变化的集合 数组 datatable 等

    Gif演示 分解步骤 1,使用组件DataGridView 2,使用DataSource来控制表格展示的数据来源(注意:来源需要是DataTable类型) 3,需要用到异步线程.如果是不控制数据源的话 ...

  2. LeetCode 673. Number of Longest Increasing Subsequence 最长递增子序列的个数 (C++/Java)

    题目: Given an unsorted array of integers, find the number of longest increasing subsequence. Example ...

  3. 爬取m3u8加密视频

    import random import os import re import requests import asyncio import aiohttp import time from lxm ...

  4. 阿里云OSS图片上传和显示注意点

    1. java.lang.IllegalArgumentException: The object key "/image-业务名称/20230818/20230818-订单号参数-acci ...

  5. mybatis执行insert语句后,返回当前插入数据主键的方法 keyProperty区分大小写

    mybatis执行insert语句后,返回当前插入数据主键的方法 keyProperty区分大小写 #这样查询没有返回主键值 <insert id="addLog" useG ...

  6. 微信小程序自动化_从环境搭建到自动化代码实现过程

    前期准备 微信小程序作为现在流行的一种应用载体,很多小伙伴都有对其做自动化测试的需求,由于腾讯系 QQ.微信等是基于腾讯自研 X5 内核,不是谷歌原生 webview,所以调试会有些许差异(现在很多 ...

  7. EIGRP总结

    EIGRP     思科私有,2013年公开,其他厂商不支持,所以用得不是很多     几秒钟就能完成收敛     触发更新,只要网络不发生变化就不会发生更新     按需更新,只更新变化的部分    ...

  8. php不使用Office包实现上万条数据导出表格

    经过上传客户要求主副表迁出,又提出可以将某张表的数据导出excel,听着很简单,实际看数据表发现上万条数据,并且需要关联表查询相关字段,导出的表格才可以被客户看明白. 要是使用office包目前后台内 ...

  9. 12-CSS浮动

    01 介绍 02 浮动规则 03 案例练习 3.1 缝隙的解决方案 <!DOCTYPE html> <html lang="en"> <head> ...

  10. 在WPF UWP WinUI中相同功能的用法的区别

    文件选择器 WPF:OpenFileDialog Microsoft.Win32.OpenFileDialog openFileDialog = new(); bool? result = openF ...