新建vue脚手架 vue-element-cms步骤:
1.
vue create ……………(文件名)---这里取为vue-element-cms
2.
命令行工具进入这个文件夹,安装路由依赖包
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(有则无需安装)
②：配置axios
安装axios：
npm install axios -S
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 -D
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();
})