在vue中引入less

首先你要确保vue环境搭建成功

第一步：

安装less依赖，npm install less less-loader --save-dev //安装到开发环境

--save-dev 与 --save 的区别

--save 安装包信息将加入到dependencies（生产阶段的依赖）

--save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它

npm install less less-loader --save-dev //安装到开发环境

npm install less less-loader --save //安装到生产环境

第二步：

修改webpack.base.conf.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

第三步：

安装配置成功！！直接在需要的地方使用即可

<style lang="less" scoped>
li {
  a {
    color: #42b983;
  }
}
</style>

vue中引入 Element

首先你要确保vue环境搭建成功

第一步：

安装Element， npm install element-ui --save //安装到生产环境

第二步：

引入 Element

在 main.js 中写入以下内容：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.use(ElementUI)

Vue.config.productionTip = false

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

第三步：

安装配置成功！！直接在需要的地方使用即可

    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

vue中引入 axios

第一步：

npm 安装axios，文件根目录下安装，指令如下

npm install axios --save-dev //安装到生产环境

第二步：

修改原型链，在main.js中引入axios，接着设置基础apiUrl、将axios改写为Vue的原型属性，

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import App from './App'
import router from './router'

Vue.use(ElementUI)

axios.defaults.baseURL = 'https://www.apiopen.top/'

Vue.prototype.$http = axios

Vue.config.productionTip = false

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

第三步：

在组件中使用，在每个组件的methods中调用$http命令完成数据请求

  mounted() {
    this.allList() 
  },
  methods: {
    allList() {
      let data = "盗墓笔记"
      this.$http.get(`/novelSearchApi?name=${data}`).then((res) => {
        console.log(res)
      })
    }
  }

vue中引入 moment

第一步：

npm 安装 moment，文件根目录下安装，指令如下

npm install moment -save //安装到生产环境

第二步：

修改原型链，在main.js中引入moment，接着将moment改写为Vue的原型属性，

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import moment from 'moment'
import App from './App'
import router from './router'

Vue.use(ElementUI)

axios.defaults.baseURL = 'https://www.apiopen.top/'

Vue.prototype.$http = axios

Vue.prototype.$moment = moment

Vue.config.productionTip = false

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

第三步：

在组件中使用moment转换数据

    let timeA = '2012-11-15'
    let time = this.$moment(timeA).format('YYYY-MM-DD HH:mm:ss')
    console.log(time)