安装 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>