搭建vue项目的步骤

新建vue脚手架 vue-element-cms步骤:

　　1. vue create ……………(文件名)—这里取为vue-element-cms

　　　　命令行工具进入这个文件夹,安装路由依赖包

　　　　npm install vue-router -S

　　　　在package.json里查看是否成功安装配置

　　　　在src文件夹里创建一个router.js文件，里面配置路由，配置如下

　　　　然后在main.js入口文件引入

　　3. 装Vuex状态管理和配置好axios

　　 ①：安装vuex

　　　　 npm install vuex -S

　　　　 src创建一个文件夹store，里面创建index.js

　　　　　　入口文件main.js导入

　　　　　安装dev-tools(有则无需安装)

　 https://github.com/arcliang/Vue-Devtools-

　　②：配置axios

　　　　 src中创建utils文件夹 -> 创建fetch.js，内容如下：

import axios from ‘axios’
 
let baseURL=’http://localhost:8080′
const instance = axios.create({
    baseURL: baseURL,
    timeout: 7000,
    headers: {}
})
 
//请求拦截器：在请求被发送出去之前，做一些验证工作。
instance.interceptors.request.use(function (config) {
    //加token  —– token作用：是用户鉴权
    config.headers.Authorization=localStorage.getItem(‘token’)|| ”
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
  //响应拦截器：在响应到达之前，先进行数据过滤
instance.interceptors.response.use(function (response) {
    if(response.status === 200){
        if(response.data && response.data.msg){
            return response.data.data;
        }else{
            //此处通常会用UI框架做一个弹框.
            alert(‘网络异常，请稍后再试’)
        }
    }
  }, function (error) {
    return Promise.reject(error);
  });
 
  export default instance

　　　　 utils文件夹中 -> 创建api.js文件，内容如下

import axios from ‘./fetch’    //引入axios实例
 
//export function ……(){
//  return axios({
//      xxx:xxx,
//      xxx:xxx,
//      ………………
//  })
//}
 
export default {
//    函数名1,
//    函数名2,
//    ………………
}

　　　　　将该实例方法挂载在Vue原型链上，入口文件main.js中

import http from ‘./utils/api’
Vue.prototype.$http = http;

　　4. 配置vue.config.js

　　　　　在根目录(不是src)创建一个vue.config.js文件(vue会自动读取这个文件)

module.exports={
    devServer:{
        port:’8090′
    }
}

　　5. Sass的安装

　　　　　 npm install sass-loader -D(仅开发需要，不用-S)

　　　　　在使用时找到对应的.vue文件里的style，加上lang=’scss’

　　6. 组件库的安装

　　　　　 vant,elementUI等等，这里使用element UI

　　　　　 npm install element-ui -S 安装

　　*7. rem布局文件

　　　　　如果需要，在public文件夹里创建一个rem.js的文件，里面写上代码，并在public里的index.html里引入

//作用：重置html的font-size
function resetRootFZ(){
    var oHtml=document.querySelector(‘html’);
    var w=oHtml.getBoundingClientRect().width;
    oHtml.style.fontSize=w/10+’px’;
}
 
resetRootFZ();
 
//当window窗口尺寸发生变化时，重新设置字体的大小
window.addEventListener(‘resize’,function(){
    resetRootFZ();
})