webpack中使用vue、component、vue-router

一、webpack中使用vue和组件

在普通网页中使用vue：

1. 使用script标签，引入vue的包
2. 在index页面，创建一个id为app的div容器
3. 创建一个vue实例

在webpack中使用vue

1. 安装vue包

npm i vue -S

2. 引入vue包

import Vue form "vue"

注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式

//以下路径导入的是功能完整的vue
import Vue from '../node_modules/vue/dist/vue.js'

//或者在配置文件中配置以下代码
resolve:{
        alias:{
             "vue$":'vue/dist/vue.js'
        }
    }

包的查找规则：

• 找项目根目录中有没有 node_modules 的文件夹
• 在 node_modules 中 根据包名，找对应的 vue 文件夹
• 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件