1. 程式人生 > 實用技巧 >第一個vue專案開發筆記

第一個vue專案開發筆記

  1. node環境安裝
    下載地址為:https://nodejs.org/en/

  2. 全域性安裝vue-cli:npm install --global vue-cli

  3. 進入你的專案目錄,建立一個基於 webpack 模板的新專案: vue init webpack 專案名
    說明:
        Vue build ==> 打包方式,回車即可;
        Install vue-router ==> 是否要安裝 vue-router,專案中肯定要使用到 所以Y 回車;
        Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車;

        Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車;
        Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車;

  4. npm install安裝依賴

  5. npm run dev,啟動專案

  6. 專案目錄
     1、build:構建指令碼目錄
        1)build.js ==> 生產環境構建指令碼;
        2)check-versions.js ==> 檢查npm,node.js版本;
        3)utils.js ==> 構建相關工具方法;
        4)vue-loader.conf.js ==> 配置了css載入器以及編譯css之後自動新增字首;

        5)webpack.base.conf.js ==> webpack基本配置;
        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:這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案:
        1)assets:資源目錄,放置一些圖片或者公共js、公共css。這裡的資源會被webpack構建;
        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:專案的說明文件

  7. 專案中使用了element ui:npm i element-ui -S

  8. 專案中,我將介面統一放置在一個介面檔案中,然後在模板中呼叫即可
    專案開發目錄
    介面:在這裡插入圖片描述
    應用了axios以及MD5加密,這裡有一個坑,注意在介面傳參時需要用formdata型別的引數,否則會提示報錯
    頁面呼叫介面:在這裡插入圖片描述

  9. 用到的一個子元件之間傳值的技術: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