在webpack 中使用 Vue：
安裝 vue 模塊 npm i vue -S
注意： 在 webpack 中， 使用 import Vue from ‘vue’ 導(dǎo)入的 Vue 構(gòu)造函數(shù)，功能不完整，只提供了 runtime-only 的方式，并沒有提供 像網(wǎng)頁中那樣的使用方式；

第一種導(dǎo)入方法：

找項目根目錄中的node_modules 的文件夾

在 node_modules 中 根據(jù)包名，找對應(yīng)的 vue 文件夾

在 vue 文件夾中，找 一個叫做 package.json 的包配置文件

在 package.json 文件中，查找 一個 main 屬性【main屬性指定了這個包在被加載時候，的入口文件】

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

第二種導(dǎo)入方法：

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

第三種導(dǎo)入方法：

main.js文件

import Vue from 'vue' // 調(diào)用 vue 模塊修改webpack.config.js配置文件使導(dǎo)入的模塊指向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 規(guī)則]},resolve: {alias: { // 修改 Vue 被導(dǎo)入時候的包的路徑"vue$": "vue/dist/vue.js"}} }

在webpack.config.js配置文件中通過 resolve 修改 Vue 被導(dǎo)入時候的包的路徑。

總結(jié)

以上是生活随笔為你收集整理的Node.js webpack中导入vue的三种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。