Vue使用流程

下载NodeJs
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时官网下载
直接去Node.js的官网下载然后在控制台中使用命令
NPM
npm是javaScript的包管理工具，类似Maven
npm -v 查看版本
npm install 包名 --save 安装包
npm uninstall 包名 --save 卸载包

Vue-cli

是Vue的脚手架，用于搭建项目，类似SpringBoot

安装

npm install -g @vue/cli

创建项目

vue create 项目名





将项目导入idea
项目结构

运行项目

npm run serve

Vue-router

Vue的路由组件，实现页面之间跳转

安装

npm install -g vue-router --save

使用 main.js

import router from './router'

new Vue({
  router,
  ..
}

配置 router/index.js

import Hello from "../views/Hello"; //导入自己的组件

const routes = [
    //自定义路由
  {
    path: '/',  //路径
    name: 'Hello', //名字
    component: Hello //组件
  }
]

router相关组件

路由视图，用于挂载页面

<router-view></router-view>

链接

<router-link to="路径">文字</router-link>

基本的页面跳转

index.js

import Hello from "../views/Hello"; //导入自己的组件
import World from "../views/World";

Vue.use(VueRouter)

const routes = [
    //自定义路由
  {
    path: '/',
    name: 'Hello',
    component: Hello
  },
  {
    path: '/world',
    name: 'World',
    component: World
  }
]

Hello.vue

<template>
    <div>
        <h1>Hello Vue</h1>
        <router-link to="/world">到HelloWorld</router-link>
    </div>
</template>

子路由

跳转到页面内部，页面存在父子关系

import World1 from "../views/World1";
import World2 from "../views/World2";

Vue.use(VueRouter)

const routes = [
    //自定义路由
  {
    path: '/',
    name: 'Hello',
    component: Hello
  },
  {
    path: '/world',
    name: 'World',
    component: World,
    children:[  //配置子路由
      {
        path: '/world1',
        name: 'World1',
        component: World1
      },
      {
        path: '/world2',
        name: 'World2',
        component: World2
      },
    ]
  }
]

World.vue

<div>
    <h1>Hello World</h1>
    <!--超链接-->
    <router-link to="/world1">world1</router-link>
    <hr>
    <router-link to="/world2">world2</router-link>
    <hr>
    <!--用于挂载子页面-->
    <router-view></router-view>
</div>

通过JS路由

this.$router.push({path:‘路径’})

带参数跳转

1）使用超链接

<router-link to="/路径?参数名=值">world1</router-link>

2）JS

this.$router.push({path:'路径',query:{参数:值...}})

接受参数

this.$route.query.参数名

Vue-X

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

可以用于保存全局的数据。

安装

npm install vuex --save

使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  el: '#app',
  store
})

调用

store.commit('increment')
console.log(store.state.count)