Vue CLI入门教程：快速搭建Vue项目

本文将介绍Vue CLI的使用方法，从安装到项目创建、配置和部署，帮助开发者快速搭建Vue项目。Vue CLI提供了多种预设模板和配置选项，可以大大提高开发效率。文章还会详细介绍Vue CLI的主要功能和常用命令，以及如何解决常见的部署问题。阅读本文，你将全面了解如何利用Vue CLI进行项目开发和部署。

什么是Vue CLI

Vue CLI是Vue.js的官方命令行工具，它可以帮助开发者快速搭建和开发Vue项目。Vue CLI提供了多种配置选项，使得开发者能够根据需求定制自己的开发环境，从而提高开发效率。

为什么使用Vue CLI

使用Vue CLI有以下几个好处：

1. 快速启动项目：Vue CLI提供了多种预设模板，开发者可以通过简单的命令快速创建项目，减少从零开始配置的时间。
2. 高效的开发体验：Vue CLI内置了许多开发工具，如热重载（Hot Reload），可以实时看到代码修改的效果，提高开发效率。
3. 灵活的配置选项：Vue CLI提供了丰富的配置选项，开发者可以根据项目需求调整构建配置，如引入不同的加载器（Loader）、插件（Plugin）等。
4. 一致的项目结构：使用Vue CLI创建的项目具有统一的结构和配置，这有助于团队协作和代码维护。

Vue CLI的主要功能

Vue CLI的主要功能如下：

1. 生成项目结构：Vue CLI可以根据开发者的选择，生成不同类型的项目结构。
2. 配置构建环境：Vue CLI提供了丰富的配置选项，可以定制构建环境，如选择不同的构建工具（Webpack、Rollup等）。
3. 构建和优化：Vue CLI可以帮助开发人员优化构建设置，从而提高应用的加载速度和性能。
4. 开发工具支持：Vue CLI集成了许多开发工具，如热重载（Hot Reload）、代码检查（Linting）等，提高开发效率。
5. 项目部署：Vue CLI提供了命令来构建生产环境版本，并可以生成部署所需的静态文件。

检查系统要求

在安装Vue CLI之前，需要确保系统满足以下要求：

• 操作系统：Windows、macOS、Linux
• Node.js版本：8.9.4或更高版本
• npm版本：5.6.0或更高版本
• 其他依赖：Python版本2.7或更高版本（仅Windows）

安装Node.js和npm

1. 访问Node.js官方网站，下载并安装最新版本的Node.js。
2. 安装过程中，确保勾选“Install npm”选项，以便安装Node.js的包管理器npm。

全局安装Vue CLI

在安装完Node.js和npm后，通过以下命令全局安装Vue CLI：

npm install -g @vue/cli

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

vue --version

如果命令返回Vue CLI的版本号，说明安装成功。

创建项目实例

通过Vue CLI创建新项目时，可以通过命令行工具来完成。以下是创建项目的步骤：

1. 打开命令行工具，如命令提示符（cmd）或终端（Terminal）。

2. 使用vue create命令创建项目，例如：

   vue create my-vue-project

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

3. 如果第一次使用vue create，会提示是否使用默认预设（default preset）创建项目。输入y选择默认预设，或者输入n选择手动选择特性。

   如果选择手动选择特性，会引导你选择特性、预设模板等选项。

选择预设模板

在创建项目时，可以选择不同的预设模板。例如，可以选择manually select features选项，然后选择模板和特性：

Vue CLI v4.5.0
? Please pick a preset (Use arrow keys to navigate):
> default (babel, router, vuex, css preprocessor)
  manual...

选择完成之后，Vue CLI会根据选择的配置生成项目。以下是一个使用manually select features选项创建项目时的示例配置：

Vue CLI v4.5.0
? Please pick a preset (Use arrow keys to navigate):
  manual...

? Please select features that you want to include:
  ▸ Babel
  ▸ Router
  ▸ Vuex
  ▸ CSS Pre-processors
  ▸ Linter / Formatter
  ▸ Unit Tests
  ▸ E2E Tests

? Choose the package manager for this project
  ▸ npm
  ▸ Yarn

项目结构介绍

使用Vue CLI创建的项目具有统一的结构，以下是一个典型的项目结构：

my-vue-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock

• node_modules/：存放项目依赖的包。
• public/：存放静态资源，如index.html和favicon.ico。
• 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>

• main.js：应用的入口文件，示例代码如下：

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  
  Vue.config.productionTip = false
  
  new Vue({
  router,
  store,
  render: h => h(App)
  }).$mount('#app')

• package.json：项目的基本配置文件，包含项目的依赖和脚本。
• README.md：项目的说明文档。
• yarn.lock：如果使用Yarn管理依赖，则包含锁定的依赖版本。

启动开发服务器

使用Vue CLI创建的项目可以通过以下命令启动开发服务器：

npm run serve

启动后，服务器会监听localhost:8080，并在浏览器中打开应用。

访问项目

启动开发服务器后，可以在浏览器中访问项目。默认情况下，开发服务器会在http://localhost:8080/提供服务。

调试工具的使用

Vue CLI内置了一些调试工具，帮助开发者调试和优化应用，如热重载和代码检查。

热重载

Vue CLI的开发服务器支持热重载功能，即在保存代码后，浏览器会自动刷新显示最新的修改内容。

要启用热重载，在项目的package.json文件中找到scripts部分，确保如下设置：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

代码检查

Vue CLI集成了代码检查工具ESLint。可以通过以下命令启动代码检查：

npm run lint

ESLint会检查项目代码，如果有错误或警告，会输出相应的信息。

常用Vue CLI命令

以下是Vue CLI的一些常用命令：

• vue create <project-name>：创建新项目。
• npm run serve：启动开发服务器。
• npm run build：构建生产环境版本。
• npm run lint：运行代码检查。
• npm run test：运行单元测试。

配置项目设置

Vue CLI提供了多种配置文件来定制项目设置，如vue.config.js、.browserslistrc等。

vue.config.js

通过在项目根目录下创建vue.config.js文件，可以自定义构建配置。例如：

module.exports = {
  // 基本路径，根路径
  publicPath: '/',
  // 开发环境下的代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  // 自定义链式插件
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改 options 选项，比如：质量设置，文件名等
        return {
          ...options,
          quality: 85
        }
      })
  }
}

自定义构建配置

除了使用vue.config.js自定义项目配置，还可以通过命令行参数来配置构建环境。例如：

vue create --mode production my-vue-project

--mode参数可以指定构建模式，例如production或development。

构建生产环境版本

使用Vue CLI构建生产环境版本，可以通过以下命令：

npm run build

执行上述命令后，会在项目根目录生成一个dist文件夹，该文件夹包含了浏览器可以直接加载的静态资源。

部署到Web服务器

构建完成后，将dist文件夹中的静态文件部署到Web服务器。例如，可以将静态文件上传到Apache或Nginx服务器。

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

上述命令将dist文件夹中的所有文件传输到指定的远程服务器路径。

常见部署问题解决

404 Not Found错误

如果部署后遇到404错误，通常是由于服务器配置问题。确保服务器配置正确设置index.html为默认入口文件。

例如，在Nginx配置文件中设置：

server {
  listen 80;
  server_name example.com;
  root /path/to/dist;

  location / {
    try_files $uri /index.html;
  }
}

代码混淆和压缩

在生产环境中，可以通过Vue CLI配置来启用代码混淆和压缩，以减少文件大小并提高加载速度。在vue.config.js中配置：

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      usedExports: true,
      removeAvailableModules: true,
    },
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          keep_fnames: true,
        },
        extractComments: false,
      }),
    ],
  },
}

以上是Vue CLI入门教程的完整内容，通过本教程，希望读者能够快速上手使用Vue CLI搭建和部署Vue项目。