vue项目创建后的操作

一、main（入口文件）文件配置

1、创建项目成功后，又一个main入口文件，在main中导入需要的文件：

import Vue from "vue";

import App from "./App.vue";

import router from "./router";

import "./plugins/element.js";

// 导入字体图标

import "./assets/fonts/iconfont.css";

// 导入全局样式表

import "./assets/css/global.css";

import axios from "axios";

2、配置根域名以及请求头

axios.defaults.baseURL = "https://www.liulongbin.top:8888/api/private/v1";

// axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/";

// 配置请求头 请求头

axios.interceptors.request.use(config => {

  config.headers.Authorization = sessionStorage.getItem("token");

  return config;

});

axios.interceptors.response.use(config => {

  config.headers.Authorization = sessionStorage.getItem("token");

  return config;

});

//给axios起一个别名用于区分

Vue.prototype.$axios = axios;

//阻止启动生产消息

Vue.config.productionTip = false;

二、路由配置（router）

1、导入所需的路由文件

import Vue from "vue";

import Router from "vue-router";

下面是页面文件

import Login from "../components/Login.vue";

转化成路由懒加载的形式是：

const Login = () =>

  import(/* webpackChunkName: "Login" */ "../components/Login.vue");

2、导入的路由文件添加到路由当中

const router = new Router({

  routes: [

//下面是路由重定向 为空转到登录页

    { path: "/", redirect: "/login" },

    { path: "/login", component: Login },

    {

      path: "/home",

      component: Home,

      redirect: "/welcome",

      children: [

        { path: "/welcome", component: Welcome },

        { path: "/users", component: Users },

        { path: "/rights", component: Rights },

        { path: "/roles", component: Roles },

        { path: "/categories", component: Categories },

        { path: "/params", component: Params }

      ]

    }

  ]

});

3、可以设置路由的全局守卫拦截看本地有没有存储token没有则不给访问其他页面跳转到登录页面

router.beforeEach((to, from, next) => {

  if (sessionStorage.getItem("token")) {

    next();

  } else {

    if (to.path == "/login") {

      next();

    } else {

      next("/login");

    }

  }

});

最后导出export default router;

三、我们写项目时需要用到ui组件库，单独建立一个文件夹配置，这里用element,创建一个文件夹plugins,在里面创建lement.js

import Vue from "vue";//d导入vue

//按需导入element组件

mport {

  Button,

  Form,

  FormItem,

} from "element-ui";

然后use一下

Vue.use(Button);

Vue.use(Form);

Vue.use(FormItem);

或者是   根据element文档引入

Vue.prototype.$loading = Loading.service

Vue.prototype.$msgbox = MessageBox

 

四、创建一个文件夹assets 存放静态文件 css 图标字体      创建一个文件夹components存放vue文件  当然了这个名字根据个人喜好或者公司规定起名 我只是说一个大致的概念。