一、安裝vue
cnpm install vue -S // 安裝到項目運行依賴
二、使用,運行
運行之后有報錯:
當前使用的包是runtime-only的包,並不是最全的包,在網頁中使用script導入的vue包功能最全,這里的vue功能不全,是嚴格版的
// 這是入口文件 // console.log('ok'); // 如何在webpack構建的項目中使用vue進行開發 // 在普通網頁中使用vue // 1、使用script引入vue的包 // 2、創建一個id=app的容器 // 3、new 創建vm 實例 // cnpm install vue -S // 安裝到項目運行依賴 // 在webpack中使用 import Vue from 'vue' 導入的vue,功能不完整,只提供了runtime-only的方式 // 並沒有提供像網頁中那樣的使用方式 import Vue from 'vue' // 包的查找規則: // 1、找項目根目錄中有沒有 node_modules 的文件夾 // 2、在 node_modules 中根據包名,找到對應的vue文件夾 // 3、在vue文件夾中,找一個叫做package.json的包配置文件 // 4、在package.json中查找main屬性【main屬性指定了包被加載之后的入口文件】 var vm = new Vue({ el:'#app', data:{ msg:'123' } })
查找 : node_modules --- vue -- package.json --- main 屬性:"main": "dist/vue.runtime.common.js",
所以我們在import之后得到的是vue.runtime.common.js文件
這里的vue.js就是在script標簽中導入的那個,為了解決上面的報錯信息,
1、可以更改import的路徑:
import Vue from '../node_modules/vue/dist/vue.js'
2、修改webpack.config.js文件配置:
首先js文件中還是使用 import Vue from 'vue'
其次,修改配置文件:增加resolve節點,

注意:每次修改了配置文件都要重新啟動才可以
三、定義組件
1、使用網頁版的引入vue文件,定義組件以及使用都沒有問題
2、當直接使用import Vue from 'vue' 並且webpackage.config.js中沒有修改alias屬性時,組件時不能正常使用的,如何解決呢???
四、解決方法:
新建一個 login.vue 文件,這個文件就是一個純粹的組件。這個文件有三部分組成:template script style
然后在main.js中 import login from ‘./login.vue’
運行之后還是會報錯:識別不了,需要安裝loader
解決方法:
安裝loader:
cnpm install vue-loader vue-template-compiler -D
修改配置文件:
不能直接在components中注冊login,需要使用render來渲染到頁面中:
五、總結
// webpack.config.js const path = require('path'); // 在內存中,根據指定的模板頁面,生成一份內存中的首頁,同時自動把 // 打包好的output.bundles.js注入到頁面底部 // 配置插件需要在對象中掛載一個plugins節點 const htmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'output.bundle.js' }, mode:'development', plugins:[ // 所有webpack插件的配置節點 new htmlWebpackPlugin({ // 指定模板文件路徑 template:path.resolve(__dirname,'./src/index.html'), // 設置生成的內存頁面的名稱 filename:'index.html' }), // 為 .vue 文件配置加載器,只支持原生js new VueLoaderPlugin() ], module:{ // 配置所有第三方loader模塊 rules:[ // 第三方模塊的匹配規則 { // 處理css文件的loader test:/\.css$/, use:['style-loader','css-loader'] }, { test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader'] }, { test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] }, { test:/\.vue$/, use: ['vue-loader'] } ] }, resolve:{ alias: { // 修改vue被導入時候報的路徑 // 'vue$':'vue/dist/vue.js' } } }
// main.js // 這是入口文件 // console.log('ok'); // 如何在webpack構建的項目中使用vue進行開發 // 在普通網頁中使用vue // 1、使用script引入vue的包 // 2、創建一個id=app的容器 // 3、new 創建vm 實例 // cnpm install vue -S // 安裝到項目運行依賴 // 在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 = { // template:'<h1>這是login組件,是使用網頁中形式創建出來的組件</h1>' // } // 1、導入login組件 import login from './login.vue' // 默認,webpack 無法打包 .vue 文件,需要安裝相關的loader // cnpm install vue-loader vue-template-compiler -D // 在配置文件中,新增 loader 的配置項 // { // test:/\.vue$/, // use: 'vue-loader' // } var vm = new Vue({ el:'#app', data:{ msg:'123' }, // components:{ // login // } // 在webpack中,如果想要通過 vue ,把一個組件展示到頁面中去, // vm 實例中的 render 函數可以實現 // render:function(createElements){ // return createElements(login); // }, render: (h) => h(login) })
// login.vue // 這是一個純粹的組件,里面有三部分構成 <template> <div> <h1>這是登錄組件,使用.vue 文件定義出來的</h1> </div> </template> <script> </script> <style> </style>
// index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>webpack-vue</title> </head> <body> <div id="app"> {{msg}} <login></login> </div> </body> </html>
總結:webpack中如何使用vue:
1、安裝vue的包, cnpm install vue -D
2、由於在webpack中,推薦使用 .vue 這個組件模板文件定義組件,所以需要安裝 能解析這種文件的loader
cnpm install vue-loader vue-template-compiler -D
3、在 main.js中導入vue模塊,import Vue from 'vue'
4、定義一個.vue結尾的組件,組件由三部分組成,template script style
5、使用import導入一個組件 import login from './login.vue'
6、創建VM 的實例,var vm = new Vue({ el :'#app', render: h => h(login)})
7、在頁面中創建一個id=app的div元素,作為VM實例控制的區域