一、vuex（個人理解是多個vue元件資料共享時使用）
vuex文件：
1、環境準備
（1）安裝依賴 npm install vuex --s**e
（2）安裝外掛程式 vue ui中安裝外掛程式vuex （會新建乙個store的資料夾，且main.js也會自動匯入store）
2、vuex的核心概念（state、getters、mutations、actions）
其實文件挺詳細的，下面主要是對vuex的4個核心概念比較常用的內容介紹（modules主要是大型專案的時候使用，就不說了）
（1）src/store資料夾下index.js檔案示例
import vue from 'vue'import vuex from 'vuex'vue.use(vuex)練習時的檔案內容export
default
newvuex.store(,
//定義全域性的計算屬性
getters: ,
//定義全域性的方法（不能定義非同步的方法），也只有這裡能修改state中的資料
mutations: ,
//定義全域性的非同步方法（比如請求介面獲取全域性資料的方法），只能通過操作mutations來修改state
actions: ,
modules:
})
import vue from 'vue'import vuex from 'vuex'import req from '../api/req.js'vue.use(vuex)view codeexport
default
newvuex.store(,
//定義全域性的計算屬性
getters:
},//
定義全域性的方法（不能定義非同步的方法），也只有這裡能修改state中的資料
mutations: ,
//修改state.projects的方法，給下面非同步方法用
updateprojects(state, data)
},//
定義全域性的非同步方法（比如請求介面獲取全域性資料的方法），只能通過操作mutations來修改state
actions:
},modules:
})
（2）vue元件中的使用的2種方式
<練習時的檔案內容h1>}
h1>
<
h1>a*b=}
h1>
<
button
@click
="$store.commit('addnum')"
>+
button
>
<
button
@click
="$store.dispatch('getprojects')"
>獲取專案
button
>
<view codetemplate
>
<
div>
<
h1>}
h1>
<
h1>}
h1>
<
h1>}
h1>
<
h1>a=}
h1>
<
h1>a=}
h1>
<
h1>a*b=}
h1>
<
h1>}
h1>
<
button
@click
="$store.commit('addnum')"
>+
button
>
<
br>
<
button
@click
="addnum"
>+
button
>
<
button
@click
="$store.dispatch('getprojects')"
>獲取專案
button
>
<
br>
<
button
@click
="getprojects"
>獲取專案
button
>
div>
template
>
<
script
>
import from
'vuex
'export
default
},methods: ,
components: {},
mounted() {},
computed: ,
//使用物件展開運算子將此物件混入到外部物件中
...mapstate([
'name',
'projects',
'a',
'b']),
...mapgetters(['c
']),
},created(){}
}script
>
<
style
scoped
>
style
>
二、編譯執行
1、專案根目錄下執行如下命令，會生成dist檔案
npm run build2、將上面的dist檔案拷出來放到乙個資料夾下（假設叫a資料夾），並在a下執行以下命令，用於初始化乙個包管理檔案，會生成package.json檔案
npm init -y3、在a下執行如下命令，安裝express，安裝完之後會生成package-lock.json檔案
npm install express -g
//5、使用node的方式啟動專案(如果關掉視窗就會關閉服務)引用express
const express = require('express')
//建立乙個應用程式物件
//指定靜態檔案路徑
//監聽埠
console.log("服務已啟動*****==");
})
6、使用pm2的方式啟動專案（專案名稱自己取）
關於pm2
安裝(要加-g，不然cmd識別不來pm2 命令)
npm install pm2 -g停止專案
pm2 stop 專案名稱刪除專案
pm2 delete 專案名稱檢視專案
pm2 list
vuex 編譯專案 俺咋能看懂公司前端專案？
我是一名剛步入社會的有志青年開發者。在校學了三年的後端開發，沒想到剛步入公司幹起了前端工作，華麗的轉變讓我有點猝不及防，誰讓我辣麼優秀！趁著頭髮茂密，讓我們步入正題！很有幸進入公司就參與了專案的開發，專案的前端是採用的vue和element框架，我剛拿到公司封裝之後的vue的腳手架翻了翻，瞬間感覺對...
Vue學習筆記 十一 Vuex
目錄vuex 是乙個為 vue 應用程式開發的狀態管理模式，它用集中式儲存來管理應用所有元件的狀態 簡單來說，它的作用就是把所有元件的共享狀態抽取出來，以乙個全域性單例的模式進行管理 我們可以把 vuex 理解成乙個 store，裡面儲存著所有元件共享的 state 資料 和 mutations 操...
忽略編譯 精讀《如何編譯前端專案與元件》
說到前端編譯方案，也就是如何打包專案，如何編譯元件，可選方案有很多，比如 如果你業務比較複雜，需要使用 webpack 做深度定製，那麼常見組合是 專案 webpack，元件 gulp。但專案與元件的編譯存在異同點，不同構建工具支援的生態也存在異同點。專案構建的目的主要在於發布 cdn，所以大家一般...