webpack项目中使用vue

最新推荐文章于 2022-11-15 11:36:42 发布

向前有光

最新推荐文章于 2022-11-15 11:36:42 发布

阅读量255

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_40666120/article/details/106169912

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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根组件

向前有光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack项目中使用vue

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 = n
复制链接

扫一扫

专栏目录