webpack项目中使用vue
第一步:运行 npm i vue –S 安装vue
第二步:在src->index.js入口文件中,通过 import Vue from ‘vue’ 来导入vue构造函数
第三步:创建vue的实例对象,并指定要控制的el区域
第四步:通过render函数渲染app根组件
//导入vue构造函数
import Vue from 'vue'
// 导入vue单文件组件
import App from './components/App.vue'
const vm = new Vue({
//指定vm实例要控制的页面区域
el:"#app",
//通过render函数,把指定的组件渲染到el区域中
render:h=>h(App)
})
第五步:在index.html中渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/button.js"></script>
</head>
<body>
<!-- 将来要被vue控制的区域 -->
<div id="app"></div>
</body>
</html>
第六步:vue单文件组件代码
查看效果
这样就渲染出了一个vue根组件