在main.js中引入vue
// 引入vue import Vue from "vue"; const app = new Vue({ el: "#content", data() { return { message: "我在main.js中通过模块化的方式导入了vue" } }, methods: { getMsg() { console.log(this.message); } } })在index.html中设置挂载点
<div id="content"> <h3 v-text="messge"></h3> <p>{{getMsg()}}</p> </div>执行webpack打包命名后，运行测试
报错
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.原因: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXlz0yE7-1599121821562)(F:\markdown笔记\图片\image-20200903160411703.png)]
解决办法: 在webpack.config.js配置文件中加入
resolve: { // alias 别名 alias: { "vue$": "vue/dist/vue.esm.js" //设置新的解析文件 } }在index.html中.应该以下面的方式写
<body> <div id="app"> <h3 v-text="message"></h3> <p>{{getMsg()}}</p> </div> <script src="./dist/bundle.js"></script> //函数导入应该写在vue挂载点的后面 </body>如果将写在head中，会报如下错误
vue.esm.js:629 [Vue warn]: Cannot find element: #app vue.esm.js:629 [Vue warn]: Cannot find element: #app原因：js在dom文档加载之前就执行了vue数据渲染,此时的dom结构还未加载，所以vue会找不到挂载点
