一、包的查找规则:

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(十七)的更多相关文章

  1. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  2. webpack 中导入 vue 和普通网页使用 vue 的区别(四)

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  3. 011 webpack中使用vue

    一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...

  4. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

  5. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  6. webpack中使用vue

    1.安装vue cnpm i install -S 2.由于在 webpack 中,推荐使用 .vue 的文件模板文件定义组件 , 所以 ,需要安装 能解析这种文件的 loader cnpm i vu ...

  7. 20 区分webpack中导入vue和普通网页使用script导入Vue的区别

    回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...

  8. 在webpack中配置.vue组件页面的解析

    1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...

  9. vue项目,webpack中配置src路径别名及使用

    1.项目结构: 2.在build文件夹下的webpack.base.conf.js文件中设置src的路径别名. 3.在js文件或者vue文件的script标签中使用: (1).js文件中导入示例: ( ...

随机推荐

  1. KMS服务器激活

    https://blog.csdn.net/weixin_42588262/article/details/81120403 http://kms.cangshui.net/ https://kms. ...

  2. Java基础 awt Graphics2D 生成矩形图片并向内写入字符串

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  3. 面试突击(八)——JVM的结构及内存模型,是怎么划分的?

    声明:本文图片均来自网络,我只是进行了选择,利用一图胜千言的力量来帮助自己快速的回忆相关的知识点 0:再上一张Java代码的转换流程图 .java——Java程序员编写,给人看的 .class——Ja ...

  4. 面试突击(五)——Java常用集合

    为了勾起回忆,我画了一个常用集合类的结构关系图,话不多说,详见下图: 实际开发中ArrayList/HashMap/HashSet是三种最常用的集合工具类,通过其结构关系图也能清晰的了解他们的特性,所 ...

  5. OpenStack(二)——使用Kolla部署OpenStack-allinone云平台

    (1).Kolla概述 Kolla是OpenStack下用于自动化部署的一个项目,它基于docker和ansible来实现,其中docker主要负责镜像制作和容器管理,ansible主要负责环境的部署 ...

  6. sql 在查询到的语句基础上添加行号

    正常查询语句: SELECT TagName FROM ps_status a WHERE a.TagName LIKE "DTmk_zybf%1bxxjcqh.PV" 查询结果: ...

  7. lnmp+discuz使用redis缓存(待进一步研究)

    一直说Redis.Redis缓存.一直不清楚怎么用.于是花点时间研究了一下,但是还没搞懂.先把大概内容记录一下,待后续继续学习 1.首先部署lnmp环境,这个我的博客有些,请自行搜索 2.给php添加 ...

  8. 实现CI/CDk8s高可用集群搭建总结以及部署API到k8s

    实现CI/CD(Centos7.2)系列二:k8s高可用集群搭建总结以及部署API到k8s 前言:本系列博客又更新了,是博主研究很长时间,亲自动手实践过后的心得,k8s集群是购买了5台阿里云服务器部署 ...

  9. IDEA配置类签名

  10. GitBook的使用

    首先安装gitbook npm install -g gitbook-cli 检查是否安装成功 gitbook -V 然后就要建立一个文件夹进到文件夹目录下 让此文件夹初始化下 gitbook ini ...