1、新建Vue项目:vue init webpack projectName

2、vue-router模块

  1、安装vue-router模块:npm install vue-router --save-dev

  2、在src文件夹下新建文件夹router继续新建文件index.js

    编辑index.js文件

    首先引入模块:

      import Vue from 'vue';

      import VueRouter from 'vue-router';

      import home from '../component/home'

      import user from '../component/user'

      ...(引入自己定义的组件)

    声明引用:

      Vue.use(VueRouter);

    在接口通告新建的 router:

      exports default new VueRouter({

        routes: [

          {path: '/home', component: home},
          {path: '/user', component: user}...

        ]

      })

  3、在main.js中编辑

    import router from './router'(引入模块)

    

    new Vue({
        el: '#app',
        router,   //(在Vue对象中加入router)
        components: {
            App
        },
        template: '<App/>'
    })
 

  4、在App组件(组件都可以)中引用

    <router-link to="/home">home</router-link>

    <router-link to="/user">user</router-link>

    <div>

      <router-view></router-view>

    </div>

2、vuex模块

  1、安装vuex模块:npm install vuex --save

  2、在src文件夹下创建新文件夹store再创建文件index.js

    编辑index.js文件

    引入模块:

      import Vue from 'vue'

      import Vuex from 'vuex'

    声明引用:

      Vue.use(Vuex)

    宣告出口:

      export default new Vuex.Store({

        

      })

  3、在main.js中编辑

    import store from './store/index'(引入模块)

    new Vue({
        el: '#app',
        store,  //(在Vue对象中加入store)
        components: {
            App
        },
        template: '<App/>'
    })
 

  4、在index.js中继续编辑:

    1、声明变量(单一状态树)

      const state = {

        count,

        sum...(等等需要在不同组件中使用的变量)

      }

      在其他组件中引用:

        1、先引入store模块:import store from '@/store/index'

        2、正常访问变量:$store.state.count

        3、通过 computed 的计算属性直接赋值    

computed: {
  count () {
    return this.$store.state.count
  },
  sum() {
    return this.$store.state.sum
  }
}

        4、借用辅助函数mapState

<script>
  import mapState from 'vuex'//引入辅助函数
  
  computed: mapState({//ES6的箭头函数
    count: state => state.count,
    sum: state => state.sum
  })   //或者直接使用mapState辅助函数的字符串数组
  computed: mapState(['count', 'sum']) </script>

    2、声明控制状态对象的方法:

      const mutations = {

        add (state, n) {

          state.count += n;

        }

      }

      在其他组件中引用:

        1、正常访问:$.store.commit('add', '10')

        2、通过methods方法控制mutations(参考上面computed,注意:提交方法为:this.$store.commit('add'))

        3、借用mapMutations辅助函数  

import {mapState, mapMutations} from 'vuex'//引入辅助函数

methods: {
  ...mapMutations(['add'])
}

      

    

    

Vue项目的更多相关文章

  1. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  2. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  3. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

  4. Vue 项目实战系列 (一)

    最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...

  5. 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

  6. vue项目构建与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易 ...

  7. Vue项目搭建完整剖析全过程

    Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios ...

  8. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  9. 如何快速把 Vue 项目升级到 webpack3

    由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能 ...

  10. vue-修改vue项目运行端口号

    一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝 ...

随机推荐

  1. Linux下apache activemq的安装与配置

    ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范 的 JMS Provider实现,尽管JMS规范出台已经是很 ...

  2. Java知多少(5) Java开发环境的搭建

    要进行Java开发,首先要安装JDK(Java Development Kit,Java开发工具箱). JDK 是一系列工具的集合,这些工具是编译Java源码.运行Java程序所必需的,例如JVM.基 ...

  3. 新手谈Linux

    目录: 什么是Linux? Linux与UNIX的区别 Linux与Windows比较 什么是Linux发布版? Linux应用领域 Linux版本的选择 怎么学习Linux? Linux系统配置 通 ...

  4. USI和USCI的区别

    在 MSP430 系列中微控制器中有三种串行通讯模块.它们分别是 USART . USI 和 USCI . USART 支持同一硬件模块的两种串行模式,分别是 UART 和 SPI . USART 实 ...

  5. 5、二、App Components(应用程序组件):0、概述

    二.App Components(应用程序组件) 0.概述   App Components Android's application framework lets you create rich ...

  6. JavaScript隐藏的坑一,隐式调用toString

    最近在重新学习JavaScript,看动态原型对象的时候,打印了两个用同一个构造函数生成的对象,但是打印结果却不一样,请看代码: var box1=new Box(); console.log(box ...

  7. 【netcore入坑记】 .Net core UseRowNumberForPaging 分页报错 SQL Server 2008 R2 EntityFrameworkCore

    异常环境: netcore版本:.Net Core 2.1 efcore版本:Microsoft.EntityFrameworkCore.SqlServer 2.1.1 sql sqlserver 版 ...

  8. scala 模式匹配详解 1

    什么是模式? 一些刚从java转到scala的同学在开发的过程中犹如深陷沼泽,因为很多的概念或风格不确定,scala里有很多的坑,模式匹配也算一个.我整理了一下自己所理解的概念,以及一些例子.这个系列 ...

  9. Go学习笔记(二)搭建Visual Studio Code调试环境

    上一篇 Go学习笔记(一)安装Go语言环境 安装Visual Studio Code 这是目前我觉得最好用的文本编辑器了, https://code.visualstudio.com/ 中间有几部确认 ...

  10. VUE----整理

    -------------------------------------------------------------------VUE------------------------------ ...