107.《vue搭建项目的步骤》

搭建vue脚手架的步骤

创建脚手架

一路回车

vue init webpack testpro

安装依赖

npm install axios element-ui less less-loader --save

创建目录结构

reset.css

/*清除页面元素默认样式*/
*{
    padding: 0;
    margin: 0;
}
/* body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl{
	margin: 0;
}
ol,ul,dd{
	padding: 0;
} */
input{
    outline: none;
}
ol,ul{
	/*取消列表元素前面的原点*/
    list-style: none; 
}
mark{
    background-color: none;
}
b,
strong{
    /*根据实际来清楚默认样式*/
    font-weight: normal;
}
i,
em{ 
    /*可根据实际来设置 */
    font-style: normal;
}
a{
	/*去掉a标签的下划线*/
    text-decoration: none;
    color: #333/* 颜色可根据实际设置 */
}

img{ /*容器有边框时的样式重置 */
    vertical-align: top;
	border: none;/*非标准的IE中，图片超链接中的图片默认会显示边框*/
}
button, input, textarea {
    background: none;
    border: none;
    font-family: inherit;
    vertical-align: middle;
}
    /* 左浮动 */
.fl{
    float: left;
}
    /* 右浮动 */
.fr{
    float: right;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
    *zoom: 1;
}

div,p,span,em,strong{
    line-height: 1;
} 

flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10   1920   1rem = 192   1920 / 24 =80   1rem = 80px
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();
  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document); 

route.js

route 记得在 main.js中 引入挂在

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router)

// 登录
const  Login = ()=> import("../page/login")
const  layout = ()=> import("../page/layout")
const  Cate = ()=> import("../page/cate")
const  Cuxiao = ()=> import("../page/cuxiao")

const route = new Router({
    routes:[
        {
            path:"/",
            component: Login,
            meta: {
              title: '管理员登录'
            }
        },
        {
            path:"/layout",
            component: layout,
            redirect:"/cuxiao", 
            children:[
                {
                    path:"/cate",
                    component: Cate, 
                },
                {
                    path:"/cuxiao",
                    component: Cuxiao, 
                } 
            ]
        },
       
    ]
})
export default route

element.js

import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';
import {
    Pagination,
    Dialog,
    Autocomplete,
    Dropdown,
    DropdownMenu,
    DropdownItem,
    Menu,
    Submenu,
    MenuItem,
    MenuItemGroup,
    Input,
    InputNumber,
    Radio,
    RadioGroup,
    RadioButton,
    Checkbox,
    CheckboxButton,
    CheckboxGroup,
    Switch,
    Select,
    Option,
    OptionGroup,
    Button,
    ButtonGroup,
    Table,
    TableColumn,
    DatePicker,
    TimeSelect,
    TimePicker,
    Popover,
    Tooltip,
    Breadcrumb,
    BreadcrumbItem,
    Form,
    FormItem,
    Tabs,
    TabPane,
    Tag,
    Tree,
    Alert,
    Slider,
    Icon,
    Row,
    Col,
    Upload,
    Progress,
    Spinner,
    Badge,
    Card,
    Rate,
    Steps,
    Step,
    Carousel,
    CarouselItem,
    Collapse,
    CollapseItem,
    Cascader,
    ColorPicker,
    Transfer,
    Container,
    Header,
    Aside,
    Main,
    Footer,
    Timeline,
    TimelineItem,
    Link,
    Divider,
    Image,
    Calendar,
    Backtop,
    PageHeader,
    CascaderPanel,
    Loading,
    MessageBox,
    Message,
    Notification
  } from 'element-ui';
  
  Vue.use(Pagination);
  Vue.use(Dialog);
  Vue.use(Autocomplete);
  Vue.use(Dropdown);
  Vue.use(DropdownMenu);
  Vue.use(DropdownItem);
  Vue.use(Menu);
  Vue.use(Submenu);
  Vue.use(MenuItem);
  Vue.use(MenuItemGroup);
  Vue.use(Input);
  Vue.use(InputNumber);
  Vue.use(Radio);
  Vue.use(RadioGroup);
  Vue.use(RadioButton);
  Vue.use(Checkbox);
  Vue.use(CheckboxButton);
  Vue.use(CheckboxGroup);
  Vue.use(Switch);
  Vue.use(Select);
  Vue.use(Option);
  Vue.use(OptionGroup);
  Vue.use(Button);
  Vue.use(ButtonGroup);
  Vue.use(Table);
  Vue.use(TableColumn);
  Vue.use(DatePicker);
  Vue.use(TimeSelect);
  Vue.use(TimePicker);
  Vue.use(Popover);
  Vue.use(Tooltip);
  Vue.use(Breadcrumb);
  Vue.use(BreadcrumbItem);
  Vue.use(Form);
  Vue.use(FormItem);
  Vue.use(Tabs);
  Vue.use(TabPane);
  Vue.use(Tag);
  Vue.use(Tree);
  Vue.use(Alert);
  Vue.use(Slider);
  Vue.use(Icon);
  Vue.use(Row);
  Vue.use(Col);
  Vue.use(Upload);
  Vue.use(Progress);
  Vue.use(Spinner);
  Vue.use(Badge);
  Vue.use(Card);
  Vue.use(Rate);
  Vue.use(Steps);
  Vue.use(Step);
  Vue.use(Carousel);
  Vue.use(CarouselItem);
  Vue.use(Collapse);
  Vue.use(CollapseItem);
  Vue.use(Cascader);
  Vue.use(ColorPicker);
  Vue.use(Transfer);
  Vue.use(Container);
  Vue.use(Header);
  Vue.use(Aside);
  Vue.use(Main);
  Vue.use(Footer);
  Vue.use(Timeline);
  Vue.use(TimelineItem);
  Vue.use(Link);
  Vue.use(Divider);
  Vue.use(Image);
  Vue.use(Calendar);
  Vue.use(Backtop);
  Vue.use(PageHeader);
  Vue.use(CascaderPanel); 
  Vue.use(Loading.directive);
// 成功提示
Vue.prototype.$success = function (message) {
  Message({
    type: 'success',
    message
  });
}
// 错误提示
Vue.prototype.$error = function (message) {
  Message({
    type: 'error',
    message
  });
}

http.js

import axios from 'axios' 
// 请求拦截器
axios.interceptors.request.use(function (req) { 
    // 添加自定义请求头
    const userInfo =  sessionStorage.getItem('userinfo') || '{}'  
    // // 将登录凭证通过自定义请求头发送给数据接口 
    req.headers.authorization = userInfo.token
    return req
  })
 
// 添加响应拦截器
axios.interceptors.response.use( res => { 
    return res.data
  }
)

axios.defaults.baseURL='http://localhost:3000'
export default axios