-
Vue的API重點:
1、生命周期方法
2、computed
查看全部 -
Vue:
1、數據綁定
2、Vue文件開發方式、組件化,寫組件比較方便
3、render方法(Vue的核心實現也變成了虛擬Dom),數據變化時啟動render方法更新HTML
4、template標簽里的所有節點最終都是通過render方法中的createElement方法創建一個個節點,得到一個節點樹
5、要真正理解Vue的開發模式我們要理解它的render方法,這是我們深入理解Vue很需要掌握的一個知識
查看全部 -
webpack-dev-server: 專門用于開發環境,提高開發效率
使用方法:webpack-dev-server --config webpack.confog.js
npm中設置環境變量的包為:cross-env,為Mac和Windows兩個平臺統一設置環境變量的方式,用法:cross-env NODE_ENV=production或cross-env NODE_ENV=development,寫在script命令里面,啟動腳本的時候設置的環境變量都是存在process.env這個對象里面的,在代碼中可以通過這個對象取得設置的環境變量
設置html文件作為入口:需要安裝webpack插件:html-webpack-plugin
查看全部 -
//項目初始化
npm init
package.json寫命令運行和直接在命令行運行命令的區別:前者是本項目的環境,用的包也是項目里的包,而后者則是全局的環境的包。
webpack打包后的入口文件的代碼中:上面部分是webpack的固有代碼,用來處理模塊依賴的,下面的vue的源碼(需要把它分離出去)
查看全部 -
1、減少http請求(網絡優化)
2、壓縮靜態資源文件
3、使用瀏覽器的長緩存
這些都可以用webpack進行優化
webpack等工具都是在node環境里面運行的
查看全部 -
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
報這行錯是因為Vue-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'
}
]
}
}
查看全部 -
各個依賴包的版本
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
查看全部 -
前端的價值:
1、搭建前端工程:數據緩存、es6和less(可以加快開發效率)。
2、網絡優化:http(所有靜態資源都是通過http請求的)。
3、api定制。
4、node.js層。
? ? vue-cli生成的項目就是基于webpack的前端工程。
查看全部 -
謝謝老師查看全部
-
postCSS 是一個工具,它利用各種插件來對CSS文件進行處理。
autoprefixer 插件就是對CSS文件中添加瀏覽器兼容頭部(-webkit-)
查看全部 -
hash 和 chunkhash 區別,就是 hash 是給同批次打包的文件用的相同的hash數,而chunkhash是根據每個chunk塊單獨用一個hash值
查看全部 -
entry.vendor 屬性作用是提取第三方庫,會將指定的第三方庫打包成一個 vendor.js 而不會和業務代碼打包在一起? -- webpack 4 移除
查看全部 -
devtool 用于頁面調試的,源代碼使用ES6或者.vue文件,在頁面上是經過編譯后的,所以直接通過開發工具查看代碼跟源代碼是不一樣的,不利于調試。devtool 可以使用map文件對編譯后的代碼映射成源代碼,方便調試。 -- webpack 4 有 默認設置,可不寫
查看全部 -
development 加雙引號原因是為了讓這個值在JS中成為一個String類型,如果不加 相當于是一個變量名。
查看全部 -
webpack.DefinePlugin 插件作用為:
使得在JS中也能使用 NODE_ENV 環境變量,調用時用的就是屬性 'process.env'。
webpack在打包時會根據這個 環境變量 來選擇框架(vue/react)的版本。像vue在開發版本中會有很多錯誤提示之類的功能,而在生產版本中是沒有的。
查看全部
舉報