步骤:
1. 项目中安装vue:
npm install vue -S
2. main.js中引入vue,创建vue实例:
import Vue from 'vue'
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
}
});
3. index.html中加入vue实例挂载的DOM节点:
<div id="app">
{{msg}}
</div>
4. 终端执行:
npm run dev
编译成功,但是浏览器中报错:
[Vue warn]: 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.
官方解释:
如果 render 函数和 template property 都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库。
此时我们应该使用runtime-compiler,而不是runtime-only。
官网给出了以下解决办法:
在这里我采用在webpack.config.js中增加resolve配置的方式:
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js'
}
}
重新执行npm run dev,刷新页面,不再报错,且页面正常渲染。