在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue+webpack 打包后{{}}并沒有成功綁定數(shù)據(jù)，是我配置錯誤么？

vue+webpack 打包后{{}}并沒有成功綁定數(shù)據(jù)，是我配置錯誤么？

·代碼很簡單，只是一個小demo，但是就是不能成功跑起來。
1.代碼結(jié)構(gòu)如下：

![clipboard.png](/img/bV5uSn)

2.index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="divCon">
        <h1>site : {{site}}</h1>
    </div>
</body>
    <script type="text/javascript" src="./dist/bundle.js"></script>
</html>

3.main.js如下：

var Vue = require('vue');
new Vue({
    el: 'divCon',
    data: {
        site: "hello",
        url: "www.runoob.com",
        alexa: "10000"
    }
})

4.webpack.config.js如下：

module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js"
    }

};

5.package.json文件如下：

{
  "name": "portal",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "webpack"
  },
  "author": "zhangying",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.4",
    "css-loader": "^0.28.10",
    "style-loader": "^0.20.3",
    "vue": "^2.5.15",
    "vue-loader": "^14.2.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  },
  "dependencies": {}
}

6.打包結(jié)果如下：
clipboard.png

7.運(yùn)行結(jié)果如下（chrome瀏覽器）：
clipboard.png
·一開始想是不是main.js中應(yīng)該這么寫：

var Vue = require('vue');
window.onload = new Vue({
    el: 'divCon',
    data: {
        site: "hello",
        url: "www.runoob.com",
        alexa: "10000"
    }
})

在頁面加載完onload執(zhí)行，如此試了下，依然不行。所以是不是配置的問題呢？求指導(dǎo)。。。

回答
編輯回答
冷溫柔

main.js中引入vue需要這樣寫：

var Vue=require('vue').default;

原因移步至：https://segmentfault.com/q/10...

2017年11月24日 16:10
編輯回答
夕顏
import Vue from 'vue/dist/vue.common.js'; // from https://segmentfault.com/q/1010000008531845?_ea=1674580
new Vue({
  el: '#divCon', // 少了#
  data: {
    site: "hello",
  }
})

建議直接看 vue官網(wǎng)的教程，直接試用 vue-cli 在學(xué)習(xí)階段可以避免很多坑，后面再嘗試自己配置
https://cn.vuejs.org/v2/guide...

2017年12月28日 16:18