@vue/cli与rimraf 工具包的使用，打包时 calc 报错处理及vuex使用小示例
生活随笔
收集整理的這篇文章主要介紹了
@vue/cli与rimraf 工具包的使用，打包时 calc 报错处理及vuex使用小示例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
@vue/cli 實際使用心得
文章目錄
- @vue/cli 實際使用心得
- 小結(jié)
components 組件開發(fā)：可以將復(fù)雜功能細(xì)分成具體的小功能模塊簡化開發(fā)難度，同時也會導(dǎo)致嵌套層數(shù)很多的情況；例如最近在使用的 jeecg-boot 的前端項目中，嵌套層數(shù)二三十層都是很平常的
使用$attrs 簡化 n 層 props 父子傳參(如果參數(shù)太多，可以簡化書寫量)
即多層嵌套組件形式，中間層直接向后續(xù)層組件使用 v-bind:="$attrs" 傳遞數(shù)據(jù)，需要使用數(shù)據(jù)時，組件通過 props 接收傳遞的數(shù)據(jù)，如:
<!-- 1. 第一層 index.vue --> <demo-a :tes1="tes1" :tes2="tes2"/> <!-- 頂層使用 v-bind 綁定傳參 -> tes1, tes2 --> <!-- 2. 第二層 demoA.vue --> <demo-b v-bind="$attrs"/> <!-- 二層使用 v-bind="attrs" 綁定傳參(全部往后傳) --> <!-- 3. 第三層 demoB.vue 使用 v-bind="attrs" 綁定傳參(且使用 props: ["tes1"] 拿到 tes1 本層使用) --> <demo-c v-bind="$attrs"/> <!-- 4. 最后一層 demoC.vue --> <span>{{ tes2 }}</span> <!-- 使用 props: ["tes2"] 拿到 tes2 本層使用; 另外上層拿過的 tes1 在這層就不會在上層的 $attrs 中傳遞到這一層了，除非另外綁定 -->vue-cli-servise 不是內(nèi)部命令... 報錯，刪掉 node_modules 目錄，重新 npm install；再運行 npm run serve (也可以是你自行配置的其他腳本命令)本地運行。
借用第三方工具包 rimraf 可快速刪除 node_modules 目錄。
以包的形式包裝 rm -rf 命令，用來刪除文件和文件夾的，不管文件夾是否為空，都可刪除。
示例如下:
@vue/cli 4.0.5 運行 npm run build 即 vue-cli-service build 打包報錯
錯誤信息:
ERROR Error: CSS minification error: Parse error on line 1: ^ Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "expression", "math_expression", "function", "dimension", "number", got unexpected end of input. File: css/app.54a4222b.css Error: CSS minification error: Parse error on line 1: ^ Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "expression", "math_expression", "function", "dimension", "number", got unexpected end of input. File: css/app.54a4222b.cssat /home/gitlab-runner/builds/5hr9PyDj/0/xxxx-fontend/flight-vis/node_modules/_@intervolga_optimize-cssnano-plugin@1.0.6@@intervolga/optimize-cssnano-plugin/index.js:106:21at processTicksAndRejections (internal/process/task_queues.js:97:5)at async Promise.all (index 0) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! visualization_pro@0.1.0 build: `vue-cli-service build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the visualization_pro@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2020-06-05T06_50_53_865Z-debug.log分析得知是： calc 函數(shù) 沒有收到正確的值(項目中 css 樣式也只用到了它一個函數(shù))。
此處給出的解決方案是:
1. 通過找到使用此函數(shù)的位置，修改它本身
2. 通過 vue.config.js 配置（運行 npm run build 打包時解開注釋）:
cssnano 問題描述
postcss-calc v7.0.2
vuex 實際應(yīng)用心得
// mapState 輔助函數(shù) // 當(dāng)一個組件需要獲取多個狀態(tài)的時候，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余 // 可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性 import { mapState } from "vuex"; export default {// ...other codecomputed: mapState({count: state => state.count,// 傳字符串參數(shù) 'count' 等同于 `state => state.count`countAlias: 'count',// 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)countPlusLocalState (state) {return state.count + this.localCount}}), }// 映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時, 可以傳一個字符串?dāng)?shù)組實例:
// /src/store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({state: {eicasData: {playState: "play",eicasDataList: []},timer: null,index: 0,},mutations: {setPlayState(state, val) {// 變更 play 狀態(tài)state.eicasData.playState = val;},// mutations 中必須是同步函數(shù)，寫異步雖然能執(zhí)行，但是無法追蹤狀態(tài) -> 所以需要 actions// allToPlay(state, val) {// clearInterval(state.timer);// if (val === "play" && state.index < state.eicasData.eicasDataList.length) {// // 去更新索引值// state.timer = setInterval(() => {// state.index++; // 索引每秒自增// }, 1000);// } else {// clearInterval(state.timer);// }// },setStateValue(state, val) {state.eicasData.eicasDataList = val;}},actions: {setPlayState({ commit }, val) {commit("setPlayState", val);},allToPlay(store, val) {store.commit("clearStateInterval");let eicasData = store.state.eicasData,timer;if (val === "play" && store.state.index < eicasData.EGTLeftMaxValue.length) { // 去更新index值// 異步函數(shù)處理 index 自增timer = setInterval(() => {if (store.state.index >= eicasData.EGTLeftMaxValue.length - 1) {store.commit("clearStateInterval");store.commit('setPlayState', 'play'); // 播放 => 暫停狀態(tài)store.commit("setIndex", 0); // 回復(fù)初始進度return;}// 索引自增store.commit("indexAutoPlus");}, store.state.duration);if (timer) {store.commit("setTimer", timer);}} else {store.commit("clearStateInterval");}},setStateValue({ commit }, val) {commit("setStateValue", val);}},modules: {} }); // /src/components/FooterCom.vue import { mapState } from "vuex"; export default {methods: {play(){ // 播放按鈕點擊事件// 更改播放狀態(tài)if(this.playState === "pause"){ // 播放// 通過 commit 更改全局狀態(tài)值this.$store.commit("setPlayState", "play");this.$store.dispatch("allToPlay", "pause");}else { // 暫停this.$store.commit("setPlayState", "pause");this.$store.dispatch("allToPlay", "play"); // 更改}}},computed: {...mapState(['playState']),playClass() {return `icon-${this.playState}`;},storeEicasData(){return this.$store.state.eicasData;},playState() {return this.storeEicasData.playState;},} }小結(jié)
以上，是本人在實際使用中遇到的一些小問題及學(xué)習(xí)使用。作為自己的應(yīng)用筆記 >_<
總結(jié)
以上是生活随笔為你收集整理的@vue/cli与rimraf 工具包的使用，打包时 calc 报错处理及vuex使用小示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 验证Tensorflow-gpu下载成功
- 下一篇： vue打包报错 ERROR in sta