前端VUE框架學習總結與分享

開發環境

node v10.13.0 官網

編輯器： VS Code

插件

1. vutur ，爲 vue 文件提供代碼高亮
2. Indent-Rainbow ，讓縮進的區域以彩色色塊顯示

構建自己的vue模板

文件–> 首選項 --> 用戶代碼片段–>Vue.json

以下覆蓋替換

{
    "Print to console": {
            "prefix": "vue", // 在 Intellisense 中選擇代碼片段時將使用的前綴
            "body": [
                    "<template>",
                    "  <div>template</div>",
                    "</template>",
                    "",
                    "<script>",
                    "export default {",
                    "  name: '',",
                    "  data () {",
                    "    return {",
                    "",
                    "    }",
                    "  },",
                    "  mounted () {",
                    "",
                    "  },",
                    "  methods: {",
                    "",
                    "  }",
                    "}",
                    "</script>",
                    "",
                    "<style lang=\"less\" scoped>",
                    "",
                    "</style>",
                    "$2"
            ],
            "description": "Vue模板" // 代碼片段描述。
    }
}{
    "Print to console": {
            "prefix": "vue", // 在 Intellisense 中選擇代碼片段時將使用的前綴
            "body": [
                    "<template>",
                    "  <div>template</div>",
                    "</template>",
                    "",
                    "<script>",
                    "export default {",
                    "  name: '',",
                    "  data () {",
                    "    return {",
                    "",
                    "    }",
                    "  },",
                    "  mounted () {",
                    "",
                    "  },",
                    "  methods: {",
                    "",
                    "  }",
                    "}",
                    "</script>",
                    "",
                    "<style lang=\"less\" scoped>",
                    "",
                    "</style>",
                    "$2"
            ],
            "description": "Vue模板" // 代碼片段描述。
    }
}

使用：

新建vue文件 輸入vue選擇模板自動生成

項目介紹

Vue 官方文檔

assets
  		.less可以嵌套的寫 可以用變量
 		elemet ui公用ui庫進行樣式重置
 		reset 默認樣式重置

comments 組件 全局公共組件封裝使用

router	路由 組件切換-實現URL變換

utils codeconfig 錯誤碼封裝 
       filter過濾器
       requests請求返回攔截器 用不到登錄註冊
       
views  頁面相關 layout 外層公用部分頭尾
     
main.js 插件引入

package 	項目基礎介紹 版本號 啓動命令
      	 lint代碼檢查器 代碼規範 
      	 deoedndiance 運行時候依賴 /開發依賴

proxy   開發生效  ngix生成環境使用

store 全局 管理 

vuecli 

vuex 全局狀態管理

mounted頁面掛載完畢 在這個裏面獲取數據

其他

使用父組件傳到子組件 單項
子向組傳 事件發佈訂閱

v-if 初始false 不渲染
v-show css控制顯示隱藏

JavaScript通過HTMLDOM訪問整個文檔樹

DEMO

新建一個頁面

（1）src下新增vue頁面

（2）router下新增對應路由

（3） 修改對應跳轉路徑例如整個頁面head最上面部分

（4）src 下api下寫對應邏輯post get

// @/utils/codeConfig

export default {
  ERROR_CODE: { // 錯誤碼
    SUCCESS: '0' // 請求成功
  },
  AUDIT_STATUS_ENUM: { // 審覈狀態枚舉
    WAIT: '0', // 待審覈
    PASS: '1', // 審覈通過
    REFUSE: '2' // 審覈被拒
  }
}

//get post封裝好的工具

import axios from 'axios'
import { Message } from 'element-ui'
import codeConfig from '@/utils/codeConfig'

// 創建axios實例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 5000 // 請求超時時間
})

// request攔截器
service.interceptors.request.use(
  config => config,
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 攔截器
service.interceptors.response.use(
  response => {
    /**
     * errCode爲非'0'是拋錯 可結合自己業務進行修改
     */
    const res = response.data
    if (res.errCode === codeConfig.ERROR_CODE.SUCCESS) {
      return res
    } else {
      Message({
        message: res.msg,
        type: 'error',
        duration: 3 * 1000
      })
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: '網絡錯誤',
      type: 'error',
      duration: 1.5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

export function getSysUserListApi (data) {
  return request({
    url: '/user/list',
    method: 'post',
    data: { pageStart: 1, pageSize: 10 }
  })
}

export function chainSearchByName (data) {
  return request({
    url: '/Chain/chainName/' + data,
    method: 'GET'
  })
}

1.vue模板 script部分

2.跨域問題解決 bumo區塊鏈

參考 http://code-fe.lovem.fun/code/fishPond/fe-vue-project.html