在webpack中使用vue

1. 在 webpack 中，使用 import vue from 'vue' 匯入的 vue 建構函式，功能不完整，只提供了runtime-only的方式，並沒有提供 像網頁中那樣的使用方式；

如果想使用功能完整的 vue.js，有以下兩種方式：

一：import vue from '../node_modules/vue/dist/vue.js'

包的查詢規則：

1. 找專案根目錄中有沒有 node_modules 的資料夾

2. 在 node_modules 中根據包名，找對應的 vue 資料夾

3. 在 vue 資料夾中，找乙個叫做 package.json 的包配置檔案

4. 在 package.json 檔案中，查詢 main 屬性 （該屬性指定了這個包在被載入時的入口檔案）

二、在 webpack.config.js 配置檔案中，給 module.exports 新增乙個 resolve,alias 屬性，

resolve.alias 配置項通過別名來把原來匯入路徑對映成乙個新的匯入路徑

resolve: 

}

我們以 script 標籤 引入 vue.js 時，定義乙個元件是這樣的：

但是在 webpack 中，引入的 runtime-only 的 vue 不能這樣定義元件，需要單獨建立乙個 login.vue 的檔案，代表乙個元件，然後在 main.js 中 去 import 引入。當然，webpack 預設無法打包 .vue 的檔案，需要安裝第三方 loader：

cnpm i vue-loader vue-template-compiler -d

在webpack.config.js中加入：

const path = require('path');

const htmlwebpackplugin = require("html-webpack-plugin");const vueloaderplugin= require('vue-loader/lib/plugin');const  = require('path');
module.exports =, 
//入口檔案，從專案根目錄指定
output: ,
//只要是外掛程式，一定要放到 plugins 節點中去
plugins: [ //
配置外掛程式的節點
new htmlwebpackplugin(),
newvueloaderplugin()],
module: , //
配置 .css 檔案的第三方 loader 規則
, //
配置 .less 檔案的第三方 loader 規則,}
]}, 
//處理路徑的loader 
, //
處理字型
,]
},resolve: }}

//

main.js 入口檔案
import vue from 'vue'import login from './login.vue'
var vm = new
vue(,
//render(createelements)render: c => c(login)//
箭頭函式只有一行，缺省會 return
})

webpack中使用Vue小結

npm i vue s完成這個命令後，最新vue包就會自動新增到本專案的node modules中 2.由於在webpack中推薦使用vue這個元件模版定義元件，所以需要安裝能解析這種檔案的loader,npm i vue loader vue template complier dwebpack老...

webpack中使用vue元件

當在wepack的入口檔案中引入的是全的vue包時 可以使用components來進行元件的渲染的 但是如果引入的是不全的runtime only包的時候 就要結合vue檔案和render進行頁面的渲染的 1.vue檔案中結構 script 2.寫好vue檔案後在入口檔案中引入vue檔案 impor...

在webpack構建的專案中使用vue

若是出錯,把package lock.json刪除就好了 index.html lang en dir ltr charset utf 8 title head h1 div body html main.js 如何在webpack建立的專案中使用vue 注意 在webpack中，使用import ...