webpack如何使用vue

前面准备：

新建一个文件夹B。复制A文件夹中除了node_modules文件夹之外的所有文件，放在B文件夹中

使用"npm install -S" 去构建node_modules

 

 

1.安装vue的包:  cnpm i vue -S

2.在main.js中导入包

3.运行起来报错

3.1第一种解决办法：

3.2第二种解决办法：

让我们先回顾一下包的查找规则：

//1.找项目根目录中有没有node_modules的文件夹
//2.在node_modules中根据包名，找对应的vue文件夹
//3.在vue文件夹中，找一个叫做package.json的包配置文件
//4.在package.json文件中，查找一个main属性[main属性制定了这个包在被加载时候的入口文件]

在package.json文件中，main对应的文件为“dist/vue.runtime.common.js”。直接修改文件为“dist/vue.js”即可

3.3第三种解决方法：

在main.js中依然使用"import Vue from 'vue'",在webpack.config.js中配置规则

4.在runtime-only下如何才能正确的导入vue呢？

4.1在src目录下创建login.vue模板

<template>
<div>
<h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
</div>
</template>

<script>
export default {
data() {
// 注意：组件中的 data 必须是 function
return {
msg: "123"
};
},
methods: {
show() {
console.log("调用了 login.vue 中的 show 方法");
}
}
};
</script>

<style>

</style>

默认webpack无法打包.vue文件，需要安装相关的loader

"cnpm i vue-loader vue-template-compiler -D"

在配置文件中新增loader配置项{test:/\.vue$/,use:'vue-loader'}

启动项目报错

解决方法：Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用：
在webpack.config.js添加以下的代码，即可
// webpack.config.js
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

module.exports = {

plugins: [
new VueLoaderPlugin()
]
}