vue + vuex + axios+less等常用的插件运用

 

一、准备工作

1.安装node.js    http://nodejs.cn/download/

安装完毕后，输入node -v，如果出现版本信息即表示安装成功。

3：输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装淘宝镜像安装相关依赖

4：安装vue-cli脚手架构建工具，输入命令 npm install -g vue-cli，安装完成即可。

二、用vue-cli创建项目

 

安装vuex-persistedstate解决刷新后数据消失的问题

npm install --save vuex-persistedstate

引入和配置在store文件夹下的index.js中

import createPersistedState from 'vuex-persistedstate';
export default new Vuex.Store({
   plugins: [createPersistedState()],
})

或者想存到sessionStorage中

import createPersistedState from 'vuex-persistedstate';
export default new Vuex.Store({
   plugins: [createPersistedState({
    storage: window.sessionStorage,
  })],
})

三、安装网络请求axios依赖包

npm install --save axios

接下来在main.js中配置axios

Vue.prototype.$http = axios
axios.defaults.baseURL =  '此处是接口地址';
axios.interceptors.request.use(function (config) { // 配置发送请求的信息
    // store.dispatch('showLoading')
    return config
}, function (error) {

    return Promise.reject(error)
})

axios.interceptors.response.use(function (response) { // 配置请求回来的信息
    return response
}, function (error) {
    return Promise.reject(error)
})

axios请求格式 

httpAxios：function（）{
        this.$http.get('/aaa',
            {
              params: {
                token: this.token //参数
              }
            })
            .then((res) => {
                //成功时
              
              }, (response) => {


              });
}

四、安装vuex 

npm install vuex --save

安装完成后可以在package.json文件的dependencies中看到 刚才的安装的vuex

配置vuex

在src文件夹下新建一个名叫store的文件夹，并在文件夹下新建index.js文件。因为index.js是基于vue的，所以需要引入vue和vuex

五、安装less

npm install --save-dev less less-loader

在webpack.base.conf.js中的rules里配置

 {
        test: /\.less$/,
        loader: ['style-loader','css-loader','less-loader']
 }

 

<template>
  <div class="hello">
    hello
    <div class="box">box</div>
  </div>
</template>

 

引入css

<style lang="less" rel="stylesheet/less" src="./index.less"></style>

.hello{
  width: 100%;
  height: 100px;
  background-color: red;
  font-size: 50px;
  .box{
    background-color: yellow;
    width: 100%;
    height: 50px;
  }
}

在引入css时一定要在style标签里加上lang='less'属性(这里我理解为声明我是less就应该用less的方式执行)

例：

加lang=‘less’时

不加lang=‘less’时 

这时我们会发现它只走了类名为hello的css而box的没执行 （说明less没生效，还是按照普通的css编译的）

--------------------------------------------------待续------------------------------------------------------------

1. less依赖包
npm install --save-dev less less-loader
2. 网络请求axios依赖包
npm install --save axios
3. axios低版本浏览器补丁es6-promise依赖包
npm install --save es6-promise
4. 状态管理安装（vuex）
npm install --save vuex
5. PC端组件库
npm install --save element-ui
6. 移动端组件库
npm install --save mint-ui
7. cookie封装库
npm install --save js-cookie