vue2.0笔记

955姜太根

已于 2023-03-28 14:27:38 修改

阅读量184

点赞数 1

文章标签： vue

于 2022-11-29 17:59:26 首次发布

本文链接：https://blog.csdn.net/XLLLRG/article/details/128102659

版权

一：vue2.0搭建项目

技术栈：vue2.0 、axios 、less、flexible、vuex

1.使用脚手架搭建vue项目（脚手架依赖于node.js和webpack）
npm install -g @vue/cli-init //安装脚手架2
vue init webpack projet-01 //脚手架2创建项目
npm install //安装node
npm run dev //运行

npm install -g @vue/cli //安装脚手架3
npm create project-02 //脚手架3创建项目
npm install //安装node
npm run serve //运行

二.使用router路由

在上面引入和在下面引入的区别：路由懒加载 -- 加快npm编译速度

上面是先引入，下面是进去这个页面在引入

//组件页面的懒加载--加快npm编译速度
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/pages/index/index' //在上面导入:先引入在进页面

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/works',
      name: 'works',
      component: () => import('@/pages/index/works') //使用路由懒加载：先进这个页面在引入
    },
    {
      path: '/find',
      name: 'find',
      component: () => import('@/pages/index/find')
    },
    {
      path: '/bag',
      name: 'bag',
      component: () => import('@/pages/index/bag')
    },
    {
      path: '/my',
      name: 'my',
      component: () => import('@/pages/index/my')
    },
   
  ]
})

三.使用less预处理器

1.安装less-loader:

npm install less-loader@5.0.0

2.安装less

npm install --save less

3.在style里面使用：

<template>
  <div class="content">
    <div class="content_name">哈哈哈</div>
  </div>
</template>

<script>
export default {
  name: 'sidebar',
  data () {
    return {
      
    }
  }
}
</script>

<style lang='less' scoped>
.content{
  height: 100vh;
  width: 10%;
  background-color: rgb(236, 243, 243);
  .content_name{
    color: red;
  }
}
</style>

四.使用axios和后端数据交互,二次封装axios请求(request.js)

a.安装axios:

cnpm install --save axios

b.在main.js中引入

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' 

// Vue.use(axios) //axios错误注册
// Vue.prototype.$http = axios //正确的注册

//移动端适配
import 'amfe-flexible'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  axios,  //注册axios
  components: { App },
  template: '<App/>'
})

c.封装request请求（对axios进行二次封装）：在工具包util文件夹里面创建一个request.js里面

axios二次封装request请求代码如下：

//1.axios导入
import axios from "axios";

//2.创建axios实例
const request = axios.create({
    baseURL: 'http://xxx', //请求域名
    // url: '/', //请求路径
    // method:POST, //请求方式：GET POST 5个
    // headers:{ //请求头
    //     'Content-Type': 'application/x-www-form-urlencoded',
    // },
    timeout: 5000 //请求时间
});

//3.请求拦截器（在发请求之前进行操作）
request.interceptors.request.use((config) => {
    //config是个配置对象，对象里面有一个属性很重要，headers请求头
    return config;
});

//4.响应拦截器（请求完成之后进行操作，一个是成功返回的函数，一个是失败的返回的函数）
request.interceptors.response.use((res) => {
    return res.date;
}, (erroe) => {
    return promise.reject(new Error('faile'))
});

//5.导出request请求
export default request;

d.在api下面的index.js文件中使用request请求

// 1.引入axios二次封装的request请求
import request from '../util/request'

//2.请求
export const login = (params) => { // 登录请求
    return request ({
        url:'/api/isLogin',
        // method:GET,
        data:params,
    })
}

e.在.vue中使用：

<template>
  <div @click="goLogin">
    首页
  </div>
</template>

<script>
import {login} from '../../api/api' //1.引入
export default {
  name: 'index',
  components:{

  },
  data () {
    return {
    }
  },
  created(){

  },
  methods:{
    goLogin(){
      login().then((res) => {  //使用
        console.log(res,'登录成功');
      })
      .catch(err => {
        console.log('登录失败！');
      })
    }
  },
}
</script>

<style scoped>

</style>

五.使用flexible适配移动端

1.安装插件flexible --- 适配移动端

a.安装插件
npm install lib-flexible -S
b.在main.js中引入

2.安装插件postcss-pxtorem --- 把px转化为rem

安装之后可以写px，不用直接写rem
npm install postcss-pxtorem --save // 默认最新版本

// 推荐下面这个 版本过高会出问题
npm install  postcss-pxtorem@5.1.1  --save

//出现报错运行以下指令
npm install --save amfe-flexible