vue-cli3项目创建-配置-发布 vue-cli3项目创建-配置-发布

首先需要安装vue-cli3，并初始化一个项目官方教程
初始化项目需默认安装router及vuex
源码
项目预览登录账号密码随意填项目接口用的是easy-mock的服务，偶尔会500造成接口请求报错，如果遇到就等一会重新试下~~

效果预览

文章图片
效果预览一、Vue-cli3安装成功并启动

文章图片
Vue-cli3安装成功并启动二、删除替换多余文件及代码 1.修改文件--src/App.vue

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

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 = https://www.it610.com/article/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

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

9.引入权限--最终效果预览