在普通网页中如何使用Vue
-
1. 使用 script 标签 ,引入 vue 的包
-
2. 在 index 页面中,创建 一个 id 为 app div 容器
-
3. 通过 new Vue 得到一个 vm 的实例
在webpack 中尝试使用 Vue:
注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页中那样的使用方式;
导入的并不是我们在普通网页中使用的vue.js
法一:
main.js中:
import Vue from '../node_modules/vue/dist/vue.js'
//直接导入
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
})
这是主页面
<body>
<!-- 这是容器 -->
<div id="app">
<p>{{msg}}</p>
<login></login>
</div>
</body>
结果:
法二:
main.js中:
import Vue from 'vue'
//利用该方法
webpack.config.js中:
与module平级
resolve: {
alias: { // 修改 Vue 被导入时候的包的路径
"vue$": "vue/dist/vue.js"
}
}
结果和原来一样: