Vue学习之webpack中使用vue(十七)

2019-08-14 10:06:58来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、包的查找规则:

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 实例要控制的区域。


原文链接:https://www.cnblogs.com/21-forever/p/11128877.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:react 实现评分组件

下一篇:electron-vue多显示屏下将新窗口投放是其他屏幕