vue系列9 webpack結合vue使用

2022-06-12 07:54:11 字數 4217 閱讀 3415

// 總結梳理: 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' 匯入這個元件

// 由於 webpack 是基於node進行構建的,所有,webpack的配置檔案中,任何合法的node**都是支援的

var path = require('path')

// 在記憶體中,根據指定的模板頁面,生成乙份記憶體中的首頁,同時自動把打包好的bundle注入到頁面底部

// 如果要配置外掛程式,需要在匯出的物件中,掛載乙個 plugins 節點

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

// 當以命令列形式執行 webpack 或 webpack-dev-server 的時候,工具會發現,我們並沒有提供 要打包 的檔案的 入口 和 出口檔案,此時,他會檢查專案根目錄中的配置檔案,並讀取這個檔案,就拿到了匯出的這個 配置物件,然後根據這個物件,進行打包構建

module.exports = ,

plugins: [ // 所有webpack 外掛程式的配置節點

new htmlwebpackplugin()

],module: , // 處理 css 檔案的 loader

, // 處理 less 檔案的 loader

, // 處理 scss 檔案的 loader

, // 處理 路徑的 loader

// limit 給定的值,是的大小,單位是 byte, 如果我們引用的 ,大於或等於給定的 limit值,則不會被轉為base64格式的字串, 如果 小於給定的 limit 值,則會被轉為 base64的字串

, // 處理 字型檔案的 loader

, // 配置 babel 來轉換高階的es語法

// 處理 .vue 檔案的 loader]},

resolve:

}}

// 如何在 webpack 構建的專案中,使用 vue 進行開發

// 複習 在普通網頁中如何使用vue:

// 1. 使用 script 標籤 ,引入 vue 的包

// 3. 通過 new vue 得到乙個 vm 的例項

// 在webpack 中嘗試使用 vue:

// 注意: 在 webpack 中, 使用 import vue from 'vue' 匯入的 vue 建構函式,功能不完整,只提供了 runtime-only 的方式,並沒有提供 像網頁中那樣的使用方式;

import vue from 'vue'

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

// 回顧 包的查詢規則:

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

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

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

// 4. 在 package.json 檔案中,查詢 乙個 main 屬性【main屬性指定了這個包在被載入時候,的入口檔案】

// var login =

// 1. 匯入 login 元件

import login from './login.vue'

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

// 在配置檔案中,新增loader哦配置項

var vm = new vue(,

// components這種方式還是會遇到runtime-only問題,要用render渲染

// components:

/* render: function (createelements) */

// render: (createelements) =>

// render: (c) =>

// render: (c) =>

// render: (c) =>

// render: (c) =>

// render: (c) => c(login)

render: c => c(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' 匯入這個元件

import m222, from './test.js'

console.log(m222)

console.log(title123 + ' --- ' + content)

//1)node 用module.exports和require

// 這是 node 中向外暴露成員的形式:

// module.exports = {}

// module.exports 和 exports 來暴露成員

// 在node中 使用 var 名稱 = require('模組識別符號')

//2)//es6 用 export defaule(export)和import

// 在 es6中,也通過 規範的形式,規定了 es6 中如何 匯入 和 匯出 模組

// es6中匯入模組,使用 import 模組名稱 from '模組識別符號' import '表示路徑'

// 在 es6 中,使用 export default 和 export 向外暴露成員:

var info =

export default info

/* export default */

// 注意: export default 向外暴露的成員,可以使用任意的變數來接收

// 注意: 在乙個模組中,export default 只允許向外暴露1次

// 注意: 在乙個模組中,可以同時使用 export default 和 export 向外暴露成員

export var title = '小星星'

export var content = '哈哈哈'

// 注意: 使用 export 向外暴露的成員,只能使用 的形式來接收,這種形式,叫做 【按需匯出】

// 注意: export 可以向外暴露多個成員, 同時,如果某些成員,我們在 import 的時候,不需要,則可以 不在 {} 中定義

// 注意: 使用 export 匯出的成員,必須嚴格按照 匯出時候的名稱,來使用 {} 按需接收;

// 注意: 使用 export 匯出的成員,如果 就想 換個 名稱來接收,可以使用 as 來起別名;

/*main.js檔案

從test.js中匯入

import m222, from './test.js'

console.log(m222)

console.log(title123 + ' --- ' + content)

*/

webpack系列二 webpack打包優化探索

雖然webpack的已經公升級到了webpack4,而我們目前還在使用webpack3,但其中的優化點都大同小異,公升級後同樣適用。這三條原則永遠是一切優化的前提 1 主要配置 2plugins 3 new webpack.optimize.moduleconcatenationplugin 4 1...

vue簡單學習 webpack

本地安裝 3.2.1 js檔案之間的匯出和匯入方式 方式1 a.js import from b 測試 let sum util2.sum alert sum 2 b.js export const util 方式2 a.js import from b 測試 let sum util2.sum a...

webpack搭建vue環境

npm init y cnpm i webpack webpack cli dcnpm i webpack dev server dcnpm i vue scnpm i html webpack plugin d建立src index.html src main.js webpack.config....