第一個vue專案開發筆記
-
node環境安裝
下載地址為:https://nodejs.org/en/ -
全域性安裝vue-cli:npm install --global vue-cli
-
進入你的專案目錄,建立一個基於 webpack 模板的新專案: vue init webpack 專案名
說明:
Vue build ==> 打包方式,回車即可;
Install vue-router ==> 是否要安裝 vue-router,專案中肯定要使用到 所以Y 回車;
Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車;
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車; -
npm install安裝依賴
-
npm run dev,啟動專案
-
1、build:構建指令碼目錄
1)build.js ==> 生產環境構建指令碼;
2)check-versions.js ==> 檢查npm,node.js版本;
3)utils.js ==> 構建相關工具方法;
4)vue-loader.conf.js ==> 配置了css載入器以及編譯css之後自動新增字首;
6)webpack.dev.conf.js ==> webpack開發環境配置;
7)webpack.prod.conf.js ==> webpack生產環境配置;
2、config:專案配置
1)dev.env.js ==> 開發環境變數;
2)index.js ==> 專案配置檔案;
3)prod.env.js ==> 生產環境變數;
3、node_modules:npm 載入的專案依賴模組
4、src:這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案:
2)components:元件目錄,我們寫的元件就放在這個目錄裡面;
3)router:前端路由,我們需要配置的路由路徑寫在index.js裡面;
4)App.vue:根元件;
5)main.js:入口js檔案;
5、static:靜態資源目錄,如圖片、字型等。不會被webpack構建
6、index.html:首頁入口檔案,可以新增一些 meta 資訊等
7、package.json:npm包配置檔案,定義了專案的npm指令碼,依賴包等資訊(各種依賴之間可能會有衝突,所以在配置好一次後這個檔案可以在其他專案複用,只需貼上覆蓋一下,重新安裝依賴)
8、README.md:專案的說明文件 -
專案中使用了element ui:npm i element-ui -S
-
專案中,我將介面統一放置在一個介面檔案中,然後在模板中呼叫即可
介面:
應用了axios以及MD5加密,這裡有一個坑,注意在介面傳參時需要用formdata型別的引數,否則會提示報錯
頁面呼叫介面: -
用到的一個子元件之間傳值的技術:bus
新建一個空的js檔案
然後通過bus.$emit 傳值
然後通過bus.$on 接收引數
以此來實現子元件之間的傳值;
10.匯出Excel(需安裝元件)
引入安裝的元件;
const tHeader = [''] //表頭 const filterVal = [''] //對應的欄位 const data = [] //匯出的資料
formatJson是一個對匯出資料進行處理的一個方法
11.最後再就是用了一些element ui裡面的功能
https://element.eleme.cn/#/zh-CN/component/installation