安装 npm i vue -S ， 在html页面中放一个容器绑定到el上。
修改webpack.config.js ， 在与entry , output节点平级加上 resolve 节点。
resolve : { alias : { //配置vue被导入时别名的指向 'vue$':'vue/dist/vue.js' } }
webpack支持vue单文件。
安装 loader => cnpm i vue-loader vue-template-compiler -D
踩坑注意点： 如果安装vue-loader版本高于15.0 需要在webpack.config.js配置插件
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins : [
new vueLoaderPlugin()
]
}
-------------------------------
main.js文件 ， login.vue 文件内容跟vue的组件一样，只是拆分出来放单独文件里。
import $ from 'jquery'
import Vue from 'vue'
// import Vue from 'vue/dist/vue'
// 导入login组件，webpack无法打包vue文件，需要安装 cnpm i vue-loader vue-template-compiler -D
import login from './components/login.vue' $(function(){ var vm = new Vue({
el : '#app',
data : {
msg : '111123'
},
// render : function(createElements){
// return createElements(login)
// }
// render 简写
render : c => c(login)
// components : { //components方式不适用于vue单文件,在vue的run-time模式下会报错，不建议使用
// login : login
// }
})
})
export default 和 export
login.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template> <script>
// 这是node中向外暴露成员的形式
// 导入模块 var 名称 = require('模块标识符')
// 导出模块 module.exports = {} 和 exports // 在es6中，也有规范的形式规定了如果导入和导出模块
// es6中导入模块，使用 import 模块名称 from '模块标识符' import '表示路径'
// 在es6中，使用export default 和 export 向外暴露成员。
export default {
data(){
return {
msg : 'vue模板中的数据'
}
},
methods: {
show(){
console.log('调用了vue模板中的方法');
}
},
}
// var info = { name : 'az' age : 20}; export default info
// export var title = '标题1'
// export var content = '这是内容' // 注意:export default 向外暴露的成员，可以使用任意的变量来接收。
// 注意：在一个模块中，export default只允许向外暴露一次。
// 注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员
// 注意：使用export向外暴露的成员只能使用 {} 的形式来接收，这种形式叫做按需导出
// 注意：export可以向外暴露多个成员。接收时变量必须要统一。
// 例 import {title , content} from './test.js'
// 另一种写法 import { title as t , content as a} from './test.js' 可以直接使用t 和 a
</script>