Vue CLI 3.0 使用全过程解析

什么是 Vue CLI 3.0

Vue CLI 3.0 是由 Vue.js 官方推出的一个 CLI 工具，用于辅助开发者快速搭建 Vue.js 项目，并且包含了一些官方推荐的插件和配置，极大地提高了开发效率。

安装 Vue CLI 3.0

在使用 Vue CLI 3.0 之前，需要先安装 Node.js，然后使用 npm 安装 Vue CLI 3.0。

# 安装 Vue CLI 3.0
npm install -g @vue/cli

安装完成之后，即可使用 vue 命令进行项目创建和启动。

创建一个 Vue.js 项目

在安装完成 Vue CLI 3.0 并确认安装成功后，就可以使用 Vue CLI 3.0 来创建一个 Vue.js 项目了，使用 vue create 命令来创建项目。

# 创建一个项目
vue create my-project

执行以上命令后，Vue CLI 3.0 会首先请求用户选择一个预设配置（包含了一些官方推荐的默认配置以及插件），推荐使用 Default (Vue 2.x) prototype 预设，也可以根据需要选择自定义配置。

选择预设之后，Vue CLI 3.0 会根据预设配置和用户自定义配置生成一个最终的项目配置，并安装依赖。完成后，使用以下命令进入项目目录：

# 进入项目目录
cd my-project

启动项目

在项目目录下使用以下命令来启动项目：

# 启动项目
npm run serve

该命令会启动一个开发服务器，并监听本地的 8080 端口（默认端口，可以在项目配置中修改）。在浏览器中输入 http://localhost:8080/ 即可查看项目效果。

示例一：添加一个新的页面

在 Vue.js 项目中添加一个新的页面很简单，只需要新建一个 .vue 文件，并在路由配置中注册即可。

在 src/views 文件夹下新建一个 About.vue 文件，编写上述组件的代码：

<template>
  <div class="container">
    <h1>About</h1>
    <p>Some information about the website.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style>
.container {
  margin: 50px auto;
  max-width: 600px;
  text-align: center;
}
</style>

然后在 src/router/index.js 文件中添加一个新路由指向该组件。

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

保存并重新启动项目 npm run serve，在浏览器中输入 http://localhost:8080/about 即可看到新添加的页面。

示例二：使用 Sass

为了方便地管理样式，我们可以使用 Sass 来进行样式编写。Vue CLI 3.0 默认已经安装了 Sass，我们只需要在 .vue 文件中添加 lang="scss" 属性即可开始使用 Sass。

在 src/App.vue 文件中使用 Sass：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + Sass App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss">
$primary: #3fbf87;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

使用 Sass 之后，需要修改 .vue 文件的 style 标签的 lang 属性为 "scss"。在样式代码中，可以使用 Sass 提供的变量、嵌套等特性，提高样式编写的效率。

总结

本文简单介绍了 Vue CLI 3.0，包括安装、创建项目、启动项目等基本用法，还讲解了如何添加新页面和使用 Sass 等。期望能够帮助开发者更好地使用 Vue CLI 3.0 快速地搭建 Vue.js 项目。