在webpack构建的项目中使用vue

一、
复习在普通网页中使用vue
1.使用script引入vue
2.在index中创建 id为app的容器
3.通过new vue得到vm实例
二、
在webpack中尝试使用vue：
//注意 ： 在webpack中 使用 import Vue from 'vue' 导入的Vue构造函数，功能不完整，只提供了runtime-onley的方式 并没有提供想网页中那样的使用方式
npm install vue -S

import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'

var vm = new Vue({
el:'#app',
data:{
msg:'123'
}
})

webpack.config.js

resoleve: {
alias:{ //修改vue被导入包时候的路径
'vue$': 'vue/dist/vue.js'
}
}

main.js
import Vue from 'vue'
var login = {
template: "<div>这是login</div>"
}

var vm = new Vue({
el: "#app",
data: {
msg: '123'
},
methods: {},
components: {
login
}
})

index.html

<div id="app">
{{msg}}
<login></login>
</div>

另外一种方式

main.js

import Vue from 'vue'
import login from './login.vue'
//默认，webpack无法打包.vue文件需要安装相关的loader
//npm install vue-loader vue-template-compiler -D
//在配置文件中新增loader配置项 test: /\.vue$/, use: 'vue-loader'

var vm = new Vue({
el: "#app",
data: {
msg: '123'
},
methods: {},
render: function(createElements){ //在webpack中 如果想要通过功能不完整的vue来实现组件，可以用render
return createElements(login)
}
})

login.vue

<template>
<div>
这是login 使用.vue 文件定义出来的
</div>
</template>

<script>
</script>

<style scoped>
</style>

webpack.config.js //vue-loader的使用都是需要伴生 VueLoaderPlugin的

{
test: /\.vue$/, use: 'vue-loader'
}
const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [
new VueLoaderPlugin()
]

 

 

//总结梳理webpack中使用vue
1、npm install vue -S
2、由于在webpack中推荐使用.vue 需要安装解析这个文件的loader npm install vue-loader vue-template-compiler -D
3、在main.js 中导入 vue模块 import Vue from 'vue'
4、定义一个.vue结尾的组件
5、使用import 导入组件
6、创建vm实例
7、在页面中创建一个id为app的div元素
配置

webpack.config.js //vue-loader的使用都是需要伴生 VueLoaderPlugin的
{
test: /\.vue$/, use: 'vue-loader'
}
const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [
new VueLoaderPlugin()
]