文章目錄
1、項目簡述
這幾天正在學習Vue全家桶，Vue的體系比較龐大、涉及的內容也比較多，少數幾張帖子很難系統的學習Vue，在這裏模擬搭建一個Vue的環境，還在學習中，如有不到還請見諒。
2、開發環境
編輯器：vsCode
推薦使用vsCode，對比了幾個編輯器工具，vscode的功能最爲好用。
3、vue項目搭建
3.1、插件以及對應配置文件創建
3.1.1、nodejs、npm安裝
nodejs、npm安裝教程請查看我之前寫的這個帖子：
https://blog.csdn.net/jrgdspuwij/article/details/104577548
3.1.2、babel 實現 ES6
在終端輸入命令
# 第一步
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
@第二步
npm install --save @babel/polyfill
#第三步
項目跟目錄創建文件 babel.config.js
3.1.3、webpack
先創建一個空白項目，根目錄創建src目錄
在終端輸入命令
#初始化package.json文件
npm init -y
#安裝jquery插件
npm install jquery -S
#安裝webpack
npm install webpack webpack-cli -D
#手動在項目根目錄下創建webpack.config.js文件
module.exports = {
mode:'development' //開發者模式
//mode:'production' //生產環境模式
}
#在package.json配置文件中的scripts節點下,新增dev腳本
'scripts':{
'dev':'webpack' //scripts節點下的腳本，可以通過npm run 執行
}
#測試打包
npm run dev
打包之後dist文件夾中會生成main.js文件，在index.html中可以引用main.js文件進行使用。
3.1.4、webpack-自動打包配置
1、安裝自動打包工具
#安裝自動打包工具
npm install webpack-dev-server -D
2、修改package.json文件
'scripts':{
#配置自動打包工具
#--open自動打開網站
#--host設置ip地址
#--port設定端口號
'dev':'webpack-dev-server --open --host 127.0.0.1 --port 8888'
}
3、 修改打包入口、出口
#修改webpack.config.js
#引用path插件，支持路徑支持
const path = require('path')
#配置打包設置
module.exports = {
mode:'development',
entry:path.join(__dirname,'./src/index.js'), //打包入口文件路徑
output:{
path:path.join(__dirname,'./dist'),//輸出文件的存放路徑
filename:'bundle.js' //輸出文件名稱
}
}
4、修改index.html引用js方式
#index.html引用方式改爲/hundle.js
#webpack會將bundle.js放入內存中，index.html可以直接從根目錄引用到(但是根目錄中看不到bundle.js文件)
<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
5、自動打包處理
#執行打包命令
npm run dev
自動打開http://localhost:8888網頁
看到如下圖片說明已經成功自動打包運行了。
瀏覽器自動打開網頁，點擊src可查看index.html文件
3.1.5、生成預覽頁面（不需要點擊src才能看到預覽頁）
1、安裝html-webpack-plugin插件、修改相關配置文件
#安裝
npm install html-webpack-plugin -D
#修改webpack.config.js,添加如下內容
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
template:'./src/index.html',//指定要用到的模板文件
filename:'index.html'//指定生成的文件的名稱,該文件存在於內存中,在目錄中不顯示
})
#修改webpack.config.js文件向外暴露配置對象，新增如下配置節點
modules.export = {
plugins:[htmlPlugin] //plugins是一個數組對象，webpack打包期間用到的插件列表
}
運行 npm run dev後自動打開網站，同時自動打開index.html頁面（不需要再點擊src）
3.1.6、配置加載器
1、加載器介紹
通過loader 打包非js模塊
loader 加載器可以打包處理 .less 相關文件
sass-loader 加載器可以打包處理 .scss相關文件
url-loader 加載器可以打包處理 .css中與url路徑相關的文件
在實際開發中，webpack默認只能打包處理以.js結尾的模塊，其他非.js結尾的模塊webpack默認不處理。
需要調用loader加載器纔可以正常打包，否則報錯。
loader加載器協助webpack打包處理特定的文件模塊。
2、安裝css文件加載器
#安裝處理css文件的loader
npm i style-loader css-loader -D
#在webpack.config.js的module -> rules 數組中，添加loader規則
module:{
rules:[
{test:/\.css$/, use:['style-loader','css-loader']}
]
}
#其中test表示匹配的文件類型，use表示對應要調用的loader。
#注意:use數組中指定的loader順序是固定的、多個loader的調用順序是：從後往前調用。
3、安裝less文件加載器
#安裝組件
npm i less-loader less -D
#修改webpack.config.js配置文件
module:{
rules:[
{test:/\.less$/, use:['style-loader','css-loader','less-loader']}
]
}
# 安裝插件
npm i sass-loader node-sass -D
#修改webpack.config.js配置文件
module:{
rules:[
{test:/\.scss$/, use:['style-loader','css-loader','sass-loader']}
]
}
#安裝css打包插件
npm i postcss-loader autoprefixer -D
#修改webpack-config.js
module:{
rules:[
{test:/\.css$/, use:['style-loader','css-loader','postcss-loader']}
]
}
#安裝打包預編譯樣式插件
npm i url-loader file-loader -D
#修改webpack.config.js
#?之後的是參數項，只有小於這個大小的圖片纔會被轉爲base64（單位是字節）
module : {
rules:[
{
test:/\.jdp|png|gif|bmp|ttf|eot|svg|woff|woff2$,
use:'url-loader?limit=16940'
}
]
}
#安裝支持高級語法插件
#babel轉換器相關的包
npm i babel-loader @babel/core @babel/runtime -D
#babel語法插件相關的包
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
#根目錄創建babel配置文件 babel.config.js
#初始化babel.config.js配置文件
module.exports = {
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
#修改webpack.config.js的module -> rules 數組中，添加loader
#exclude排除項，表示babel-loader不需要處理node_modules中的js文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}