一.下载使用vue

注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖

在main.js中引用vue

重新打包，运行程序，报错:

这个错误说的是我们使用的是runtime-only版本的Vue,应该使用runtime-compiler

所以我们修改webpack的配置，添加如下内容即可：

二.el和template区别

el:el用于指定Vue要管理的DOM，与index.html 中的 #app 进行绑定，让Vue实例之后可以管理它其中的内容，可以帮助解析其中的指令、事件监听等

template：如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可

template模板的简化写法：

将vue实例中的template模板和data,methods等抽象成一个组件，在vue实例的compoments中注册，在template中使用这个组件，但是一个组件以对象的方式编写非常不方便，因此

三. vue文件的封装和处理

将vue组件写在vue文件中

template模板内容写在template标签中，vue实例的其他部分用eport default导出，样式写在style标签中

但是要处理vue文件，需要使用

vue-loader以及vue-template-compiler（vue2）：

安装：

npm install vue-loader vue-template-compiler --save-dev

修改webpack.config.js的配置文件：

vue3:npm i inatall vue-loader @vue/compiler-sfc

须添加@vue/compiler-sfc来对template进行解析：

另外我们需要配置对应的Vue插件：

四.在webpack环境下使用vue开发

index.html中引入app.js，app.js中 new Vue(),import其他vue组件，并注册为vue实例的子组件，这样就可以在vue实例的template中引用该组件，该组件的内容最终会替换index.html文件中id=app的内容，项目开发中的其他内容都写成vue文件的形式，再通过子组件的形式引入

webpack中配置vue相关推荐

Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
Node.js webpack中导入vue的三种方法
在webpack 中使用 Vue: 安装 vue 模块 npm i vue -S 注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完 ...
在webpack中使用vue的准备
如何在webpack中使用vue? 1.安装vue的包 : npm i vue -S 2.由于在webpack中,定义组件使用.vue组件模板文件,所以安装能够解析这种文件的loader npm i ...
Webpack 基础配置 Vue+Ts
写在前面多亏上次 Webpack打包类库踩坑(上期文章),让我重新想起来 Webpack 等相关打包工具的重要性,稍微做了下调研,发现其实很多稍微有些工作经验的人,对于 Webpack 的了解程度也 ...
IDEA中配置Vue启动Configurations
IDEA中导入Vue项目,每次启动都需要手动去执行命令我们可以进行配置Configuration进行一键启动,类似于启动spring项目第一步点击Add Configurations 在IDEA最 ...
vue项目，webpack中配置src路径别名及使用
默认会有'@'别名,指向src目录,还可以添加自定义别名等等. 使用方法使用别名一般就三种情况:在js中用,在css中用,在html文档内用 js中用,最简单: import {getName} f ...
webpack中配置jquery暴露全局（expose-loader）
目录源代码普通引入内联loader使用 webpack配置全部暴露jquery cdn配置如何避免引入第三方模块最终代码源代码链接:https://pan.baidu.com/s/1i4 ...
webstorm中配置vue代码片段
ctrl+shift+A 输入live 上述红框插入一下代码:<template> #[[$END$]]# </template><script> export d ...

webpack中配置vue

一.下载使用vue

二.el和template区别

三. vue文件的封装和处理

四.在webpack环境下使用vue开发

webpack中配置vue相关推荐

最新文章

热门文章