vue-cli4搭建vue项目，以及简单配置

一、全局安装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的过程中，报了一些错误，主要时因为版本的问题