使用webpack使用vue

1、導入vue.js的方法

安裝vue的包： cnpm i vue -S
包的查找規則：

1. 找 項目根目錄中有沒有 node_modules 的文件夾
2. 在 node_modules 中 根據包名，找對應的 vue 文件夾
3. 在 vue 文件夾中，找 一個叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找 一個 main 屬性【main屬性指定了這個包在被加載時候，的入口文件】

我們有三種方法引入：

1、在入口文件（main.js）中引入vue.並在配置文件中修改文件路徑

import Vue from 'vue'

將main後面改爲vue.js的路徑

2、直接進入vue.js路徑

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

3、在webpack.config.js中添加resolve屬性

main.js中

import Vue from 'vue'

 resolve: {
    alias: { // 修改 Vue 被導入時候的包的路徑
    "vue$": "vue/dist/vue.js"
    }
  }

注意，每次修改都需要重新啓動

二、引入.vue文件

1、.vue文件模板

<template>
<!-- html模板 -->
  <div>
    <h1>這是登錄組件</h1>
  </div>
</template>
<script>
// 業務邏輯
</script>
<style>
/* 樣式 */
</style>

2、在webpack使用vue

import Vue from '../node_modules/vue/dist/vue.js'
// 1. 導入 login 組件到main入口文件中：
import login from './login.vue' 
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
   /* render: function (createElements) { 
    return createElements(login)
  } */
   render: c => c(login)
})
  

/在 webpack 中，如果想要通過 vue， 把一個組件放到頁面中去展示，vm 實例中的 render 函數可以實現
默認，webpack 無法打包 .vue 文件，需要安裝 相關的loader：
cnpm i vue-loader vue-template-compiler -D
在配置文件中，新增loader哦配置項 { test:/.vue$/, use: ‘vue-loader’ }
在webpack.config.js中配置引包
const { VueLoaderPlugin } = require(‘vue-loader’);
plugins:[
new VueLoaderPlugin()
]
這樣就能將組件渲染到頁面中了
總結
總結梳理： webpack 中如何使用 vue :

1. 安裝vue的包： cnpm i vue -S
2. 由於 在 webpack 中，推薦使用 .vue 這個組件模板文件定義組件，所以，需要安裝 能解析這種文件的 loader cnpm i vue-loader vue-template-complier -D
   在webpack.config.js中配置引包
   const { VueLoaderPlugin } = require(‘vue-loader’);
   plugins:[
   new VueLoaderPlugin()
   ]
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 實例要控制的區域；