vue——43-webpack打包vue
阿新 • • 發佈:2018-12-16
首先,普通網頁中使用vue:
- 使用 script 標籤,引入 vue 的包
- 在 index 頁面中,建立一個 id 為 app div 容器
- 通過 new Vue 得到一個 vm 的例項
1.先將該配置的屬性都配置好
2.區域性引入 vue 的專案檔案包
命令:cnpm i vue -s
3.在入口檔案(main.js)中引入 vue
注意:
- 在 webpack 中,使用 import Vue from ‘vue’ 匯入的 Vue 建構函式功能不全,只提供了 runtime-only 的方式(閹割版),沒有提供網頁那種使用方式(完整版);
包的查詢規則:
- 找專案根目錄有沒有 node_modules 的資料夾
- 找 node_modules 中根據包名,找到對應的 vue 資料夾
- 在 vue 資料夾中,找一個叫做 package.json 的包配置檔案
- 在 package.json 檔案中,查詢一個 main 屬性(main 屬性指定了這個包在被載入的時候,的入口檔案)
引用完整版 vue 包的兩種方式:
1.在 webpack.config.js 中修改 vue 被匯入時候包的路徑,再引用下面檔案
import Vue from 'vue';
webpack.config.js 中修改 vue 被匯入時候包的路徑: 在 module.exports 中新增下面檔案
resolve: {
alias: {
// 設定 vue 被匯入時候的包的路徑
"vue$": "vue/dist/vue.js"
}
}
2.使用下面的方式匯入包:
import Vue from '../node_modules/vue/dist/vue';
4.專案開始
命令:npm run dev
index.html
<div id="app">
<h1>{{msg}}</h1>
</div>
main.js
var vm=new Vue({
el:'#app' ,
data:{
msg:'我是 vue !'
}
});