从零开始创建一个vue项目

一、首先创建一个文件夹，在终端中输入

vue create myapp

选择默认defaule，等待项目的生成，项目生成后键入一下命令

//进入项目

cd myapp

//启动项目

npm run serve

//或者
yarn serve

删除不必要的文件，梳理一下需要安装那些依赖和插件 

1.axios 用来代替ajax发起请求

2.iscroll 一个常用的滚动插件

3.node-sass sass-loader 用来编写sass

4.swiper 轮播图插件

5.vue-router 路由插件

6.vue-cookies vue项目中便捷的cookie

使用命令安装这些插件

cnpm i axios iscroll node-sass sass-loader swiper vue-router vue-cookies -D

安装完成后引入vue

在src下创建axios.js文件，写入

import axios from 'axios'   //引入axios
import vue from 'vue'
vue.prototype.$axios = axios;   //添加原型


//在main.js中写入
import './axios.js'

创建cookies.js文件，写入

import vue from 'vue'
import cookie from 'vue-cookie'
vue.use(cookie)

//在main.js中写入
import './cookies.js'

如果还需要eventbus可以创建eventbus.js

import Vue from 'vue'

var eventbus = new Vue()

vue.prototype.$eventbus = eventbus

//在main.js中引入
import './eventbus'

也可以不是有模块化开发，直接在main.js中引入

//axios
import axios from 'axios'   //引入axios
Vue.prototype.$axios = axios;   //添加原型


//cookie
import cookie from 'vue-cookie'
Vue.use(cookie)

//eventbus
var eventbus = new Vue()

Vue.prototype.$eventbus = eventbus

 

接下来就是router路由文件，创建router.js，写入

import vue from 'vue';
import vueRouter from 'vue-router';

//将页面导入路由
import index from './components/index.vue';

vue.use(vueRouter);
//设置路由规则
const routes = [
    {
        path='/',
       component : index
    }  
]

//mode 网址显示的样式  history默认 hash网址含# abstract 网址不变
const router = new vueRouter({routes,mode:'history'})

export defualt  router   //导出


//在main.js中引入
import router from './router.js';
new Vue({
   router,
   ....
}).$mount('#app')

assets文件夹，公共样式、js、图片等，需要在main.js中引入

//比如
import './assets/css/reset.css';

components文件用来存放组件

router在页面的显示分为入口和出口

入口是点击某个元素进行跳转，出口是在哪里显示

//入口

<router-link to='/'>点我跳转</router-link>

//出口

<router-view></router-view>

当我们要使用vuex时，先使用命令进行安装

cnpm i vuex -S

在src下创建store.js

import vue from 'vue';
import vuex from 'vuex';

//如果使用模块化
import goods from './goods.js'

vue.use(vuex);

const store = new vuex.Store({
     modules:{
           g:goods     //将逻辑代码写入goods.js文件中
    }
})

export default store;

//在main.js中引入
import store from './store.js'

new Vue({
   store,
   router,
   ......
}).$mount('#app')

用来存放store代码的goods.js

 const goods = {
     //  用来存放数据
      state:{
           a : 1
       },
     //用来直接修改state数据
      mutations:{
         add(state,payload){
            state.a = payload
         }
      },
     //用来编写逻辑
      actions:{
         //payload代表传过来的数据，context
          add(context,payload){
             context.commit('add',1)
         }
      },
       //计算属性，具有缓存的特点
      getter:{
         
      }
}

 然后在页面中调用actions控制mutation进行修改state

created(){
    //获取state数据
    this.arr = this.$store.state.goods;
    //调用action
    this.$store.dispatch('add',this.arr);
    //也可以直接控制mutation
     this.$store.commit('add',this.arr);
}

 

vuex提供了几个辅助函数

mapState在vue组件中用于快速接受state的数据

mapMutations在vue组件中用于快速接收mutations中的数据

mapActions在vue组件中用于快速接收actions中的数据

mapGetters在vue组件中用于快速接收grtters中的数据

//在页面中引入

 import {mapActions,mapMutations,mapGetters,mapState} from 'vuex'

computed:

{
  ...mapState({
     goods:(state)=>{
         return state.goods;
     } 
  })
  ...mapActions(['add'])     //和视图层的函数名要一致
  ...mapMutations(['add'])
  ...mapGetters(['add'])
}