h5怎么引入html,【前端问题精选】普通html页面怎么引入.vue文件呢？

普通html页面引入了vue.js，

请问怎么在这样的页面使用.vue组件呢？

回答：

基本上无法直接使用， .vue是经过 一系列转换，模板编译为函数，sass转换等 最终打包成js css 的。.vue 文件还是上vue-cli比较好

回答：

html页面引入vue组件需要在页面引入http-vue-loader.js

注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost/:port/index.html

1.创建my-component.vue

Hello {{who}}

module.exports = {

data: function() {

return {

who: 'world'

}

}

}

.hello {

background-color: #ffe;

}

2.创建index.html

// 使用httpVueLoader

Vue.use(httpVueLoader);

new Vue({

el: '#app',

data: function () {

return { visible: false }

},

components: {

// 将组建加入组建库

'my-component': 'url:./component/my-component.vue'

}

})

注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost/:port/index.html

回答：

想直接使用 .vue 文件不现实，因为浏览器只认识 .js .html .css 文件，

.vue 文件可以用 vue-cli3.x 编译成 UMD 规范 如 vue-cli-service build --target lib 指令，

然后就可以在浏览器中直接引用了？具体可以参考我的这个仓库实现思路，

建议阅读这里