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文件中导入示例: ( ...
随机推荐
- JVM探究之 —— 类加载过程
1. 类加载是什么 虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 与那些在编译时需要进行连 ...
- IIS连接数、并发连接数、最大并发工作线程数、应用程序池的队列长度、应用程序池的最大工作进程数详解
IIS:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池的最大工作进程数详解 iis性能指标的各种概念:连接数.并发连接数.最大并发工作线程数.应用程序池的队列长度.应用程序池 ...
- C++中rapidxml用法
转载:https://www.cnblogs.com/rainbow70626/p/7586713.html 解析xml是第三方库很多,例如:tingxml,这次学习一下rapidxml,rapidx ...
- ES开启慢查询日志
默认情况,慢日志是不开启的.要开启它,需要定义具体动作(query,fetch 还是 index),你期望的事件记录等级( WARN.INFO.DEBUG.TRACE 等),以及时间阈值. es有几种 ...
- JDBC连接抽象方法的使用例子
package com.zdlt.auth.api.base.datasource; import java.sql.*; import java.util.ArrayList; import jav ...
- 查看当前页面的jsp文件【我】
方法一:可以通过看html类型的请求 方法二:对于有些嵌入的子页面,也可以通过,鼠标右键——此框架——查看框架源代码的方式,直接找到对应的jsp 直接就可以看到对应的jsp:
- 转 RAC单个节点执行expdp提示ORA-31693 ORA-31617 ORA-19505 ORA-27037错误
http://blog.itpub.net/31394774/viewspace-2217567/ 1.在RAC单节点执行expdp,出现ORA-31693 ORA-31617 ORA-19505 O ...
- TransactionScope处理分布式事物时提示"事务已被隐式或显式提交,或已终止"
在连接字符串中加入"Enlist=false",问题就这样解决了. ConnectionString = "Data Source=.;Initial Catalog=c ...
- 小程序报错:对应的服务器 TLS 为 TLS 1.0 ,小程序要求的 TLS 版本必须大于等于 1.2
我这里出现此错误的原因是,搭载域名网站的服务器是windows2008 r2,配置的域名证书是TLS1.0版本,需要在服务器注册表中加入TLS的其他版本. 处理办法如下 小程序报错 TLS 版本必须大 ...
- 【NPDP笔记】第二章 组合管理
2.1 什么是产品组合 Product Portfolio 什么是组合管理,讲述的是完成正确的项目, 五大目标 财务稳健,财务目标 管道平衡,资源需求与可用资源之间的平衡 战略协同,与经营战略 组织战 ...