Vue学习之webpack中使用vue(十七)
一、包的查找规则:
1、在项目根目录中找有没有 node_modules 的文件夹;
2、在 node_modules 中根据包名,找对应的vue 文件夹;
3、在vue 文件夹中,找 一个叫做 package.json的包配置文件;
4、在package.json文件中,查找一个main 属性【main属性指定了这个包在被加载时候的入口文件】
二、webpack中使用vue:
1、安装 vue 的包:
cnpm i vue -S
2、由于 在 webpack中,推荐使用 .vue这个组件模块文件定义组件,所以,需要安装能解析这种文件的
loader
cnpm i vue-loader vue-template-comlier -D
3、在 main.js 中,导入 vue 模块
import Vue from 'vue'
4、定义一个.vue 结尾的组件,其中,组件有三部分组成: template script style
5、使用
import login from './login.vue '
导入这个组件
6、创建 vm 实例
var vm = new Vue ({
el : '#app',
render : c => c ( login )
})
7、在页面中创建一个 id 为 app的 div元素,作为我们 vm 实例要控制的区域。
Vue学习之webpack中使用vue(十七)的更多相关文章
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
- webpack 中导入 vue 和普通网页使用 vue 的区别(四)
一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...
- 011 webpack中使用vue
一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- webpack中使用vue
1.安装vue cnpm i install -S 2.由于在 webpack 中,推荐使用 .vue 的文件模板文件定义组件 , 所以 ,需要安装 能解析这种文件的 loader cnpm i vu ...
- 20 区分webpack中导入vue和普通网页使用script导入Vue的区别
回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
- vue项目,webpack中配置src路径别名及使用
1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...
随机推荐
- vue中axios使用一:axios做拦截器
转载请注明出处: 项目中用到了单点登录,依赖的公司通用的jar包,且项目为前后端分离的方式,为了管理系统的所有请求和 超时管理,用到了axios,做前端请求拦截,并做管理. 其有以下特点: axios ...
- Java基础 awt Frame 点击叉后,在控制台输出提示信息并关闭程序
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- 028_Mac急救箱快捷键
一. (1) 1.shift + control + option + 电源键 +长按10秒 "重置系统管理器" 2.option + command + P + R + 按1下电 ...
- PhantomJS笔记,Node.js集成PhantomJS
PhantomJS笔记,Node.js集成PhantomJS 转 https://www.linchaoqun.com/html/cms/content.jsp?menu=index&id=1 ...
- 统计git提交代码量
# a新增行数,d删除行数 git log --author="`git config --get user.name`" --pretty="%H" --a ...
- vbscript--FileSystemObject详解
https://blog.csdn.net/superbirds/article/details/6762748 FSO是FileSystemObject 或 Scripting.FileSystem ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器软件二次开发接口对接说明示列
EasyDSS相关功能 EasyDSS流媒体服务器软件,提供一站式的转码.点播.直播.时移回放服务,极大地简化了开发和集成的工作.其中,点播版本主要包含:上传.转码.分发.直播版本主要包含:直播.录像 ...
- Window及document对象
注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写 否则会提示你1个错误信息 "引用的元素为空或者不是对象" 一.Window对象 ---------- ...
- elasticsearch-head
elasticsearch-head 是用于监控 Elasticsearch 状态的客户端插件,包括数据可视化.执行增删改查操作等 安装前先安装nodejs 1.下载 地址 2.安装 npm ins ...
- snapde的批量文件数据过滤保存功能
一.snapde基本介绍 Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏. 二.snapde批量数据筛选功能 如果想要对很多文件筛选出来 ...