vuerouter

vue出一個電商網站

vue cli環境

npm install -g vue-cli

vue init webpack 專案名

npm install

Router配置

npm install vue-router --save

啟用vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

main.js 進入點
src/router/index.js 路由配置檔案
vue component/pages 分頁內容

import Home from '@/components/HelloWorld'
//自定義元件

載入axios

npm install --save axios vue-axios

載入axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

下載連結

在同一個路徑載入兩個頁面文件

1.App.vue新增：

<router-view name="menu"></router-view>

2.新增一個menu.vue(同page.vue)，載入navs的內容
3.把page.vue中的bottom刪除
4.在index.js中匯入menu.vue，且更改page.vue的路由配置

帶入自己的api

${process.env.APIPATH}/api/${process.env.CUSTOMPATH}/products

dev為開發中版本，prod為完成的版本

加入Bootstrap

npm install bootstrap --save

npm install node-sass sass-loader --save

目前版本有些問題，建議先下載下列版本
npm install node-sass@4.14.1
npm install --save-d sass-loader@7.1.0

須在style標籤中加入 lang=scss

使用cookie記錄登入資訊

sigin ->admin/sigin
+ axios.defaults.withCredentials = true;

全局守衛（避免顧客誤啟後臺網頁）

main.js加入：
router.beforeEach((to, from, next) => {
  next()//防止全局守衛阻擋
})
在指定的路由加入：
 meta: { requiresAuth: true }

參考網頁

避免顧客誤啟開發者未設立的路由

index.js ->
{
    path:'*',
    redirect:'login' //需返回的頁面
}

登入的跨域存取問題

login.vue:
if(response.data.success){
  const token = response.data.token;
  const expired = response.data.expired;
  console.log(token, expired);
  document.cookie = `hexToken=${token};expires=${new Date(expired)};`;
    vm.$router.push('/backboard/products') //登入成功效果
   }
        
  
 dashboard.vue加入created:
  created(){
        const token = document.cookie.replace(/(?:(?:^|.*;\s*)hexToken\s*=\s*([^;]*).*$)|^.*$/, '$1');
        this.$http.defaults.headers.common.Authorization = `${token}`;
    }

cookie相關文章

安裝jquery,popper

npm install --save jquery popper.js

isLoading 版本有問題 需新增一個postcss.config.js的資料夾

module.exports = {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      // to edit target browsers: use "browserslist" field in package.json
      "autoprefixer": {}
    }
  }

Vuex

data → state (管理資料)

methods → action (處理非同步＆取得遠端資料)

computed → getter (資料在放上畫面之前的過濾)

         → mutations (處理同步&改變資料內容)