深入浅析vue-cli@3.0 使用及配置说明

什么是vue-cli@3.0

vue-cli@3.0 是 Vue.js 的脚手架工具，它可以帮助我们快速生成一个基于 Vue.js 的项目开发所需的目录和文件，并提供了一些常用的功能，例如：本地开发调试、构建打包、自动化部署等。

vue-cli@3.0 相对于之前的版本，最大的改变是它采用了完全重构的架构，即把之前单一的组件改为了插件化的形式，可以根据需要安装需要的插件。

如何安装vue-cli@3.0

在全局安装 vue-cli@3.0 前需要先安装 Node.js 和 npm。

打开终端，输入以下命令进行全局安装：

npm install -g @vue/cli

如何使用vue-cli@3.0

创建项目

在终端中进入你想要创建项目的目录，输入以下命令创建项目：

vue create my-project

其中 my-project 是你的项目名称，可以根据实际情况进行修改。如果你在创建项目时没有选择默认配置，那么会进入一个配置项的界面，可以根据需求选择需要的配置。等待项目创建成功后，进入到项目目录中，即可进行项目的开发。

插件使用

vue-cli@3.0 采用插件化的形式，提供了很多常用的插件，例如：

• @vue/cli-plugin-babel：Babel 插件，可以使用 ES6/7 语法编写代码；
• @vue/cli-plugin-eslint：ESLint 插件，可以帮助我们规范代码的编写；
• @vue/cli-plugin-router：Vue Router 插件，可以方便地实现路由功能等。

我们可以使用以下命令进行插件的安装：

vue add @vue/cli-plugin-babel

其中 @vue/cli-plugin-babel 是我们想要安装的插件名称，可以根据需要进行修改。安装完成后，我们需要重启项目才能使这个插件生效。

插件删除

如果我们想要删除一个已经安装的插件，可以使用以下命令：

vue remove @vue/cli-plugin-babel

其中 @vue/cli-plugin-babel 是我们想要删除的插件名称，可以根据实际情况进行修改。

示例说明

示例一：使用 Babel 插件进行 ES6 语法编写

首先在终端中输入以下命令安装 Babel 插件：

vue add @vue/cli-plugin-babel

安装完成后，在项目根目录中的 babel.config.js 文件中配置需要使用的 babel 插件：

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    '@babel/plugin-transform-arrow-functions'
  ]
}

这里我们使用 @babel/plugin-transform-arrow-functions 插件来支持 ES6 中的箭头函数语法。

接下来，我们在项目中编写一个用于演示箭头函数语法的组件：

<template>
  <div>
    <h1>使用箭头函数</h1>
    <div>
      <p>1 + 2 = {{ add() }}</p>
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    add: () => {
      return 1 + 2
    }
  }
}
</script>

我们在组件中使用箭头函数定义了一个计算 1 + 2 的方法 add，然后在模版中使用了这个方法。

最后，在终端中输入以下命令启动项目：

npm run serve

访问 http://localhost:8080/ ，可以看到页面上已经成功显示数字 3。

示例二：使用 Vue Router 插件进行路由管理

首先在终端中输入以下命令安装 Vue Router 插件：

vue add @vue/cli-plugin-router

安装完成后，在项目目录下的 src/router/index.js 文件中进行路由的配置：

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

Vue.use(Router)

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

这里我们配置了两个路由，分别对应 / 和 /about，并分别对应着 Home 和 About 两个视图组件。

在 src/views 目录下，我们创建了 Home.vue 和 About.vue 两个视图组件，在里面写入了一些文本内容，用于区分不同的页面。

最后，在 App.vue 组件中将 <router-view></router-view> 占位符放置到需要显示路由的地方：

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

最后在终端中输入以下命令启动项目：

npm run serve

访问 http://localhost:8080/ 可以看到已经成功实现了路由管理功能，可以切换不同的页面视图。