vue-cli3項目創建-配置-發布

首先需要安裝vue-cli3，并初始化一個項目官方教程
初始化項目需默認安裝router及vuex
源碼
項目預覽 登錄賬號密碼隨意填 項目接口用的是easy-mock的服務，偶爾會500造成接口請求報錯，如果遇到就等一會重新試下~~

效果預覽

效果預覽

一、Vue-cli3安裝成功并啟動

Vue-cli3安裝成功并啟動

二、刪除替換多余文件及代碼

1.修改文件--src/App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>
2.修改文件--src/router.js
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "Home",
      component: () => import("./views/Home.vue")
    }
  ]
});
3.修改文件--src/views/Home.vue
<template>
  <div>this is index home</div>
</template>
4.刪除文件--src/components/HelloWorld.vue和src/views/About.vue
5.啟動項目預覽
啟動項目預覽

三、優化vuex結構

1.刪除文件--src/store.js
2.新建文件--src/store/index.js
import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user";
import getters from "./getters";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
});

export default store;
3.新建文件--src/store/getters.js
const getters = {
  token: state => state.user.token
};
export default getters;
4.新建文件--src/store/modules/user.js
const user = {
  state: {},

  mutations: {},

  actions: {}
};
export default user;
5.main.js中引入vuex
import store from "./store/index";

四、配置及讀取開發生產環境

1.根目錄下新建文件--vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      args[0]["process.env"].BASE_URL = JSON.stringify(process.env.BASE_URL);
      return args;
    });
  }
};
2.根目錄下新建開發環境文件--.env.dev
NODE_ENV = "dev"
BASE_URL = "https://easy-mock.com/mock/5c513888582d704670f279b9/dev/api"
3.根目錄下新建生產環境文件--.env.prod
NODE_ENV = "prod"
BASE_URL = "https://easy-mock.com/mock/5c51391e582d704670f279bc/prod/api"
4.在package.json中指定mode
"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",
5.測試環境是否配置成功

在main.js中打印環境變量

console.log(process.env)

重啟項目

Ctrl + c
npm run serve

控制臺中看到dev的url說明配置成功

配置成

五、封裝axios添加登錄及用戶信息等權限

1.配置alias
//vue.config.js
const path = require("path");
module.exports = {
  configureWebpack: () => ({
    resolve: {
      alias: {
        "@": path.resolve("./src")
      }
    }
  }),
  chainWebpack: config => {
    config.plugin("define").tap(args => {
      args[0]["process.env"].BASE_URL = JSON.stringify(process.env.BASE_URL);
      return args;
    });
  }
};
2.安裝、封裝axios
npm install axios --save
3.新建文件--src/utils/request.js
import axios from "axios";
import store from "../store";

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

// request攔截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers["X-Token"] = store.getters.token;
    }
    if (config.method === "post") {
      config.data = config.params;
      config.params = "";
    }
    return config;
  },
  error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error);
  }
);

// response 攔截器
service.interceptors.response.use(
  response => {
    let { data, code, result, message } = response.data;
    if (code !== 200) {
      // if(status===500) 處理token過期等
      return Promise.resolve(false);
    } else {
      return { data, result, message };
    }
  },
  error => {
    console.log("err" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;
4.封裝localstorage 新建文件--src/utils/storage.js
const storage = {
  get(key) {
    return window.localStorage.getItem(key);
  },
  set(key, val) {
    window.localStorage.setItem(
      key,
      typeof val !== "string" ? JSON.stringify(val) : val
    );
  },
  del(key) {
    window.localStorage.removeItem(key);
  },
  cle() {
    window.localStorage.clear();
  }
};
export default storage;
5.添加路由訪問權限 新建文件--src/permission.js
import router from "./router";
import store from "./store";
import Storage from "@/utils/storage"; // 驗權

const whiteList = ["/login"]; // 不重定向白名單
router.beforeEach((to, from, next) => {
  if (Storage.get("token")) {
    if (to.path === "/login") {
      next({ path: "/" });
    } else {
      if (!store.getters.userInfo) {
        store.dispatch("getUserInfo");
        next();
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next();
    } else {
      next(`/login?redirect=${to.path}`); // 否則全部重定向到登錄頁
    }
  }
});
6.完善axios請求api 新建文件--src/api/userApi.js
import request from "@/utils/request";

const user = {
  //登錄
  login({ name, password }) {
    return request({
      url: "/login",
      method: "post",
      params: {
        name,
        password
      }
    });
  },
  //用戶信息
  getInfo({ token }) {
    return request({
      url: "/userInfo",
      method: "post",
      params: {
        token
      }
    });
  },
  //登出
  logOut({ token }) {
    return request({
      url: "/userLogout",
      method: "post",
      params: {
        token
      }
    });
  }
};
export default user;
7.vuex中getter調用及用戶信息登出操作

(1) 修改getter -- src/store/getters.js

//src/store/getters.js
const getters = {
  token: state => state.user.token,
  userInfo: state => state.user.userInfo
};
export default getters;

(2) 修改user module -- src/store/module/user.js

//src/store/module/user.js
import Storage from "@/utils/storage";
import userApi from "@/api/userApi";
const user = {
  state: {
    token: Storage.get("token") || null,
    userInfo: ""
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      Storage.set("token", token);
      state.token = token;
    },
    SET_USER_INFO: (state, userInfo) => {
      state.userInfo = userInfo;
    }
  },

  actions: {
    setToken({ commit }, token) {
      commit("SET_TOKEN", token);
    },
    //用戶信息
    getUserInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        userApi
          .getInfo({ token: state.token })
          .then(res => {
            if (res.result) {
              commit("SET_USER_INFO", res.result.userInfo);
            }
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    //登出
    logOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        userApi
          .logOut({ token: state.token })
          .then(() => {
            commit("SET_TOKEN", "");
            Storage.cle();
            resolve();
          })
          .catch(err => {
            reject(err);
          });
      });
    }
  }
};
export default user;
8.添加首頁及登錄頁

(1) 修改路由 -- src/router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/login",
      name: "Login",
      component: () => import("./views/Login.vue")
    },
    {
      path: "/",
      name: "Home",
      component: () => import("./views/Home.vue")
    }
  ]
});

(2) 添加登錄頁 新建文件 -- src/views/Login.vue

<template>
  <div>
    <div>test</div>
    <div>
      <div>
        <label for="name">用戶名</label>
        <input type="text" name="name" v-model="user.name">
      </div>
      <div>
        <label for="password">密碼</label>
        <input type="password" name="password" v-model="user.password">
      </div>
      <button @click="userLogin">登錄</button>
      <div>{{token}}</div>
    </div>
  </div>
</template>

<script>
import userApi from "@/api/userApi";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      user: {
        name: "",
        password: ""
      }
    };
  },
  computed: {
    ...mapGetters(["token"])
  },
  methods: {
    async userLogin() {
      let res = await userApi.login(this.user);
      if (res) {
        this.$store.dispatch("setToken", res.result.token);
        this.$router.push({ path: this.redirect || "/" });
      }
    }
  }
};
</script>

(3) 添加首頁 新建文件 -- src/views/Home.vue

<template>
  <div>
    <div>Home</div>
    <div>
      <div>
        <span>用戶名：</span>
        {{userInfo.name}}
      </div>
      <div>
        <span>權限：</span>
        {{userInfo.auth}}
      </div>
      <div>
        <span>賬戶創建時間：</span>
        {{userInfo.time}}
      </div>
    </div>
    <button @click="userLogout">退出登陸</button>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    userLogout() {
      this.$store.dispatch("logOut").then(() => {
        location.reload(); // 為了重新實例化vue-router對象 避免bug
      });
    }
  }
};
</script>
9.引入權限--最終效果預覽
//main.js
import "@/permission";

效果預覽

效果預覽

六、打包部署

npm run build

部署可選擇手動打包也可以用jenkins自動打包
jenkins自動打包教程
源碼
項目預覽 登錄賬號密碼隨意填 項目接口用的是easy-mock的服務，偶爾會500造成接口請求報錯，如果遇到就等一會重新試下~~

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • vue-cli3項目搭建配置以及性能優化 在之前的開發中主要用的是vue-cli2，最近空閑時間比較多，接下來有新...
    bayi_lzp閱讀 19,498評論 16贊 68
  • ## 框架和庫的區別?> 框架(framework):一套完整的軟件設計架構和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 2,961評論 1贊 4
  • 項目地址https://github.com/hongchh/timeline-x 一、成品展示 二、項目需求 添...
    前端楊肖閱讀 9,404評論 0贊 10
  • 從18年7月16號入職到現在已經5個月多了，入職之后就一直使用vue，來這邊溫習記錄下使用的步驟。在我的理解中vu...
    拖孩閱讀 1,944評論 2贊 12
  • 我們每個人都是一個系統，角色是我這個系統的表象之一，從角色引入來看我這個世界。 為什么要有系統思維？ 秘訣崇拜，如...
    EmmaJW閱讀 535評論 0贊 0