Vue CLI资料入门教程

概述

本文全面介绍了Vue CLI的相关知识，包括Vue CLI的定义、作用、安装方法以及如何使用Vue CLI创建和配置Vue项目。文章详细解释了Vue CLI的常用配置选项和插件系统，并提供了详细的开发、调试和发布Vue应用的步骤。

Vue CLI简介

什么是Vue CLI

Vue CLI是Vue.js官方提供的脚手架工具，用于快速搭建Vue.js项目。它提供了一套开箱即用的构建设置，帮助开发者更加高效地开发Vue应用。

Vue CLI的作用

Vue CLI主要作用包括：

• 快速初始化项目结构
• 配置复杂的构建设置，如模块打包、代码分割、文件加载等
• 提供热重载开发服务器（dev server）
• 自动生成测试文件
• 自动运行单元测试和端到端测试
• 支持代码转换、代码转译等

安装Vue CLI

安装Vue CLI需要Node.js环境，可以通过npm或yarn进行安装。以下是使用npm安装Vue CLI的步骤：

1. 确保Node.js环境已经安装：

   node -v

   如果未安装，请先安装Node.js。

2. 使用npm安装Vue CLI：

   npm install -g @vue/cli

3. 安装完成后，通过命令检验Vue CLI是否安装成功：

   vue --version

使用Vue CLI创建项目

创建新项目

通过Vue CLI可以快速创建一个新的Vue项目。以下步骤介绍如何使用Vue CLI创建一个新的Vue项目：

1. 打开终端或命令行工具

2. 使用以下命令创建新项目：

   vue create my-project

   其中，my-project是项目的名称，你可以根据自己的需求更改。

3. 创建项目后，可以进入项目目录并执行开发命令：

   cd my-project
   npm run serve

项目结构介绍

创建的Vue项目具有典型的项目结构，以下是一些主要文件和文件夹的介绍：

• public/：用于存放静态资源，如index.html、favicon.ico等
• src/：存放Vue应用的主要代码
• src/assets/：存放静态资源，如图片、字体等
• src/components/：存放Vue组件，每个组件对应一个单独的.vue文件
• src/views/：存放每个路由对应的页面组件
• src/App.vue：应用的根组件
• src/main.js：应用的入口文件
• package.json：项目的基本信息和依赖配置文件
• babel.config.js：Babel的配置文件，用于转换ES6+代码
• vue.config.js：Vue CLI的配置文件，可以自定义配置
• README.md：项目说明文档

各目录文件作用说明

1. public/：存放静态资源，如index.html文件，浏览器可以直接访问。
2. src/：存放Vue应用的逻辑代码。
3. src/assets/：存放静态资源，如图片、字体等。
4. src/components/：存放Vue组件，每个组件对应一个单独的.vue文件。
5. src/views/：存放每个路由对应的页面组件。
6. src/App.vue：应用的根组件，是整个应用的入口。
7. src/main.js：应用的入口文件，通过Vue实例化App组件，并挂载到DOM元素上。
8. package.json：项目的基本信息和依赖配置文件。
9. babel.config.js：Babel的配置文件，用于转换ES6+代码。
10. vue.config.js：Vue CLI的配置文件，可以自定义配置。
11. README.md：项目说明文档，介绍项目的用途和基本用法。

示例项目代码

在src/App.vue中，基本的项目结构如下：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

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

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

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

在src/components/HelloWorld.vue中，组件代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #42b983;
}
</style>

开发Vue项目

安装依赖

在项目中，可以使用npm或yarn来安装项目依赖。以下是安装步骤：

1. 进入项目目录

   cd my-project

2. 使用npm安装依赖

   npm install

   或者使用yarn：

   yarn install

安装完成后，package.json文件会包含项目的基本信息和依赖配置。例如：

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2"
  }
}

开发模式运行

开发模式运行是开发Vue项目的主要方式，可以通过以下步骤启动：

1. 在项目根目录下运行：

   npm run serve

   或者使用yarn：

   yarn serve

2. 启动后，Vue CLI会启动一个开发服务器，默认在http://localhost:8080上运行
3. 在浏览器中打开URL，即可看到应用

构建生产版本

构建生产版本是将应用打包成一个可以部署的静态文件。以下是构建生产版本的步骤：

1. 在项目根目录下运行：

   npm run build

   或者使用yarn：

   yarn build

2. 构建完成后，可以在dist目录下找到生成的静态文件
3. 静态文件可以直接部署到任何静态文件服务器，如Apache、Nginx等

调试Vue应用

使用Chrome开发者工具

Chrome开发者工具是调试Vue应用的重要工具。以下是一些常用功能：

• Elements：查看并修改DOM结构
• Console：查看控制台输出的错误信息
• Sources：查看源代码，设置断点，查看变量值
• Network：查看网络请求，调试API接口

常见错误排查

常见的Vue错误包括：

• 组件未正确注册
• 数据绑定错误
• 属性或方法不存在

示例代码：

<template>
  <div>
    <my-component v-if="show"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent // 注册组件
  },
  data() {
    return {
      show: true
    };
  }
};
</script>

日志输出

在Vue应用中，可以使用console.log来输出日志信息。示例代码：

export default {
  mounted() {
    console.log('Component mounted');
  },
  methods: {
    someMethod() {
      console.log('someMethod called');
    }
  }
};

配置Vue CLI

修改项目配置

Vue CLI提供了一个vue.config.js文件，用于配置项目的构建选项。以下是一些常见的配置选项：

• outputDir：构建输出目录，默认值为dist
• assetsDir：静态资源目录，默认值为static
• index：构建生成的index.html模板文件路径，默认值为public/index.html
• publicPath：部署应用时的基础路径，例如，如果部署在https://www.example.com/myapp/，则设置为/myapp/
• filenameHashing：是否为路由生成带hash值的文件名称，便于缓存，默认值为true
• lintOnSave：是否在保存时进行eslint检查，默认值为true
• devServer：开发服务器配置，如port、host、open、proxy等
• css：CSS配置，如extract、sourceMap等
• productionSourceMap：是否在生产环境中生成SourceMap，默认值为false
• configureWebpack：自定义webpack配置
• chainWebpack：更灵活的修改Webpack配置

示例代码：

module.exports = {
  outputDir: 'build',
  assetsDir: 'assets',
  index: 'public/index.html',
  publicPath: '/',
  filenameHashing: true,
  lintOnSave: true,
  devServer: {
    port: 8080,
    host: 'localhost',
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  css: {
    extract: true,
    sourceMap: true
  },
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src'
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel')
      .options({
        presets: [
          ['@vue/cli-plugin-babel/preset', {
            useBuiltIns: 'usage',
            corejs: 3
          }]
        ]
      })
  }
};

使用Vue CLI插件

Vue CLI内置了常用的插件，如Babel、TypeScript、Router等。如果需要，可以通过Vue CLI的插件系统添加更多功能。

1. 使用Vue CLI的vue ui命令打开图形界面，选择插件进行安装
2. 或者在命令行中使用vue add命令安装插件，如：

   vue add router
   vue add typescript

安装插件后，项目会自动生成相应的配置文件和代码。例如，安装vue-router插件后，会在src/router/index.js中生成以下代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
    }
  ]
})

发布Vue应用

打包应用

打包应用是将Vue应用构建为一个静态文件，以便部署到服务器。以下是打包步骤：

1. 在项目根目录下运行：

   npm run build

   或者使用yarn：

   yarn build

2. 构建完成后，可以在dist目录下找到生成的静态文件
3. 静态文件可以直接部署到任何静态文件服务器，如Apache、Nginx等

部署到服务器

部署到服务器的步骤如下：

1. 将打包后的静态文件上传到服务器
2. 配置服务器，将静态文件映射到适当的路径

示例代码：

scp -r dist/* user@server:/path/to/deploy

部署到GitHub Pages

GitHub Pages可以托管静态网站，以下是部署到GitHub Pages的步骤：

1. 在项目根目录下运行：

   npm run build

   或者使用yarn：

   yarn build

2. 将打包后的静态文件上传到GitHub Pages
3. 配置vue.config.js，设置publicPath为/，并关闭filenameHashing
4. 提交到GitHub仓库，GitHub将会自动打包并部署到GitHub Pages

示例代码：

module.exports = {
  publicPath: '/',
  filenameHashing: false
};

总结

通过Vue CLI，可以快速搭建Vue应用，并进行各种配置和部署。Vue CLI提供了丰富的配置选项和插件，帮助开发者高效地开发和部署Vue应用。希望本文提供的信息能够帮助你更好地理解和使用Vue CLI。