一、搭建框架

搭建框架之前要安装三个依赖，最好是全局安装

1）npm -----这个安装完nodeJs就有了
2）webpack -----npm install webpack -g
3）vue-cli -----npm install vue-cli -g

2. 查看安装的依赖的版本

npm -v
webpack -v
vue -V (这里注意是大写的V)

vue init webpack projectName

根据提示选择自己所需要的
进入项目文件夹，执行npm install来安装项目所需要的依赖，然后执行npm run dev, 访问运行之后的网址，如果能弹出页面就代表项目构建完成
如果要安装element-ui,进入官网，查看安装命令npm i element-ui -S
在main.js中引入element-ui

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'

然后

Vue.use(ElementUI)
        new Vue({
            el: '#app',
            router,
            render: h => h(App)
        })

如果要验证是否引入成功，就再helloworld.vue中加上一些element-ui的标签看效果

安装页面样式所需要的文件

npm install sass-loader node-sass --dev

在页面写样式

<style lang="scss"></style>

二、配置路由访问页面

在src目录下新建三个文件 home.vue, login.vue, 404.vue
打开router文件夹下的index.js配置路由配置路由之前需要引入相关页面

import login from '@/components/views/login'
import home from '@/components/views/home'
import errorPage from '@/components/views/404'

然后在下面的routes中配置

 {
           path: '/',
           name: 'home',
           component: home
       },
       {
           path: '/login',
           name: 'login',
           component: login
       },
       {
           path: '/errorPage',
           name: 'errorPage',
           component: errorPage
       }

在home.vue添加三个按钮，触发对应的方法跳转路由跳转路由需要注意的地方
this.$router.push()相当于window.location.href()

this.$router.replace()直接替换history历史

this.$router.go()相当于 window.history.go(-1)

在页面跳转携带参数时，this.$router.push()有两种用法
第一种不带参数：（name为配置路由时的name,path为配置路由时的path）

        this.$router.push('/home')
        this.$router.push({name:'home'})
        this.$router.push({path:'/home'})

第二种带参数：
1）query传参（在地址栏传参）---相当于get请求

       this.$router.push({name:'home',query: {id:'1'}})
       this.$router.push({path:'/home',query: {id:'1'}})

2）params传参（在地址栏不显示参数）---相当于post请求

    this.$router.push({name:'home',params: {id:'1'}})

params传参只能通过name来传参，而且配置路由的时候需要在path添加参数

path: "/home/:id 或者 path: "/home:id"

三、安装asios

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，用来发送 http 请求。

安装命令

npm install axios

测试是否安装成功，通过按钮触发方法发一个get请求
这里为了测试方便，现在的请求url = "http://localhost:8080"

axios.get(url).the(res=>{
            请求成功的操作
        }).catch(err=>{
            请求失败的操作（对于请求失败的定义，是指请求响应状态码不再2xx以内的）
        })

一两个接口这么写，代码是非常臃肿的，所以可以封装axios
封装的步骤:
1）在src目录下新建一个文件夹fetch,创建fetch.js文件，

先引入axios

import axios from 'axios'

3）然后创建实例

const service = axios.create({
                    baseUrl: '',        //空代表项目的根路径
                    timeout: 20000      //请求接口的超时时间
                })

4）最后导出创建的axios实例service

export default service

5）在src目录下创建一个目录api,创建api.js
6）引入刚才创建的axios实例

import fetch from '@/fetch/fetch'

7）写一个get请求方法

export function login(){
return fecth({
                url: '/',
                method: 'get'
                    })
                }

8）在需要用到的页面导入

import {login} from '@/api/api'

9）在触发请求的方法中使用

login().then(res=>{
请求成功的步骤
        }).catch(err=>{
请求失败的步骤
                })

一般在请求的时候，会对请求进行拦截和请求成功的数据拦截，这样就可以对请求配置拦截器
1）打开fetch.js文件，在export default service 上面新增配置

            //对请求进行拦截，一般是在请求上加上一个请求头token
            axios.interceptors.request.use(function (config) {
                // 在发送请求之前做些什么
                return config;
            }, function (error) {
                // 对请求错误做些什么
                return Promise.reject(error);
            });

            
            
            //对请求返回的数据进行拦截，一般是验证是否有权限，或者请求响应失败的状态码
            axios.interceptors.response.use(function (response) {
                    // 对响应数据做点什么
                    return response;
              }, function (error) {
                    // 对响应错误做点什么
                    return Promise.reject(error);
              })

element-ui安装使用

element-ui安装使用

一、搭建框架

二、配置路由访问页面

三、安装asios