vue个人项目实战记录

1.项目本地打开：

npm run dev   ===> npm start

可以在config/index.js里把autoOpenBrowser改为true:(自动打开浏览器)
host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

打包发布（线上）：

npm run build    //项目打包
npm i -g serve  //安装serve模块（安装过的就可以不用安装了）
serve dist     //打开项目

2.在项目中引用静态的components组件：

import FooterGuide from '@/components/FooterGuide/FooterGuide'

加一个@符号；

3，想在项目中引用线上icon小图标，直接写：

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_924203_eq8ui4m6w4.css">

//首先要引入css的项目库资源（添加小图标到项目购物车时要刷新link链接地址！）

<i class='iconfont icon-setting'></i>

//直接给标签加需要的class样式（所有icon图标必须先引入iconfont这个class！）

4，安装依赖包（以swiper为例：）

npm i swiper

在***.vue中引入js和css文件；

 import Swiper from 'swiper';
 import 'swiper/dist/css/swiper.min.css';
 //文件挂载的时候创建Swiper实例；

mounted(){
        new Swiper('.swiper-container',{
          loop:true,
          pagination:{
            el:'.swiper-pagination'
          }
        });
      },

就可以直接使用啦！

vue配置请求代理：

文件中改写：

 proxyTable:{
      "/api":{
          target:"http://www.kuaidi100.com",//你需要请求的域名
          changeOrigin:true,
          pathRewrite:{
               '^/api':''
          }
      }
 },
然后在全局给vue构造函数添加一个方法：
Vue.prototype.HOST='/api';
这样就可以直接使用this.HOST+拼接路径直接请求数据了;
ex:
var url = this.HOST+'/query/getinfo?参数';

重点：vuex!首先在store文件夹下创建index.js主文件，在该文件中配置几个参数；

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import state from './state'
import actions from './actions'
Vue.use(Vuex);
export default new Vuex.Store({
    getters,
    state,
    mutations,
    actions
});

还需要在Vue实例中使用该store；

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'  //引入store->index.js
Vue.config.productionTip = false

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

首先说说state.js,该文件保存着整个项目的数据：

//state.js
export default {
    name:"MR.V",
    count:1
}

在任何模块里都可以使用该数据：

方法有一下几种：

在computed:{}计算属性中，

//第一种
<template>
    <div>
        <h3>{{counts}}</h3>
        <h3>{{names}}</h3>
    </div>
</template>
export default {
    computed: {
    counts () {
      return this.$store.state.count
    },
    names(){
        return this.$store.state.name
    }
  }
}
//第二种
<template>
    <div>
        <h3>{{count}}</h3>
        <h3>{{name}}</h3>
    </div>
</template>
import { mapState } from 'vuex'
export default {
    computed: {
      ...mapState (["name","count"])
  }
}
//第三种
import { mapState } from 'vuex'

export default {
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

接下来说getters，相当于state的计算属性，在getters里处理state的数据，例如过滤，去重等等，在大胡子语法里写可读性较差

//我在状态属性里写了study:["55","66","77"]
filter_study:(store)=>{
       var arr = store.study.filter((item)=>{
            return item>=60;
        });
        console.log("调用啦");
        return arr;
    }

这样就定义好了，接下来调用，在这里我为大家列出集中展示方法：

1.
  import {mapState,mapGetters} from 'vuex'  //首先用映射函数把getters里的filter_study引入进来
export default {
  computed:{
    ...mapState(['study']),
    ...mapGetters(['filter_study'])
  }
}

在页面里直接使用即可；
<ul>
  <li v-for="(item,index) in filter_study"  :key='index'>{{item}}</li>
</ul>


2.

<ul>
  <li v-for="(item,index) in this.$store.getters.filter_study"  :key='index'>{{item}}</li>
</ul>

接下来到Mutations了，该属性是修改state里的值，虽然可以直接不通过mutations修改

但是！但是！但是！Mutation 必须是同步函数，异步检测不到改变！，但是vuex中没有修改记录，不方便后期维护，所以，大家一起来好好学一下mutations吧；

 jia(state,num){
        state.count+=num;
    },
 jian(state,num){
       state.count-=num;
   },

//第一个参数是state，第二个是自定义参数，可传可不传

接下来调用：

1.
methods:{
    jia(a){
       this.$store.commit('jia',a);
    },
    jian(a){
      this.$store.commit('jian',a);
    }
  }
页面调用：
<button @click='jia(2)'>+</button>
<button @click='jian(3)'>-</button>

2.
可以用对象形式传递：
store.commit({
  type: 'increment',
  amount: 10
})
定义mutations:
 jia(state,num){
        state.count+=num.amount;
    }

3.
用映射方法调用mutations
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为         `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')，添加方法名`
    })
  }
}

因为mutations管理的方法太多了，名称有点乱不方便查找，所以建立mutations-type.js 文件

该文件集中整理了方法的名字并导出，需要的直接引用即可，如下：

export const JIA = "JIA";
export const JIAN = "JIAN"; 
//一般用常量来保存方法名；

然后在mutations中用常量作为函数名
import {JIA,JIAN} from './mutation-types'
export default {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [JIA](state,num){
        state.count+=num.amount;
    },
    [JIAN](state,num){
        state.count-=num;
    }
}

页面展示：
 methods:{
    jia(a){
       this.$store.commit({
         type:'JIA',
         amount:a
       });
    },
    jian(a){
      this.$store.commit('JIAN',a);
    }
  }
}

 mutations不可以检测异步数据，所以action来了！

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

在router里，可以为router-link添加选中的样式：

<div class='banner'>
    <router-link to='/demo1'>菜单</router-link>
    <router-link to='/demo2'>评论</router-link>
    <router-link to='/demo3'>商家</router-link>
    </div>

//选中的router-link会自动添加一个class类，但是特别长，可以在new Router({
    linkActiveClass:'active'
})；
//把该添加的类样式名改为active，router-link其实是一个a标签，直接设置a.active即可添加样式

在vue项目里如何使用stylus编译？

首先安装stylus模块，npm i stylus

然后安装stylus-loader ,npm i stylus-loader

然后在stylus里写代码即可

<style lang="stylus">
#app
    font-family: 'Avenir', Helvetica, Arial, sans-serif
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    text-align: center
    color: #2c3e50
    margin-top: 60px

</style>

vue插件集合：

https://blog.csdn.net/hjh15827475896/article/details/78207066