-
思想很重要查看全部
-
vue webpack查看全部
-
一、.vue用loader,.css用use，style-loader把css寫到html中，css-loader便于webpack處理css文件.
二、loader是可以配置一些選項(xiàng)的。
三、url-loader可以把圖片轉(zhuǎn)換成base-64代碼，編寫在js中，limit:1024，如果圖片大小小于1024，就編譯成base-64。
四、npm i style-loader url-loader file-loader, url-loader依賴于file-loader。
五、css預(yù)處理器:stylus
六、npm i stylus-loader
七、sass,less都可以在webpack中配置相關(guān)的loader
查看全部 -
一、vscode直接打開命令行：control+`(esc下面的按鍵)
二、webpack、vue項(xiàng)目
1、npm init：初始化npm 項(xiàng)目。
2、npm i webpack vue vue-loader (i代表install)：不區(qū)分dev-dependency，和dependency
3、npm i css-loader vue-template-compiler(2安裝完后，提示需要安裝的依賴，3完成安裝)
三、組件不能直接掛載到html中。
四、render接收h參數(shù)，這個(gè)參數(shù)實(shí)際上是vue里的creatApp，通過(guò)它把a(bǔ)pp掛載到html中，render是渲染內(nèi)容，如果是要掛載，還要用$mount.
五、package.json里的scripts加上"build": "webpack --config webpack.config.js"，這樣才會(huì)調(diào)用項(xiàng)目里的webpack，如果是輸命令，會(huì)調(diào)用全局的webpack。
六、npm run build ,報(bào)錯(cuò)：you may need an appropriate loader to hand this file type.
需要為.vue文件類型聲明一個(gè)loader(vue-loader).
webpack原生只支持js.
七、把零碎的js 打包成一個(gè)，可以減少http請(qǐng)求。
查看全部 -
一、前端的價(jià)值：
1、搭建前端工程：數(shù)據(jù)緩存、es6和less（可以加快開發(fā)效率）。
2、網(wǎng)絡(luò)優(yōu)化：http(所有靜態(tài)資源都是通過(guò)http請(qǐng)求的)。
3、api定制。
4、node.js層。
二、vue-cli生成的項(xiàng)目就是基于webpack的前端工程。
查看全部 -
npm i cross-env css-loader file-loader html-webpack-plugin style-loader stylus stylus-loader url-loader vue vue-loader vue-template-compiler webpack webpack-dev-server
直接把所有 用到的 包 裝了最新的??
{
"name": "vue-ssr-tech",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.6.0",
"webpack-dev-server": "^3.1.3"
},
"devDependencies": {
"webpack-cli": "^2.0.14"
}
}
查看全部 -
a
查看全部 -
npm i webpack-dev-server? //安裝webpack-dev-server
查看全部 -
這里有一個(gè)坑？
查看全部 -
我的項(xiàng)目? firstVue 同樣是報(bào)錯(cuò)，寫了rules了，還是未解決
不知道與版本有沒(méi)有關(guān)系
查看全部 -
可以考慮安裝stylus的插件，用VS code寫起來(lái)會(huì)非常的爽...
查看全部 -
使用loader的options定義一些額外的條件
// 如果圖片資源小于1024kb,則將其轉(zhuǎn)化為base64代碼寫入.
limit: 1024?
查看全部 -
"build": "webpack --config webpack.config.js"
// 添加一個(gè)腳本.使得運(yùn)行build命令實(shí)際上是運(yùn)行局部安裝在當(dāng)前項(xiàng)目下的webpack.
查看全部 -
學(xué)前端眼界放寬查看全部
-
總結(jié)查看全部
舉報(bào)