webpack与vue的结合使用

在普通网页中如何使用vue：

1. 使用 script 标签 ，引入 vue 的包

2. 在 index 页面中，创建 一个 id 为 app div 容器

3. 通过 new Vue 得到一个 vm 的实例

在webpack 中尝试使用 Vue：

将vue安装为运行依赖

cnpm install vue --save-dev

za

在main.js中导入Vue的构造函数

import Vue from 'vue'

创建vm实例：

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  }
})

在index.html里面使用插值表达式访问vm实例的data数据：

<div id="app">
    <p>{{msg}}</p>
</div>

结果发现页面不会显示数据，而且会有错误提示：

原因在于：

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

包的查找规则：

1. 找 项目根目录中有没有 node_modules 的文件夹

2. 在 node_modules 中 根据包名，找对应的 vue 文件夹

3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件

4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

根据上面的查找规则，我们可以发现实际上导入的是node_modules/vue/dist/vue.runtime.common.js，而我们在普通网页中导入的是vue.js文件，因为导入了功能不全的文件就会导致html文件不能使用插值表达式来获取vm实例的data数据

解决办法：

方式一：

修改在 vue 文件夹中的 package.json 包配置文件，将main的属性值改为vue.js（不推荐）

"main": "dist/vue.js"

方式二：

修改main.js

import Vue from '../node_modules/vue/dist/vue.js'

方式三：

在`webpack.config.js`中添加`resolve`属性

resolve: {
  alias: { // 修改 Vue 被导入时候的包的路径
    "vue$": "vue/dist/vue.js"
  }
}

如何在只提供了 runtime-only 方式的情况下，渲染出一个组件

在src目录下面创建一个login.vue的文件：

关于export default在文章

<template>
  <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    // 注意：组件中的 data 必须是 function
    return {
      msg: "123"
    };
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的 show 方法");
    }
  }
};
</script>

<style>

</style>

在main.js里面导入 login 组件：

import login from './login.vue'

vm实例里：

components: {
    login
}

会报错：

类似于css等文件，webpack也不能打包处理后缀为vue的文件，需要借助第三方loader加载器

首先需要安装依赖：

cnpm install vue-loader vue-template-compiler --save-dev

然后在webpack.config.js配置文件中，新增loader配置项：

{ test: /\.vue$/, use: 'vue-loader' } 

然后报了

解决方法：

在webpack.config.js文件加入：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

在插件配置节点里面加入plugins：

new VueLoaderPlugin()

解决好后还是不能使用components向挂载位置导入组件，需要借助render方法才行：

//   components: {
//     login
//   }
  render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
    return createElements(login)
  }

总结梳理： webpack 中如何使用 vue 

1. 安装vue的包： cnpm i vue -S

2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -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 实例要控制的区域；

结合webpack使用vue-router

main.js后面会增加：

import Vue from 'vue'

// 导入app组件
import app from './App.vue'

var vm = new Vue({
  el:'#app',
  render: c => c(app)
})

App.vue（对应app组件）后面会增加：

<template>
    <div>
        <h1>这是app组件</h1>
    </div>
</template>


<script>
export default {
    
}
</script>


<style>

</style>

安装vue-router

cnpm install vue-router --save-dev

在此模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能，但是使用全局的 script 标签，则无须如此 (手动安装)。

// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)

创建路由对象：

var router = new VueRouter({
  routes: [
    // account  goodslist
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

在src下面创建一个main文件夹用于存放accout.vue、goodslist.vue:

accout.vue:

<template>
  <div>
    <h1>这是 Account 组件</h1>
  </div>
</template>


<script>
</script>

<style>

</style>

goodslist.vue:

<template>
  <div>
    <h1>这是 GoodsList 组件</h1>
  </div>
</template>


<script>
</script>

<style>

</style>

在main.js里面导入accout、goodslist组件：

import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

将路由对象挂载到 vm 上：

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router // 4. 将路由对象挂载到 vm 上
})

Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去（即需要放到App.vue里面去，因为App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中）：

<template>
  <div>
    <h1>这是 App 组件</h1>

  
    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">Goodslist</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
</script>


<style>

</style>

组件中style标签lang属性和scoped属性：

普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性

只要是style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性，这样子组件的样式不会影响到父组件

<style lang="scss" scoped>
body {
  div {
    font-style: italic;
  }
}
</style>