Vue学习之webpack中使用vue(十七)
程序员文章站
2022-03-26 12:08:51
一、包的查找规则: 1、在项目根目录中找有没有 node_modules 的文件夹; 2、在 node_modules 中根据包名,找对应的vue 文件夹; 3、在vue 文件夹中,找 一个叫做 package.json的包配置文件; 4、在package.json文件中,查找一个main 属性【m ......
一、包的查找规则:
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 实例要控制的区域。
下一篇: Swoole 的微信扫码登录