Node.js webpack中导入vue的三种方法

在webpack 中使用 Vue：
安装 vue 模块 npm i vue -S
注意： 在 webpack 中， 使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；

第一种导入方法：

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

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

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

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

5. 修改main属性入口，把 "main": "dist/vue.runtime.common.js", 修改成 "main": "dist/vue.js",即可。

第二种导入方法：

在项目的main.js文件中直接引入vue所在的路径
import Vue from '../node_modules/vue/dist/vue.js'

第三种导入方法：

main.js文件

import Vue from 'vue' // 调用 vue 模块修改webpack.config.js配置文件使导入的模块指向vue文件

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

webpack.config.js配置文件

var path = require('path')

var htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'), 
  output: { 
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js' 
  },
  plugins: [ 
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), 
      filename: 'index.html' 
    })
  ],
  module: { 
    rules: [ 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的 第三方 loader 规则
    ]},
    resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
              "vue$": "vue/dist/vue.js"
        }
    }
}

在webpack.config.js配置文件中通过 resolve 修改 Vue 被导入时候的包的路径。