###vue步骤
1.npm install vue-cli -g //只一次
2.vue init webpack 项目名
3.cd 项目名
4.npm install
5.npm start/npm run dev

##index.html中添加

 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="referrer" content="no-referrer"/>

###下载axios，vuex ,vant
npm install axios vuex vant --save-dev
下载npm install node-sass sass-loader --save-dev
打开build==>webpack.base.config.js在loaders里面加上module – rules (vue2.0)
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”,
},

##使用scss

• node-sass sass-loader 7.3.1
  cnpm install node-sass --save
cnpm install sass-loader@7.3.1 --save

      配置sass的语法， `build/webpack.base.conf.js`
      > rules
      ```js
       //配置scss的语法
          {
              test: /\.scss$/,
              loaders: ["style", "css", "sass"]
          },
      ```
  

###全局引入axios
import axios from ‘axios’
//将axios绑定到vue原型
Vue.prototype.$axios=axios
###引入公共url
axios.defaults.baseURL=‘https://api.it120.cc/small4’
###全局引入vant

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.config.productionTip = false

###全局自定义指令

Vue.directive("jump",(el,{ value },vnode,oldNode)=>{
  el.onclick = ()=>{
    // value
    vnode.context.$router.push({
        path:value
    })
  }
})

分页（elementUi 实现分页）

网址：https://element.eleme.cn/#/zh-CN
vue 快速搭建界面组件库

1.cnpm install element-ui -S 安装下载
2.找到main.js 进行使用
    import Ele from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';  // 引入elementui样式库
    Vue.use(Ele)
3.任何组件中去使用
    复制粘贴，读api

vuex__77">vuex 搭建（准备工作）

1. 下载依赖：cnpm install vuex -S
2. 创建store文件夹,下面创建一个index.js

里面做的事情：让vue使用vuex，默认导出一个store实例对象

  import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export default new Vuex.Store({
        // 存储全局状态得
        state:{
            count:1000
        }
    })
3. 在main.js中，引入store
    import store from './store'
4. 在main.js 中，在vue实例中添加store对象
    实例：
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        store,  // 需要添加得
        components: { App:App },
        template: '<App/>'
    }) 使用：this.$store.state.count        

mint 得使用

特点：移动端得组件库
1.cnpm install mint-ui -S 安装
2.main.js ：
    // mintUi 使用 

import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’
Vue.use(MintUI)

    想要使用组件：
    // 组件得使用 main.js
    import { Swipe, SwipeItem,Radio } from 'mint-ui';

    Vue.component(Swipe.name, Swipe);
    Vue.component(SwipeItem.name, SwipeItem);

    Vue.component(Radio.name, Radio);

    // 组件里得使用

vuex___136">vuex 持久化数据 ****

作用：解决vuex的一个痛点，就是你当使用vuex，页面中进行刷新，那么你操作之后的状态，都还原了，初始状态
1. 下载安装 ： npm install vuex-persistedstate 持久化数据插件
2.找到store文件夹下面的index.js，
    import createPersistedState from 'vuex-persistedstate'
    // 与state，mutations同级
    plugins: [createPersistedState()]  //加上这个就可以了
3.当你去使用vuex中state数据时，发生改变时，他就会进行存储

vuex__145">vuex中的辅助函数 ****

import { mapState,mapMutations } from 'vuex' // 按需去引入需要得辅助函数

###安装vue3.0
cnpm i @vue/cli@3.0.5