webpack与vue的结合使用(一)—— 区分webpack中导入vue和普通网页使用
main.js//如何在webpack构建的项目,使用Vue进行开发//npm i vue -S//复习 在普通网页中如何使用vue//1. 使用script标签,引入Vue的包//2. 在index.html页面中,创建一个id为app 的 div容器//3. 通过new Vue得到一个vm的实例//在webpack中尝试使用vueimport Vue from '...
·
main.js
//如何在webpack构建的项目,使用Vue进行开发
//npm i vue -S
//复习 在普通网页中如何使用vue
//1. 使用script标签,引入Vue的包
//2. 在index.html页面中,创建一个id为app 的 div容器
//3. 通过new Vue得到一个vm的实例
//在webpack中尝试使用vue
import Vue from 'vue'
/*注意 这种方式【import Vue from 'vue'】引入的vue功能没有script引入的vue功能全,只提供了 runtime-only的方式
解决:
//第一种方法
import Vue from '../node_modules/vue/dist/vue.js'
//第二种方法
import Vue from 'vue'
还需要在webpack.config.js加入一个节点
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
*/
//回顾包的查找规则
//1 找项目根目录中有没有 node_moudles的文件夹
//2 在node_modules中根据包名,找对应的vue文件夹
//3 在vue文件夹中,找一个叫做package.json 的 包配置文件
//4 在package.json 文件中,查找一个main属性【main属性指定了这个包在被加载时候的入口文件】
var vm = new Vue({
el:'#app',
})
更多推荐
已为社区贡献30条内容
所有评论(0)