08 前台项目功能配置

162次阅读
没有评论

共计 1303 个字符,预计需要花费 4 分钟才能阅读完成。

一. axios 前后台交互

1. 安装 axios 模块

npm install -S axios  # -S 选项会将该模块加到 package.json 中去
npm install --save axios

2. 为项目配置全局 axios

  • 在入口 js 文件中书写
import axios from 'axios'  
// 导入安装的模块不用加相对路径

Vue.prototype.$axios = axios
// 向 Vue 的原型中放一个属性 (key) 为 $axios,值为:axios
// 注意 $axios 是你自己取的名字还可以叫 xxxx, 尽量不要重复
  • 使用
// 加入到 Vue 原型中以后之需要通过 this 就可以拿到 axios 发送请求了
methods:{handle(){
      // 发送请求获取数据
      this.$axios.get('/ajax/moreClassicList?').then(res =>{console.log(res.data) 
      })
    }
  }

3. 非全局配置使用

  • 在某个组件中直接导入 axios
// 名字自己取 $axios 或者 xxxx, 不要重名
import $axios from 'axios'
  • 然后直接使用你定义的名字来发送请求
methods:{handle(){
      // 发送请求获取数据
      $axios.get('/ajax/moreClassicList?',{}).then(res =>{console.log(res.data) 
      })
    }
  }

二. cookies 操作

1. 安装:前端项目目录下的终端

cnpm install vue-cookies

2. 配置:main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

三. element-ui 页面组件框架

1. 安装:前端项目目录下的终端

cnpm install element-ui

2. 配置:main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3. 使用

  • 在官方文档找到好看的组件,直接把 html,css,js 拷入自己项目即可

四. bootstrap 页面组件框架 (一般不用)

1. 安装:前端项目目录下的终端

cnpm install jquery
cnpm install bootstrap@3  # 3 指的是版本号

2. 配置 jquery:vue.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

3. 配置 bootstrap:main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
正文完
 
shawn
版权声明:本站原创文章,由 shawn 2023-06-16发表,共计1303字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)