Vue脚手架的简单使用实例

下面是关于“Vue脚手架的简单使用实例”的完整攻略：

什么是Vue脚手架

Vue脚手架是一款基于Node.js构建的Vue.js项目脚手架工具，用来快速搭建一个Vue.js开发环境。Vue脚手架可以帮助我们自动生成Vue项目的基础结构，集成了一些常用的插件和组件，同时还提供了开发、打包和测试等一系列的命令。

如何使用Vue脚手架搭建一个Vue.js项目

安装Node.js和npm

使用Vue脚手架之前，需要确保自己已经安装好了Node.js和npm。

全局安装Vue脚手架

npm install -g vue-cli

创建Vue.js项目

vue init webpack my-project

其中，my-project代表你的项目名称。

此命令会在当前目录下，创建一个my-project文件夹，并在该文件夹中生成一个基于webpack的Vue.js项目的基本结构。

进入项目

cd my-project

安装依赖

npm install

该命令会自动安装package.json文件中所列明的依赖。

运行项目

npm run dev

此时，打开浏览器，访问 http://localhost:8080，即可看到Vue.js项目的首页。

打包项目

npm run build

该命令会生成一个dist目录，并在该目录下生成打包后的文件。

Vue脚手架常用组件和插件

Vue Router

Vue Router是Vue.js的官方路由插件，用来实现页面之间的跳转和传参。

安装方法：

npm install --save vue-router

在main.js中，引入和使用Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vuex

Vuex是Vue.js的官方状态管理插件，提供了状态统一管理和控制的功能。

安装方法：

npm install --save vuex

在main.js中，引入和使用Vuex：

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

Vue.use(Vuex)

示例：使用Vue脚手架和Vue Router搭建一个简单的SPA（单页应用）

使用Vue脚手架创建一个项目

vue init webpack my-project

安装Vue Router

npm install --save vue-router

在src文件夹下创建一个components文件夹，并在该文件夹中创建两个.vue文件，分别为Home.vue和About.vue。

Home.vue：

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

About.vue：

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

在src文件夹下创建一个router文件夹，并在该文件夹中创建一个index.js文件。

index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

其中，path为路由的路径，component为该路径下对应的组件。

在main.js中引入router，并使用router：

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在App.vue中采用标签来渲染路由中对应的组件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

运行项目

npm run dev

打开浏览器，访问 http://localhost:8080/#/，即可访问首页；访问 http://localhost:8080/#/about，即可访问关于页面。

示例：使用Vue脚手架和Vuex实现一个计数器

使用Vue脚手架创建一个项目

vue init webpack my-project

安装Vuex

npm install --save vuex

在src文件夹下创建一个store文件夹，并在该文件夹中创建一个index.js文件。

index.js：

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

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

export default new Vuex.Store({
  state,
  mutations
})

其中，state为状态对象，mutations为状态变化的方法集合。

在main.js中引入store

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

在App.vue中使用状态

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
      this.count = this.$store.state.count
    },
    decrement() {
      this.$store.commit('decrement')
      this.count = this.$store.state.count
    }
  },
  created() {
    this.count = this.$store.state.count
  }
}
</script>

使用this.$store.commit()来执行mutations中定义的方法。

在created()生命周期函数中，使用this.$store.state获取状态。