vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤問題的解決
vue-loader和webpack項(xiàng)目配置及npm錯(cuò)誤
學(xué)習(xí)vue的同學(xué)都知道，想要生成一個(gè)vue項(xiàng)目，使用vue-cli腳手架工具直接生成項(xiàng)目即可，但是小編為了更加明白vue項(xiàng)目中一些項(xiàng)目文件的真正含義，從空文件開始構(gòu)建項(xiàng)目，其中還包括webpack的一些知識(shí)點(diǎn)
1、在VS編輯器打開終端，npm init初始化，生成package.json文件
2、安裝項(xiàng)目中所需要用到的包，例如webpack 、 vue 、 vue-loader等
使用命令npm i webpack vue vue-loader進(jìn)行安裝，如果此時(shí)報(bào)錯(cuò)，可以一個(gè)一個(gè)的進(jìn)行安裝，npm i webpack 、npm i vue 、npm i vue-loader
如果新建過程中出現(xiàn)以下錯(cuò)誤：
可以看一下package.json下的name字段是不是項(xiàng)目名字和你安裝的那個(gè)包名字相同了，如果一樣就會(huì)報(bào)那個(gè)錯(cuò)，把項(xiàng)目名字改成和安裝不沖突的名字
正確的運(yùn)行結(jié)果應(yīng)該是：
3、繼續(xù)安裝css-loader以及vue-template-compiler
npm i css-loader vue-template-compiler
4、新建src文件夾，新加app.vue，進(jìn)行編寫基本的代碼
5、此時(shí)的文件是不可能進(jìn)行編譯的，但是當(dāng)我們想要運(yùn)行此項(xiàng)目時(shí)，可以使用webpack，webpack是一個(gè)打包器；
在根目錄下建立webpack.config.js，并在里面添加配置
entry是我們這個(gè)項(xiàng)目文件的一個(gè)入口文件，output是打包以后的輸出文件，__dirname 是表示當(dāng)前文件的名字，module里面是一些loader配置
6、入口文件index.js文件也進(jìn)行簡(jiǎn)單的編輯：
7、最后進(jìn)行運(yùn)行npm run build
根據(jù)webpack.config.js的配置，會(huì)在根目錄生成一個(gè)文件夾dist，里面是輸出的一些文件。
到這里，我們的項(xiàng)目配置就完成了?。?/p>
解決vue-loader webpack版本出現(xiàn)的問題
出現(xiàn)問題
問題描述
主要是webpack打包時(shí)出現(xiàn)問題報(bào)錯(cuò)如上
發(fā)現(xiàn)vue-loader 和 vue-template-compiler 版本不匹配
解決方法
npm instll npm update
之后再運(yùn)行就解決了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue組件開發(fā)之slider組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
本篇文章主要介紹了淺談vuepress 踩坑記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問題
vue是一款具有響應(yīng)式更新機(jī)制的框架，既可以實(shí)現(xiàn)單向數(shù)據(jù)流也可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue響應(yīng)式更新機(jī)制及不使用框架實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)雙向綁定問題,需要的朋友可以參考下2019-06-06
解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟
這篇文章主要介紹了Vant的安裝和配合引入Vue.js項(xiàng)目里的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關(guān)于Vue插件從封裝到發(fā)布的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了Vue3使用mitt進(jìn)行組件通信的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-05-05
本篇文章主要介紹了詳解vue2路由vue-router配置（懶加載），實(shí)例分析了vue-router懶加載的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Vue中如何使用mock模擬數(shù)據(jù)，具有很好的價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06