Vue项目入门教程4-插件安装

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

安装less

• 安装插件：npm i less less-loader --save-dev

• 在src/assets/less目录下新建文件main.less。该文件用来编写公共的样式

*{
  margin: 0;
  padding: 0;
}

html, body, #app{
  height: 100%;
}

a{
  text-decoration: none;
}

• 在src/main.js文件下引入main.less

// less
import './assets/less/main.less'

按照fastclick

• 安装插件： npm i fastclick --save

• 修改src/main.js文件，添加fastclick设置

import FastClick from 'fastclick'
FastClick.attach(document.body)

安装vux

• 安装插件： npm i vux --save

• 修改src/main.js，添加vux

// ...
import { ToastPlugin, LoadingPlugin } from 'vux'
// ...
Vue.use(ToastPlugin)
Vue.use(LoadingPlugin)

主题覆盖

• 安装vux-loader：npm i vux-loader --save-dev

• 在src/assets/less/目录下新建vux的主题文件vux-theme.less，用来设置覆盖vux的默认主题样式

• 修改build/webpack.base.conf.js文件

将下列代码

module.exports = {
  // ...
}

修改为

const webpackConfig = {
  // ...
}

const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    'vux-ui',
    { name: 'less-theme', path: 'src/assets/less/vux-theme.less'}
  ]
})

安装axios

• 安装插件：npm i axios --save

• 不同环境下，接口地址一般不同。将接口地址的域名等部分放在配置文件中。
• 接口调用往往存在跨域问题。开发环境可以使用proxy。测试环境或者正式环境需要后端开发或者服务器运维配置跨域相关设置

线上环境配置

• 修改config/prod.env.js文件，添加配置urlApi: '"http://prod.com/api"',

开发环境配置

• 修改config/index.js文件，找到dev下的proxyTable,修改如下

proxyTable: {
  '/api': {    //将www.exaple.com印射为/api
    target: 'http://blog.local.com',  // 接口域名
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true,  //是否跨域
    // pathRewrite: {
    //   '^/api': '/api'   //需要rewrite的,
    // }              
  }
},

• 修改config/dev.env.js文件，添加配置urlApi: '"/api"',

• 在src/api/目录下新建文件request.js,作为axios的全局配置文件
  添加response拦截器，接口返回异常时进行拦截并提示

// src/api/request.js
import axios from 'axios'
import Vue from 'vue'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.urlApi,
  timeout: 6000
})

// response 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      Vue.$vux.toast.show({
        text: res.msg,
        type: 'text'
      })
      return Promise.reject(new Error('error'))
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Vue.$vux.toast.show({
      text: error.message,
      type: 'text'
    })
    return Promise.reject(error)
  }
)

export default service

安装vuex

• 安装插件：npm i vuex --save

• 在src/store/目录下新建文件index.js

// src/router/index.js
import Vue from 'vue'
import Vuex from 'vuex'

const state = {
  title: '喵巨人'
}

const getters = {}

const mutations = {
  setTitle(state, title) {
    state.title = title
  }
}

const actions = {}

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

• 修改src/main.js文件，添加store相关代码

// ...
import store from './store'
// ...
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})