-
一、npm i postcss-loader autoprefixer babel-loader babel-core
二、postcss幫我們后處理css，autoprefixer：需要為瀏覽器加前綴屬性的， babel：演示如何使用render，vue可以寫jsx代碼
三、npm i babel-preset-env babel-plugin-transform-vue-jsx
四、npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
查看全部 -
一、vue是一個組件化框架
二、react有jsx，html通過render方法動態(tài)生成，每次有數(shù)據(jù)變化，都會執(zhí)行render方法，生成Html.
三、重點：數(shù)據(jù)綁定，vue文件開發(fā)方式，render
四、vue的api重點：
（1）生命周期方法（跟react學(xué)習(xí)的）
（2）computed，是一個reactive框架（聲明好的數(shù)據(jù)，一旦改變，就會影響依賴這些數(shù)據(jù)的地方，如template依賴于data里的數(shù)據(jù)，data改變時，template改變）。
查看全部 -
very good!
查看全部 -
學(xué)習(xí)自動化的概念、自動化測試金字塔，了解Android 測試框架的發(fā)展...
查看全部 -
查看全部
-
vue中$emit觸發(fā)事件，父組件通過@監(jiān)聽事件，實現(xiàn)父子組件通信
findIndex() 方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素位置。
findIndex() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
當(dāng)數(shù)組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調(diào)用執(zhí)行函數(shù)。
如果沒有符合條件的元素返回 -1
注意: findIndex() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。
注意: findIndex() 并沒有改變數(shù)組的原始值。
查看全部 -
index.js
查看全部 -
1.scoped ，樣式只在這個組件內(nèi)有效
查看全部 -
postcss用來后處理CSS
查看全部 -
一、安裝dev-server靜態(tài)資源包：npm i webpack-dev-server
webpack通過build啟動webpack.config.js,webpack就會幫我們?nèi)ゴ虬黬s代碼
二、安裝cross-env包: npm i cross-env
不同平臺上設(shè)置的環(huán)境變量是不一樣的，mac上NODE_ENV=production就能讀取環(huán)境變量
windows要用set，因為不想不同平臺寫不同的命令，所以用cross-env，寫cross-env?NODE_ENV=production 這樣不同平臺都可以執(zhí)行同一個腳本。
啟動腳本時設(shè)置的環(huán)境變量都是存放在process.env這個變量中的。
三、cofig.devSever中的host，如果是'0.0.0.0'，就能通過localhost,127.0.0,ip訪問。
四、錯誤信息不覆蓋在頁面，輸出在控制臺（這樣習(xí)慣多了）
errorOverlay:?false,?//?false:錯誤不顯示在覆蓋層
overlay: ?/'ov?l?i/：覆蓋圖，覆蓋物。
五、npm i html-webpack-plugin
查看全部 -
HTML作為入口，讓HTML自動包含js? npm i html-webpack-plugin
查看全部 -
npm i webpack-dev-server? //安裝webpack-dev-server
"dev" : "webpack -dev -server --config webpack.config.js
npm i cross-env 兼容不同平臺設(shè)置變量：“build”:"cross-env NODE_ENV=production webpack? --config webpack.config.js"?
在webpack.config.js中 使用const isDev = process.env.NODE_ENV === "development"
if(isDev){
????config.devtool ="#cheap-module-eval-source-map" ? 幫助在頁面調(diào)試，定位到源代碼
????config.devServer{
????port:8000,
????host:'0,0,0,0',
????overlay:{
????error:true ? ? ? ? ? ? ? ? ----顯示錯誤，方便定位錯誤
}，
????open: true? -----------自動打開瀏覽器
????hot:true ? ?? -------------開啟熱更新
}
config.plugins.push(
????new webpack.HotModuleReplacementPlugin() ? ? ?? -----實現(xiàn)熱更新的插件
????new webpack.NoEmitOnErrorsPlugin() ? ------減少一些不需要信息展示的問題
);
}
module.exports = config;
npm -i html-webpack-plugin? --webpack的插件，加載html
?plugins:[????????new?webpack.DefinePlugin({? ------用來定義全局調(diào)用的JS都能訪問的變量 ? ? ? ??'process.env':{????????????????NODE_ENV?:?isDev??'"development"'?:?'"production"'????????????}????????}),????????new?HTMLPlugin()????]查看全部 -
一、.vue用loader,.css用use，style-loader把css寫到html中，css-loader便于webpack處理css文件.
二、loader是可以配置一些選項的。use:['style-loader','css-loader']
三、url-loader可以把圖片轉(zhuǎn)換成base-64代碼，編寫在js中，options['limit:1024']，如果圖片大小小于1024，就編譯成base-64。url-loader 封裝了file-loader,實現(xiàn)對文件操作
四、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項目
1、npm init：初始化npm 項目。
2、npm i webpack vue vue-loader (i代表install)
3、npm i css-loader vue-template-compiler(2安裝完后，提示需要安裝的依賴，3完成安裝)
三、組件不能直接掛載到html中。需要入口文件引入
四、render接收h參數(shù)，這個參數(shù)實際上是vue里的creatApp，通過它把app掛載到html中，render是渲染內(nèi)容，如果是要掛載，還要用$mount.
五、package.json里的scripts加上"build": "webpack --config webpack.config.js"，這樣才會調(diào)用項目里的webpack，如果是輸命令，會調(diào)用全局的webpack。
六、npm run build ,報錯：you may need an appropriate loader to hand this file type.
需要為.vue文件類型聲明一個loader(vue-loader).
????module:{
????????????rule:[{
????????????????test:/.vue$/,
????????????????loader: 'vue-loader'
}]
????}
webpack原生只支持js.
七、把零碎的js 打包成一個，可以減少http請求。
查看全部 -
package.json里面定義的scripts 可以直接跑。?
查看全部
舉報