一、全局安装vue-cli
cnpm install @vue/cli
运行
npm run serve
项目能运行起来,代表着vue-cli项目搭建起来了
在src文件夹下创建utils和api、views文件夹,统一进行视图和接口管理,并在views下创建俩个页面indexPage和login,方便测试
接下来就是安装一些工具,如vue-router、axios、scss等
二、vue-router安装与配置
1)安装
cnpm install vue-router
在src下创建router文件夹,在此文件夹下创建index.js文件
2)在index.js中引入vue-router和vue
import vueRouter from 'vue-router'
import Vue from 'vue';
Vue.use(vueRouter)
// 引入组件
const routeList=[
{
path:'/',
component:()=>import('../views/indexPage/index.vue')
},
{
path:'/login',
component:()=>import('../views/login/index.vue')
}
];
const route = new vueRouter({
routes:routeList
})
route.beforeEach((to,from,next)=>{
// 路由前置守卫
next()
})
// 导出
export default route;
3)在项目入口文件main.js中引入路由并注册,更改App.vue文件
效果图,可以点击切换路由
三、axios请求封装
在utils文件夹新建request.js,主要是设置超时时间,响应头,
设置响应拦截器axios.interceptors.response.user(successFunction,errorFunction);
设置请求拦截器axios.interceptors.request.user(successFunction,errorFunction);
具体代码如下,
import axios from 'axios'
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest'
// 添加请求拦截器
axios.interceptors.request.use((req) => {
return req;
}, (error) => {
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use((response) => {
if (response.status == 200) {
//success
} else {
alert('请求错误')
return false
}
// 对响应数据做点什么
return response.data;
}, (error) => {
// 判断请求异常信息中是否含有超时timeout字符串
if(error.message.includes('timeout')){
//超时
return Promise.reject(error);
}
// 对响应错误做点什么
return Promise.reject(error);
});
export {
axios
};
调用方式
axios.post('url',data)
四、scss的安装
vue add style-resources-loader
点击回车,会在项目根目录下生成vue.config.js配置文件,代码如下
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
path.resolve(__dirname,'./src/styles/*.scss'),
]
}
}
}
安装scss和loader
cnpm install sass-loader@9.x
cnpm install sass
cnpm install node-sass@4.x
修改代码,设置lang=“scss"
scss引入成功效果图
在安装和配置scss的过程中,报了一些错误,主要时因为版本的问题