-
Vue的API重點(diǎn):
1、生命周期方法
2、computed
查看全部 -
Vue:
1、數(shù)據(jù)綁定
2、Vue文件開發(fā)方式、組件化,寫組件比較方便
3、render方法(Vue的核心實(shí)現(xiàn)也變成了虛擬Dom),數(shù)據(jù)變化時(shí)啟動(dòng)render方法更新HTML
4、template標(biāo)簽里的所有節(jié)點(diǎn)最終都是通過render方法中的createElement方法創(chuàng)建一個(gè)個(gè)節(jié)點(diǎn),得到一個(gè)節(jié)點(diǎn)樹
5、要真正理解Vue的開發(fā)模式我們要理解它的render方法,這是我們深入理解Vue很需要掌握的一個(gè)知識(shí)
查看全部 -
webpack-dev-server: 專門用于開發(fā)環(huán)境,提高開發(fā)效率
使用方法:webpack-dev-server --config webpack.confog.js
npm中設(shè)置環(huán)境變量的包為:cross-env,為Mac和Windows兩個(gè)平臺(tái)統(tǒng)一設(shè)置環(huán)境變量的方式,用法:cross-env NODE_ENV=production或cross-env NODE_ENV=development,寫在script命令里面,啟動(dòng)腳本的時(shí)候設(shè)置的環(huán)境變量都是存在process.env這個(gè)對(duì)象里面的,在代碼中可以通過這個(gè)對(duì)象取得設(shè)置的環(huán)境變量
設(shè)置html文件作為入口:需要安裝webpack插件:html-webpack-plugin
查看全部 -
//項(xiàng)目初始化
npm init
package.json寫命令運(yùn)行和直接在命令行運(yùn)行命令的區(qū)別:前者是本項(xiàng)目的環(huán)境,用的包也是項(xiàng)目里的包,而后者則是全局的環(huán)境的包。
webpack打包后的入口文件的代碼中:上面部分是webpack的固有代碼,用來處理模塊依賴的,下面的vue的源碼(需要把它分離出去)
查看全部 -
1、減少http請(qǐng)求(網(wǎng)絡(luò)優(yōu)化)
2、壓縮靜態(tài)資源文件
3、使用瀏覽器的長緩存
這些都可以用webpack進(jìn)行優(yōu)化
webpack等工具都是在node環(huán)境里面運(yùn)行的
查看全部 -
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
報(bào)這行錯(cuò)是因?yàn)閂ue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的。
參考官方文檔 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
在webpack.config.js中加入下面代碼就行了
const path=require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
plugins: [
new VueLoaderPlugin()
],
module:{
rules:[
{
test:/.vue/,
loader:'vue-loader'
}
]
}
}
查看全部 -
各個(gè)依賴包的版本
vue-loader:13.6.0
webpack:3.10.0
vue:2.5.13
vue-template-compiler:2.5.13
css-loader:0.28.7
url-loader:0.6.2
style-loader:0.19.1
file-loader:1.1.6
stylus:0.54.5
stylus-loader:3.0.1
webpack-dev-server:2.9.7
cross-env:5.1.3
html-webpack-plugin:2.30.1
查看全部 -
前端的價(jià)值:
1、搭建前端工程:數(shù)據(jù)緩存、es6和less(可以加快開發(fā)效率)。
2、網(wǎng)絡(luò)優(yōu)化:http(所有靜態(tài)資源都是通過http請(qǐng)求的)。
3、api定制。
4、node.js層。
? ? vue-cli生成的項(xiàng)目就是基于webpack的前端工程。
查看全部 -
謝謝老師查看全部
-
postCSS 是一個(gè)工具,它利用各種插件來對(duì)CSS文件進(jìn)行處理。
autoprefixer 插件就是對(duì)CSS文件中添加瀏覽器兼容頭部(-webkit-)
查看全部 -
hash 和 chunkhash 區(qū)別,就是 hash 是給同批次打包的文件用的相同的hash數(shù),而chunkhash是根據(jù)每個(gè)chunk塊單獨(dú)用一個(gè)hash值
查看全部 -
entry.vendor 屬性作用是提取第三方庫,會(huì)將指定的第三方庫打包成一個(gè) vendor.js 而不會(huì)和業(yè)務(wù)代碼打包在一起? -- webpack 4 移除
查看全部 -
devtool 用于頁面調(diào)試的,源代碼使用ES6或者.vue文件,在頁面上是經(jīng)過編譯后的,所以直接通過開發(fā)工具查看代碼跟源代碼是不一樣的,不利于調(diào)試。devtool 可以使用map文件對(duì)編譯后的代碼映射成源代碼,方便調(diào)試。 -- webpack 4 有 默認(rèn)設(shè)置,可不寫
查看全部 -
development 加雙引號(hào)原因是為了讓這個(gè)值在JS中成為一個(gè)String類型,如果不加 相當(dāng)于是一個(gè)變量名。
查看全部 -
webpack.DefinePlugin 插件作用為:
使得在JS中也能使用 NODE_ENV 環(huán)境變量,調(diào)用時(shí)用的就是屬性 'process.env'。
webpack在打包時(shí)會(huì)根據(jù)這個(gè) 環(huán)境變量 來選擇框架(vue/react)的版本。像vue在開發(fā)版本中會(huì)有很多錯(cuò)誤提示之類的功能,而在生產(chǎn)版本中是沒有的。
查看全部
舉報(bào)