cnpm install -g @vue/cli or npm install -g @vue/cli

cnpm install -g @vue/cli

vue --version

vue create vue-admin-project

|-- vue-admin-project 
 |-- .gitignore   //git項(xiàng)目忽視文件
 |-- babel.config.js  //babel 配置文件
 |-- package-lock.json  //記錄安裝包的具體版本號(hào)
 |-- package.json   //包的類型
 |-- README.md 
 |-- public    //項(xiàng)目打包后的目錄
 | |-- favicon.ico
 | |-- index.html
 |-- src     //項(xiàng)目開(kāi)發(fā)目錄
  |-- App.vue   //主入口文件
  |-- main.js   //主入口文件
  |-- router.js   //vue-router文件
  |-- store.js   //vuex
  |-- assets //靜態(tài)文件
   |-- logo.png
  |-- components  //組件存放目錄
  |-- HelloWorld.vue
  |-- views    //視圖目錄
  |-- About.vue
  |-- Home.vue

|-- vue-admin-project
 |-- .gitignore
 |-- babel.config.js
 |-- package-lock.json
 |-- package.json
 |-- README.md
 |-- public
  |-- favicon.ico
  |-- index.html
 |-- src
  |-- App.vue
  |-- main.js
  |-- assets
   |-- logo.png
  |-- components
   |-- HelloWorld.vue
  |-- router  //路由配置文件夾
   |-- router.js
  |-- store  //狀態(tài)管理文件夾 
   |-- store.js
  |-- views
   |-- About.vue
   |-- Home.vue

 NODE_ENV="development"    //開(kāi)發(fā)環(huán)境
 BASE_URL="http://localhost:3000/" //開(kāi)發(fā)環(huán)境接口地址

 NODE_ENV="production"    //生產(chǎn)環(huán)境
 BASE_URL="url" //生產(chǎn)環(huán)境的地址

 if(process.env.NODE_ENV='development'){
  console.log( process.env.BASE_URL) //http://localhost:3000/
 }else{
  console.log( process.env.BASE_URL) //url
 }

 let path=require('path');
 function resolve(dir){
  return path.join(__dirname,dir)
 }
 module.exports = {
  chainWebpack: config => {
   //設(shè)置別名
   config.resolve.alias
   .set('@',resolve('src'))
  },
  devServer: {
   open:true //打開(kāi)瀏覽器窗口
  },
  //定義scss全局變量
  css: {
   loaderOptions: {
    sass: {
    data: `@import "@/assets/scss/global.scss";`
    }
   }
   }
 }

vue add element

 import Vue from 'vue'
 import Router from 'vue-router'
 import store from '../store/store' //引入狀態(tài)管理
 import NProgress from 'nprogress' //引入進(jìn)度條組件 cnpm install nprogress --save
 import 'nprogress/nprogress.css' 
 Vue.use(Router)

 /**
 *@parma {String} name 文件夾名稱
 *@parma {String} component 視圖組件名稱
 */
 const getComponent = (name,component) => () => import(`@/views/${name}/${component}.vue`);

 const myRouter=new Router({
   routes: [
   {
    path: '/',
    redirect: '/home',
    component: getComponent('login','index')
   },
   {
    path: '/login',
    name: 'login',
    component: getComponent('login','index')
   },
   {
    path: '/',
    component:getComponent('layout','Layout'),
    children:[{
    path:'/home',
    name:'home',
    component: getComponent('home','index'),
    meta:{title:'首頁(yè)'}
    },
    {
    path:'/icon',
    component: getComponent('icons','index'),
    name:'icon',
    meta:{title:'自定義圖標(biāo)'}
    },
    {
    path:'/editor',
    component: getComponent('component','editor'),
    name:'editor',
    meta:{title:'富文本編譯器'}
    },
    {
    path:'/countTo',
    component: getComponent('component','countTo'),
    name:'countTo',
    meta:{title:'數(shù)字滾動(dòng)'}
    },
    {
    path:'/tree',
    component: getComponent('component','tree'),
    name:'tree',
    meta:{title:'自定義樹(shù)'}
    },
    {
    path:'/treeTable',
    component: getComponent('component','treeTable'),
    name:'treeTable',
    meta:{title:'表格樹(shù)'}
    },
    {
    path:'/treeSelect',
    component: getComponent('component','treeSelect'),
    name:'treeSelect',
    meta:{title:'下拉樹(shù)'}
    },
    {
    path:'/draglist',
    component: getComponent('draggable','draglist'),
    name:'draglist',
    meta:{title:'拖拽列表'}
    },
    {
    path:'/dragtable',
    component: getComponent('draggable','dragtable'),
    name:'dragtable',
    meta:{title:'拖拽表格'}
    },
    {
    path:'/cricle',
    component: getComponent('charts','cricle'),
    name:'cricle',
    meta:{title:'餅圖'}
    },
   ]
   }
   ]
  })

 //判斷是否存在token
 myRouter.beforeEach((to,from,next)=>{
  NProgress.start()
  if (to.path !== '/login' && !store.state.token) {
   next('/login')  //跳轉(zhuǎn)登錄
   NProgress.done() // 結(jié)束Progress
  }
  next()
 })
 myRouter.afterEach(() => {
  NProgress.done() // 結(jié)束Progress
 })

export default myRouter

 cnpm install axios -S

 import axios from "axios";
 import router from "../router/router";
 import {
  Loading 
 } from "element-ui";
 import {messages} from '../assets/js/common.js' //封裝的提示文件
 import store from '../store/store' //引入vuex

 axios.defaults.timeout = 60000;       //設(shè)置接口超時(shí)時(shí)間
 axios.defaults.baseURL = process.env.BASE_URL;   //根據(jù)環(huán)境設(shè)置基礎(chǔ)路徑
 axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded;charset=UTF-8"; //設(shè)置編碼
 let loading = null;          //初始化loading

 /*
 *請(qǐng)求前攔截
 *用于處理需要請(qǐng)求前的操作
 */
axios.interceptors.request.use(
 config => {
  loading = Loading.service({
   text: "正在加載中......",
   fullscreen: true
  });
  if (store.state.token) {
   config.headers["Authorization"] = "Bearer " + store.state.token;
  }
  return config;
 },
 error => {
  return Promise.reject(error);
 }
);

 /*
  *請(qǐng)求響應(yīng)攔截
  *用于處理數(shù)據(jù)返回后的操作
  */
 axios.interceptors.response.use(
  response => {
   return new Promise((resolve, reject) => {
    //請(qǐng)求成功后關(guān)閉加載框
    if (loading) {
     loading.close();
    }
    const res = response.data;
    if (res.err_code === 0) {
     resolve(res)
    } else{
     reject(res)
    }
   })
  },
  error => {
   console.log(error)
   //請(qǐng)求成功后關(guān)閉加載框
   if (loading) {
    loading.close();
   }
   //斷網(wǎng)處理或者請(qǐng)求超時(shí)
   if (!error.response) {
    //請(qǐng)求超時(shí)
    if (error.message.includes("timeout")) {
     console.log("超時(shí)了");
     messages("error", "請(qǐng)求超時(shí)，請(qǐng)檢查互聯(lián)網(wǎng)連接");
    } else {
     //斷網(wǎng)，可以展示斷網(wǎng)組件
     console.log("斷網(wǎng)了");
     messages("error", "請(qǐng)檢查網(wǎng)絡(luò)是否已連接");
    }
    return;
   }
   const status = error.response.status;
   switch (status) {
    case 500:
     messages("error", "服務(wù)器內(nèi)部錯(cuò)誤");
     break;
    case 404:
     messages(
      "error",
      "未找到遠(yuǎn)程服務(wù)器"
     );
     break;
    case 401:
     messages("warning", "用戶登陸過(guò)期，請(qǐng)重新登陸");
     localStorage.removeItem("token");
     setTimeout(() => {
      router.replace({
       path: "/login",
       query: {
        redirect: router.currentRoute.fullPath
       }
      });
     }, 1000);
     break;
    case 400:
     messages("error", "數(shù)據(jù)異常");
     break;
    default:
     messages("error", error.response.data.message);
   }
   return Promise.reject(error);
  }
 );

 /*
  *get方法，對(duì)應(yīng)get請(qǐng)求
  *@param {String} url [請(qǐng)求的url地址]
  *@param {Object} params [請(qǐng)求時(shí)候攜帶的參數(shù)]
  */
 export function get(url, params) {
  return new Promise((resolve, reject) => {
   axios
    .get(url, {
     params
    })
    .then(res => {
     resolve(res);
    })
    .catch(err => {
     reject(err);
    });
  });
 }
 /*
  *post方法，對(duì)應(yīng)post請(qǐng)求
  *@param {String} url [請(qǐng)求的url地址]
  *@param {Object} params [請(qǐng)求時(shí)候攜帶的參數(shù)]
  */
 export function post(url, params) {
  return new Promise((resolve, reject) => {
   axios
    .post(url, params)
    .then(res => {
     resolve(res);
    })
    .catch(err => {
     reject(err);
    });
  });
 }

import {get,post} from './request';

 //登陸
 export const login=(login)=>post('/api/post/user/login',login)
 //上傳
 export const upload=(upload)=>get('/api/get/upload',upload)

import { login } from "@/api/api.js"; //引入login

 /**
 * @oarma {Object} login 接口傳遞的參數(shù)
 */
 login(login)
 .then(res => {
  //成功之后要做的事情
 })
 .catch(err => {
  //出錯(cuò)時(shí)要做的事情
 });

 const state = {
  token: '',//權(quán)限驗(yàn)證
  tagsList: [], //打開(kāi)的標(biāo)簽頁(yè)個(gè)數(shù),
  isCollapse: false, //側(cè)邊導(dǎo)航是否折疊
 }
 export default state //導(dǎo)出

 const mutations = {
  //保存token
  COMMIT_TOKEN(state, object) {
   state.token = object.token;
  },
  //保存標(biāo)簽
  TAGES_LIST(state, arr) {
   state.tagsList = arr;
  },
  IS_COLLAPSE(state, bool) {
   state.isCollapse = bool;
  }
 }
 export default mutations

 const getters={
  //你要計(jì)算的屬性
 }
 export default getters

 const actions={
 
 }
 export default actions

npm install vuex-persistedstate --save

 import Vue from 'vue'
 import Vuex from 'vuex'
 import state from "./state";
 import mutations from "./mutations";
 import actions from "./actions";
 import getters from "./getters";
 //引入vuex 數(shù)據(jù)持久化插件
 import createPersistedState from "vuex-persistedstate"
 Vue.use(Vuex)
 
 export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState()]
 })

 <template>
  <div class="aside">
  <el-menu
   :default-active="onRoutes"
   class="el-menu-vertical-demo"
   @open="handleOpen"
   @close="handleClose"
   :collapse="isCollapse"
   active-text-color="#bdb7ff"
   router
  >
   <template v-for="item in items">
   <template v-if="item.subs">
    <el-submenu :index="item.index" :key="item.index">
    <template slot="title">
     <i :class="item.icon"></i>
     <span slot="title">{{ item.title }}</span>
    </template>
    <template v-for="subItem in item.subs">
     <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
     <template slot="title">{{ subItem.title }}</template>
     <el-menu-item
      v-for="(threeItem,i) in subItem.subs"
      :key="i"
      :index="threeItem.index"
     >{{ threeItem.title }}</el-menu-item>
     </el-submenu>
     <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
    </template>
    </el-submenu>
   </template>
   <template v-else>
    <el-menu-item :index="item.index" :key="item.index">
    <i :class="item.icon"></i>
    <span slot="title">{{ item.title }}</span>
    </el-menu-item>
   </template>
   </template>
  </el-menu>
  </div>
 </template>

 import { mapState } from "vuex";
 export default {
  data() {
  return {
  //配置目錄
   items: [
   {
    icon: "el-icon-edit-outline",
    index: "home",
    title: "系統(tǒng)首頁(yè)"
   },
   {
    icon: "el-icon-edit-outline",
    index: "icon",
    title: "自定義圖標(biāo)"
   },
   {
    icon: "el-icon-edit-outline",
    index: "component",
    title: "組件",
    subs: [
    {
     index: "editor",
     title: "富文本編譯器"
    },
    {
     index: "countTo",
     title: "數(shù)字滾動(dòng)"
    },
    {
     index: "trees",
     title: "樹(shù)形控件",
     subs: [
     {
      index: "tree",
      title: "自定義樹(shù)"
     },
     {
      index: "treeSelect",
      title: "下拉樹(shù)"
     }
     // ,{
     // index:'treeTable',
     // title:'表格樹(shù)',
     // }
     ]
    },
    ]
   },
   {
    icon: "el-icon-edit-outline",
    index: "draggable",
    title: "拖拽",
    subs: [
    {
     index: "draglist",
     title: "拖拽列表"
    },
    {
     index: "dragtable",
     title: "拖拽表格"
    }
    ]
   },
   {
    icon: "el-icon-edit-outline",
    index: "charts",
    title: "圖表",
    subs: [
    {
     index: "cricle",
     title: "餅圖"
    },
    ]
   },
   {
    icon: "el-icon-edit-outline",
    index: "7",
    title: "錯(cuò)誤處理",
    subs: [
    {
     index: "permission",
     title: "權(quán)限測(cè)試"
    },
    {
     index: "404",
     title: "404頁(yè)面"
    }
    ]
   },
   ]
  };
  },
  computed: {
  onRoutes() {
   return this.$route.path.replace("/", "");
  },
  ...mapState(["isCollapse"]) //從vuex里面獲取菜單是否折疊
  },
  methods: {
  //下拉展開(kāi)
  handleOpen(key, keyPath) {
   console.log(key, keyPath);
  },
  //下來(lái)關(guān)閉
  handleClose(key, keyPath) {
   console.log(key, keyPath);
  }
  }
 };

 <template>
  <div class="head-container clearfix">
  <div class="header-left">
   <showAside :toggle-click="toggleClick"/>
  </div>
  <div class="header-right">
   <div class="header-user-con">
   <!-- 全屏顯示 -->
   <div class="btn-fullscreen" @click="handleFullScreen">
    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
    <i class="el-icon-rank"></i>
    </el-tooltip>
   </div>
   <!-- 消息中心 -->
   <div class="btn-bell">
    <el-tooltip effect="dark" :content="message?`有${message}條未讀消息`:`消息中心`" placement="bottom">
    <router-link to="/tabs">
     <i class="el-icon-bell"></i>
     </router-link>
    </el-tooltip>
    <span class="btn-bell-badge" v-if="message"></span>
   </div>
   <!-- 用戶名下拉菜單 -->
   <el-dropdown class="avatar-container" trigger="click">
    <div class="avatar-wrapper">
    <img
     src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3266090804,66355162&fm=26&gp=0.jpg"
     class="user-avatar"
    >
    {{username }}<i class="el-icon-caret-bottom"/>
    </div>
    <el-dropdown-menu slot="dropdown" class="user-dropdown">
    <router-link class="inlineBlock" to="/">
     <el-dropdown-item>首頁(yè)</el-dropdown-item>
    </router-link>
    <el-dropdown-item>個(gè)人設(shè)置</el-dropdown-item>
    <el-dropdown-item divided>
     <span style="display:block;" @click="logout">退出登陸</span>
    </el-dropdown-item>
    </el-dropdown-menu>
   </el-dropdown>
   </div>
  </div>
  </div>
 </template>

 import showAside from "@/components/showAside.vue";//引入了一個(gè)側(cè)邊欄是否折疊的組件
 export default {
  // name:'header',
  components: {
  showAside
  },
  data() {
  return {
   fullscreen: false,
   name: "linxin",
   message: 2,
   username: "zyh"
  };
  },
  computed: {
  isCollapse: {
   get: function() {
   return this.$store.state.isCollapse;
   },
   set: function(newValue) {
   console.log(newValue);
   this.$store.commit("IS_COLLAPSE", newValue);//提交到vuex
   }
  }
  },
  methods: {
  toggleClick() {
   this.isCollapse = !this.isCollapse;
  },
  // 用戶名下拉菜單選擇事件
  logout(command) {
   this.$router.push("/login");
  },
  // 全屏事件
  handleFullScreen() {
   let element = document.documentElement;
   if (this.fullscreen) {
   if (document.exitFullscreen) {
    document.exitFullscreen();
   } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
   } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
   } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
   }
   } else {
   if (element.requestFullscreen) {
    element.requestFullscreen();
   } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
   } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
   } else if (element.msRequestFullscreen) {
    // IE11
    element.msRequestFullscreen();
   }
   }
   this.fullscreen = !this.fullscreen;
  }
  }
 };

 <template>
  <div class="clearfix">
  <div class="showAside pull-left" @click="toggleClick">
   <i class="el-icon-menu"></i>
  </div>
  </div>
 </template>

 export default {
  name: "showAside",
  props: {
  toggleClick: {
   type: Function,
   default: null
  }
  }
 };

<template>
  <!-- 打開(kāi)標(biāo)簽的容器 -->
  <div class="tags">
  <ul>
   <li
   class="tags-li"
   v-for="(item,index) in tagsList"
   :key="index"
   :class="{'active': isActive(item.path)}"
   >
   <router-link :to="item.path" class="tags-li-title">{{item.title}}</router-link>
   <span class="tags-li-icon" @click="closeTags(index)">
    <i class="el-icon-close"></i>
   </span>
   </li>
  </ul>
  <div class="tags-close-box">
   <el-dropdown @command="handleCommand">
   <el-button size="mini" type="primary">
    標(biāo)簽選項(xiàng)
    <i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
   <el-dropdown-menu size="small" slot="dropdown">
    <el-dropdown-item command="closeOther">關(guān)閉其他</el-dropdown-item>
    <!-- <el-dropdown-item command="all">關(guān)閉所有</el-dropdown-item> -->
   </el-dropdown-menu>
   </el-dropdown>
  </div>
  </div>
 </template>

 import { messages } from "@/assets/js/common.js";
 export default {
  created() {
  //判斷標(biāo)簽里面是否有值 有的話直接加載
  if (this.tagsList.length == 0) {
   this.setTags(this.$route);
  }
  },
  computed: {
  //computed 方法里面沒(méi)有set方法因此不能使用mapState,需要重新定義set方法
  tagsList: {
   get: function() {
   return this.$store.state.tagsList;
   },
   set: function(newValue) {
   this.$store.commit("TAGES_LIST", newValue);
   // this.$store.state.tagsList = newValue;
   }
  }
  },
  watch: {
  //監(jiān)聽(tīng)路由變化
  $route(newValue, oldValue) {
   this.setTags(newValue);
  }
  },
  methods: {
  //選中的高亮
  isActive(path) {
   return path === this.$route.fullPath;
  },
  handleCommand(command) {
   if (command == "closeOther") {
   // 關(guān)閉其他標(biāo)簽
   const curItem = this.tagsList.filter(item => {
    return item.path === this.$route.fullPath;
   });
   this.tagsList = curItem;
   }
  },
  //添加標(biāo)簽
  setTags(route) {
   let isIn = this.tagsList.some(item => {
   //判斷標(biāo)簽是否存在
   return item.path === route.fullPath;
   });
   //不存在
   if (!isIn) {
   // 判斷當(dāng)前的標(biāo)簽個(gè)數(shù)
   if (this.tagsList.length >= 10) {
    messages("warning", "當(dāng)標(biāo)簽大于10個(gè)，請(qǐng)關(guān)閉后再打開(kāi)");
   } else {
    this.tagsList.push({
    title: route.meta.title,
    path: route.fullPath,
    name: route.name
    });
    //存到vuex
    this.$store.commit("TAGES_LIST", this.tagsList);
   }
   }
  },
  closeTags(index) {
   console.log(this.tagsList.length);
   if (this.tagsList.length == 1) {
   messages("warning", "不可全都關(guān)閉");
   } else {
   //刪除當(dāng)前
   let tags = this.tagsList.splice(index, 1);
   this.$store.commit("TAGES_LIST", this.tagsList);
   }
  }
  }
 };

 <template>
  <div class="container">
   <tags />
   <div class="contents">
   <transition name="fade-transform" mode="out-in">
    <router-view></router-view>
   </transition>
   </div>
  </div>
 </template>

 import Tags from './Tags.vue'
 export default {
  components:{
   Tags
  }
 }

 <template>
  <div class="wrapper">
  <Aside class="aside-container"/>
  <div class="main-container" :class="isCollapse==true?'container_collapse':''">
   <Header/>
   <Main/>
  </div>
  </div>
 </template>

 import Aside from "./components/Aside.vue";
 import Header from "./components/Header.vue";
 import Main from "./components/Main.vue";
 import { mapState } from "vuex";
 export default {
  name: "Layout",
  components: {
  Aside,
  Header,
  Main
  },
  computed: {
  ...mapState(["isCollapse"])
  }
 };

|-- vue-admin-project
|-- .env
|-- .env.prod
|-- .env.test
|-- .gitignore
|-- babel.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- vue.config.js
|-- public
| |-- favicon.ico
| |-- index.html
|-- src
 |-- App.vue
 |-- element-variables.scss
 |-- main.js
 |-- api
 | |-- api.js
 | |-- request.js
 |-- assets
 | |-- logo.png
 | |-- css
 | | |-- normalize.css
 | | |-- public.css
 | |-- icon
 | | |-- demo.css
 | | |-- demo_index.html
 | | |-- iconfont.css
 | | |-- iconfont.eot
 | | |-- iconfont.js
 | | |-- iconfont.svg
 | | |-- iconfont.ttf
  | | |-- iconfont.woff
  | | |-- iconfont.woff2
  | |-- img
  | | |-- tou.jpg
  | |-- js
  | | |-- common.js
  | |-- scss
  |  |-- global.scss
  |-- components
  | |-- showAside.vue
  |-- plugins
  | |-- element.js
  |-- router
  | |-- router.js
  |-- store
  | |-- actions.js
  | |-- getters.js
  | |-- mutations.js
  | |-- state.js
  | |-- store.js
  |-- views
   |-- layout
   | |-- Layout.vue
   | |-- components
   |  |-- Aside.vue
   |  |-- Header.vue
   |  |-- Main.vue
   |  |-- Tags.vue