vue的使用一般有两种方式：一种是使用脚手架工具vue-cli；二是直接在项目引入vue.js
直接在项目引入vue.js的方法
普通web项目中可嵌入vue使用，仅需将vue的js引入页面即可，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p id="app">
{{msg}}}
</p>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
</body>
<script>
new Vue({
el: '#app',
data: function () {
return {
msg:"Hello world!"
}
}
});
</script>
</html>在普通web项目中，如果我们想自定义组件，按官方文档的写法如下：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})但是此方法有一些不友好的地方，如果我们模板内容过大，则 template 内容会比较多，而且对代码整体的结构不太友好，因此我们希望通过新建.vue文件的形式来自定义组件。
http-vue-loader组件实现了不需要编译和build即可加载vue组件，具体使用方式如下：
1、创建自定义组件文件，如 my-component.vue ，内容如下：
<template>
<p class="hello">{{msg}}</p>
</template>
<script>
module.exports = {
data: function() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>2、在网页上引入vue 和 http-vue-loader的js文件
<script src="js/vue.js"></script> <script src="js/httpVueLoader.js"></script>
组件下载地址：https://download.csdn.net/download/ajian132/12054208 （可直接引入项目使用）
3、在网页上通过httpVueLoader载入子组件
<p id="app">
<my-component></my-component>
</p>
<script type="text/javascript">
new Vue({
el: '#app',
components: {
'my-component': httpVueLoader('components/my-component.vue')
}
});
</script>以上就是怎么直接引入vue.js？的详细内容，更多请关注易知道|edz.cc其它相关文章！
