命令行操作VUE及其相关插件的方法

今天为止，我已经入职一个月了，这一个月有辛酸有快乐。心酸的是没有人搭理你，你就像个傻子一样坐在那里，没有任何你说话。快乐的是我又学到了好多vue相关的知识，虽然都是我一步一步采坑踩过来的。今天做个总结：

1、命令行创建项目的方法

首先必须cd到一个空文件夹中

vue init webpack vue-demo1

如果安装不成功，则：

cd vue-demo1
cnpm install或者npm install

最后

cd vue-demo1
npm run dev

2、另一种创建项目的方法（不检查语法）

vue init webpack-simple vue-demo1
cd vue-demo1
cnpm install或者npm install
npm run dev

3、vue项目安装vue-resource插件的方法

cd到当前项目

npm install vue-resource --save

使用插件：在main.js文件中：

import VueResource from 'vue-resource'; //引入vue-resource插件
Vue.use(VueResource);  //使用vue-resource插件

4、vue项目安装vue-router插件的方法

  npm install vue-router --save

5、mint ui的安装与使用(main.js文件中)

安装:

 npm install mint-ui -save

引入:

            import Mint from 'mint-ui';
            Vue.use(Mint);
            import 'mint-ui/lib/style.css';

使用：
           看官网直接使用
   说明：基于vue的UI框架：
               element UI 基于vue pc端的UI框架
               mint UI 基于vue 移动端的框架

6、element-ui的安装

element-ui的安装和mint-ui的一样，但要注意要安装file-loader并进行webpack配置

否则可能会报错

扫描二维码关注公众号，回复： 2662582 查看本文章

7、vuex的使用：

什么是vuex？

vuex，一个专门为vue.js开发的状态管理模式，即状态管理插件。用于解决不同组件（不同页面）的数据共享以及数据的持久化。
小项目中尽量不用，localStorage和sessionStorage就可以解决

安装：

            npm install vuex --save

建文件：
src文件夹中建vuex文件夹，vuex文件夹中建store.js
引入(store.js文件中）：

            import Vue from 'vue';
            import Vuex from 'vuex';
            Vue.use(Vuex);

实例化（store.js文件中）：

            //实例化Vuex.store
            const store=new Vuex.Store({
                //state在vuex中用于存储数据
                state:{
                  count:1,
              },
              //mutations里面放的是方法，主要用来改变state里面的数据
                mutations:{
                  addCount(){
                      this.state.count+=1;
                      console.log(this.state.count);
                  }
                }
            })
            export default store;

使用store（组件中）：
引入：

            import store from './vuex/store.js';

            export default {
            data () {
              return {

              }
            },
            store
          }

获取数据：

          this.$store.state.count

触发mutations对象中的方法：

          this.$store.commit('方法名')

触发actions对象中的方法：

          this.$store.dispatch('方法名')