Vue CLI学习：从入门到实践的全面指南

本文全面介绍了如何进行vue CLI学习，涵盖了Vue CLI的安装、配置以及项目创建等关键步骤。文章详细讲解了Vue CLI的各种功能和优势，如快速搭建项目、热重载、代码分割等，并提供了丰富的实践案例和常见问题解决方案。通过本文的学习，读者可以全面掌握vue CLI学习的相关知识。

Vue CLI简介

什么是Vue CLI

Vue CLI 是 Vue.js 官方的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目。Vue CLI 提供了许多开箱即用的功能，例如项目构建、代码分割、路由配置、资源打包等，可以显著提高开发效率。

Vue CLI的作用和优势

1. 快速搭建项目：Vue CLI 提供了很多预设的模板，能够快速生成 Vue 项目的基本结构，减少重复编码的工作量。
2. 插件支持：Vue CLI 支持多种插件，可以进行代码生成、热重载、路由配置等任务，灵活满足开发者的需求。
3. 环境配置：通过 Vue CLI，可以自定义构建环境，如选择不同的构建工具、样式预处理器、路由库等，使得开发流程更加灵活。
4. 代码分割：Vue CLI 具备代码分割功能，可以按需加载代码，优化应用的加载速度，提升用户体验。
5. 热重载：在开发过程中，Vue CLI 提供了热重载功能，修改代码后浏览器会自动更新，无需手动刷新页面。这极大地提高了开发效率。
6. 丰富的配置选项：Vue CLI 提供了丰富的配置选项，可以根据项目需求进行自定义，如选择不同的构建工具、配置代理等，使得项目更加灵活。

安装Vue CLI

安装Node.js和npm

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

1. 访问 Node.js 官方网站 下载并安装最新版本的 Node.js，安装过程中会自动安装 npm。
2. 安装完成后，可以通过以下命令检查 Node.js 和 npm 是否安装成功：

node -v
npm -v

全局安装Vue CLI

使用 npm 全局安装 Vue CLI：

1. 打开终端或命令行工具。
2. 输入以下命令进行安装：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查 Vue CLI 是否安装成功：

vue --version

使用Vue CLI创建项目

创建新项目的基本命令

使用 Vue CLI 创建新项目的命令如下：

vue create my-project

其中，my-project 是项目的名称，可以自行定义。

创建项目后，打开项目文件夹，可以看到以下文件结构：

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── vue.config.js

• node_modules：存放项目依赖的库文件。
• public：存放静态文件，如 index.html。
• src：存放项目的主要文件，包括组件、样式、路由等。
• .gitignore：配置文件，定义哪些文件或目录不需要被 Git 版本控制系统跟踪。
• babel.config.js：配置 Babel，用于将 ES6+ 代码转换为兼容的 JavaScript 代码。
• package.json：包含项目的元数据以及依赖信息。
• vue.config.js：配置 Vue CLI 的构建选项。
• App.vue：项目的入口文件，定义了应用的根组件。
• main.js：项目的入口文件，用于挂载 Vue 实例。

项目结构介绍

创建项目后，打开项目文件夹，可以看到以下文件结构：

my-project/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── vue.config.js

• node_modules：存放项目依赖的库文件。
• public：存放静态文件，如 index.html。
• src：存放项目的主要文件，包括组件、样式、路由等。
• .gitignore：配置文件，定义哪些文件或目录不需要被 Git 版本控制系统跟踪。
• babel.config.js：配置 Babel，用于将 ES6+ 代码转换为兼容的 JavaScript 代码。
• package.json：包含项目的元数据以及依赖信息。
• vue.config.js：配置 Vue CLI 的构建选项。
• App.vue：项目的入口文件，定义了应用的根组件。
• main.js：项目的入口文件，用于挂载 Vue 实例。

配置Vue CLI项目

路由配置

Vue CLI 默认使用 vue-router 进行路由配置。假设项目中需要配置两个路由：Home 和 About。

1. 在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件。
2. 在 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

1. 在 main.js 中引入并使用路由：

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

资源打包配置

Vue CLI 提供了丰富的资源打包配置选项，例如配置构建工具、资源文件打包等。以下是一些常见配置：

配置构建工具

默认情况下，Vue CLI 使用 Webpack 作为构建工具。可以通过 vue.config.js 文件进行配置。

1. 打开 vue.config.js 文件。
2. 例如，配置 Webpack 的 alias：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src'
      }
    }
  }
}

资源文件打包

Vue CLI 支持多种资源文件的打包，例如图片、样式文件等。可以通过 vue.config.js 文件进行配置。

1. 配置图片的压缩和打包：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        return {
          ...options,
          limit: 8192,
          name: 'img/[name].[hash:8].[ext]'
        }
      })
  }
}

1. 配置样式文件的打包：

module.exports = {
  css: {
    extract: true,
    sourceMap: false,
    loaderOptions: {
      sass: {
        additionalData: '@import "@/styles/global.scss";'
      }
    }
  }
}

常用命令和插件

常用开发命令

Vue CLI 提供了一些常用的开发命令，以下是一些常用的命令：

1. 启动开发服务器：

npm run serve

1. 构建生产环境应用：

npm run build

1. 启动静态文件服务，将 dist 文件夹下的文件开启静态资源服务：

npm run start

1. 执行单元测试：

npm run test:unit

1. 检查代码风格：

npm run lint

插件的安装和使用

Vue CLI 支持安装各种插件来扩展功能，例如 vue-cli-plugin-vuetify 用于引入 Vuetify 库。

1. 安装插件：

vue add vuetify

1. 在项目中使用插件：

在 main.js 中使用插件：

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

实践案例

开发一个简单的Vue应用

假设开发一个简单的博客应用，包含文章列表和文章详情两个页面。

1. 创建项目：

vue create blog-app

1. 在 src/router/index.js 中配置路由：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/article/:id',
    name: 'Article',
    component: Article
  }
]

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

export default router

1. 创建文章列表组件 Home.vue：

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id" @click="navigateToArticle(article.id)">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        { id: 1, title: '文章一' },
        { id: 2, title: '文章二' },
        { id: 3, title: '文章三' }
      ]
    }
  },
  methods: {
    navigateToArticle(id) {
      this.$router.push({ name: 'Article', params: { id } })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

1. 创建文章详情组件 Article.vue：

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {}
    }
  },
  created() {
    const id = this.$route.params.id
    this.article = this.getArticleById(id)
  },
  methods: {
    getArticleById(id) {
      const articles = [
        { id: 1, title: '文章一', content: '文章一的内容' },
        { id: 2, title: '文章二', content: '文章二的内容' },
        { id: 3, title: '文章三', content: '文章三的内容' }
      ]
      return articles.find(article => article.id === id)
    }
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

1. 启动开发服务器：

npm run serve

常见问题解决

如何解决热重载无效？

1. 检查 Vue CLI 版本是否最新，如果不是，更新 Vue CLI：

npm install -g @vue/cli

1. 检查 main.js 文件，确保引入了路由：

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1. 检查 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

如何解决样式不生效？

1. 检查 vue.config.js 文件，确保样式配置正确：

module.exports = {
  css: {
    extract: false, // 禁用 CSS 打包
    sourceMap: false,
    loaderOptions: {
      sass: {
        additionalData: '@import "@/styles/global.scss";'
      }
    }
  }
}

1. 检查组件中的样式，确保写法正确：

<template>
  <div class="container">
    <h1>标题</h1>
  </div>
</template>

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

<style scoped>
.container {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

如何解决打包输出的文件体积过大？

1. 优化代码，避免重复引入不必要的依赖。

2. 使用代码分割，将代码分割成多个小块，按需加载，减少初次加载的体积。在 vue.config.js 中配置代码分割：

module.exports = {
  chainWebpack: config => {
    config.plugin('extract-css').tap(args => {
      args[0].filename = '[name].[hash].css'
      return args
    })
  }
}

1. 使用压缩工具压缩输出的文件。在 vue.config.js 中配置压缩：

module.exports = {
  productionSourceMap: false, // 关闭生产环境的 sourceMap
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

通过以上步骤，可以解决热重载无效、样式不生效、打包输出文件体积过大等问题，使项目开发和维护更加高效。