從零搭建vue2 webpack3專案 下

2021-10-16 22:21:16 字數 1309 閱讀 5174

src/css/下建立 index.css檔案

在main.js 匯入index.css檔案 :import './css/index.css'匯入後儲存報錯,沒有解析css檔案的loader,解決:

plugins:

,module:

//loader呼叫規則從右到左

]}

src/css/下建立 index.less檔案

在main.js 匯入index.css檔案 :import './css/index.less'

plugins:

,module:

//loader呼叫規則從右到左//]

}

同理:npm i sass-loader -d//注意此處是 sass

cnpm i node-sass -d//此依賴一般用npm安裝不上,此處用cnpm

plugins:

,module:

//loader呼叫規則從右到左//]

}

解決:cnpm i url-loader file-loader -d//file-loader 為內部依賴

plugins:

,module:

//use乙個的話,用字串格式就可以;limit設定大於7631位元組不以base64來展示;name設定以原名字命名並以乙個hash值為字首,防止名稱一致被覆蓋

$/, use:

'url-loader'

}//解析字型

]}

第一套:cnpm i babel-core babel-loader babel-plugin-transform-runtime -d第二套:cnpm i babel-preset-env babel-preset-stage-0 -d在webpack配置檔案,在module節點下的rules陣列中,新增乙個新的匹配規則:

注意:必須排除node_modules目錄,否則babel會把node_modules中所有的第三方js檔案,都打包編譯,這樣會非常消耗cpu,同時打包非常慢,且專案無法正常執行

在根目錄新建 .babelrc 的babel配置檔案,此檔案屬於json格式,所以配置的時候必須符合json語法規範(不能寫注釋;字串必須雙引號)

vue 從零搭建專案

本地開發需要哪些工具 node.js 4.x,6.x preferred 以及npm包管理器。可以使用國內 的cnpm webpack前端構建工具,將vue 模板編譯打包處理的工具 webpack是當下最熱門的前端資源模組化管理和打包工具,它可以將很多鬆散的模組按照以來以及一定的規則打包成符合生產環...

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....

VUE從零搭建專案 安裝環境

2.判斷是否安裝成功 命令 node v 3.判斷是否安裝npm npm是nodejs的包管理器,用於node外掛程式管理,包括安裝 解除安裝 管理依賴 npm v 4.npm安裝外掛程式命令 npm install name 5.安裝cnpm npmjs.org 映象,國內使用更方便 npm in...