程序员scholar
  • Vue全家桶
  • Vue2
scholar
2024-07-30
目录

vue-cli

# vue-cli

# 1. 单页面应用程序（SPA）

单页面应用程序（Single Page Application，简称 SPA）是指在一个 Web 网站中只有一个 HTML 页面，所有的功能与交互都在这个唯一的页面内完成。

# 1-1 单页面应用程序的特点

单页面应用程序将所有功能局限于一个 Web 页面中。页面初始化时会加载相应的资源（HTML、JavaScript 和 CSS）。一旦页面加载完成，SPA 不会因为用户操作而重新加载或跳转页面，而是通过 JavaScript 动态地变换 HTML 的内容，从而实现页面与用户的交互。

# 1-2 单页面应用程序的优点

  1. 用户体验好：页面切换快，无需重新加载整个页面。
  2. 前后端分离：前端通过 Ajax 请求数据，后端只提供 API 接口。
  3. 更好的资源利用：只加载一次资源文件，减少服务器负载。

# 1-3 单页面应用程序的缺点

  1. 首屏加载时间长：初次加载时需要下载大量资源。
  2. 不利于 SEO：搜索引擎难以抓取动态加载的内容。
  3. 前进后退管理复杂：需要自己管理浏览历史和页面状态。

# 1-4 如何快速创建 Vue 的 SPA 项目

Vue 提供了 vue-cli 工具，可以快速创建工程化的 Vue 项目。下面将详细介绍使用 vue-cli 创建 Vue SPA 项目的步骤。

# 2. 什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具，简化了程序员基于 webpack 创建工程化 Vue 项目的过程。vue-cli 让程序员专注于应用开发，而不必花费大量时间配置 webpack。

Vue CLI 中文官网：https://cli.vuejs.org/zh/ (opens new window)

# 3. 安装和使用 vue-cli

# 3-1 安装 vue-cli

vue-cli 是 npm 上的一个全局包，可以通过 npm install 命令安装到本地电脑上。

# 使用 npm 安装 vue-cli
npm install -g @vue/cli

# 查看vue-cli的版本，检验vue-cli是否安装成功
vue --version
1
2
3
4
5

如果 在PowerShell 中执行 vue --version 命令 提示如下的错误消息：

image-20230801005039422

解决方案如下：

  • ① 以管理员身份运行 PowerShell

  • ② 执行 set-ExecutionPolicy RemoteSigned 命令

  • ③ 输入字符 Y ，回车即可

image-20230801005053528

# 3-2 使用命令创建 Vue 项目

安装完成后，可以使用 vue-cli 快速生成一个工程化的 Vue 项目。

# 创建一个新的 Vue 项目
vue create my-project
1
2

在执行命令后，会提示选择预设配置，可以选择默认配置或手动选择配置项。

步骤1：在终端下运行 vue create my-project 命令，基于交互式的命令行创建 vue 的项目：

202407291811176_美图设计室AI消除_20240802

步骤2：选择要安装的功能：

202407291811177_美图设计室AI消除_20240802

步骤3：使用上下箭头选择 vue 的版本，并使用回车键确认选择

202407291811178_美图设计室AI消除_20240802

步骤4：使用上下箭头选择要使用的 css 预处理器，并使用回车键确认选择：

202407291811179_美图设计室AI消除_20240802

步骤5：使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择：

202407291811180_美图设计室AI消除_20240802

步骤6：是否将刚才的配置保存为预设：

202407291811181_美图设计室AI消除_20240802

步骤7：选择如何安装项目中的依赖包：

202407291811182_美图设计室AI消除_20240802

步骤8：开始创建项目并自动安装依赖包：

202407291811183_美图设计室AI消除_20240802

步骤9：项目创建完成：

202407291811184_美图设计室AI消除_20240802

# 3-3 使用图形化界面创建 Vue 项目

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui
1

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

使用图形向导来创建 Vue 项目，如下图，输入项目名：

选择手动配置项目：

添加 Vue Router 和 Vuex：

选择版本，创建项目（这里使用的 Vue 2 版本）：

# 4. 使用Vue脚手架(CLI)

在工程化的 Vue 项目中，Vue 的主要任务是通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

# 4-1 项目结构

一个典型的 Vue 项目结构如下：

image-20240730205110194

# 4-2 Vue 项目开发流程

image-20240730205241400

image-20240730205313740

注意

<template> 标签内部的所有内容必须嵌套在一个唯一的根元素中，通常我们会使用一个 <div> 标签来包裹所有的内容。

# 4-3 运行流程解析

# 4-3-1 index.html

HTML 模板文件，包含一个根节点 <div id="app"></div>，Vue 实例将会挂载在这里。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div> <!-- Vue 实例将挂载在这个 div 上 -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

# 4-3-2 main.js

项目的入口文件，创建 Vue 实例，配置路由和 Vuex，并挂载到 #app 上。

import Vue from 'vue'; // 导入 Vue 框架
import App from './App.vue'; // 导入 App 组件
import router from './router'; // 导入路由配置
import store from './store'; // 导入 Vuex 状态管理

Vue.config.productionTip = false; // 关闭生产模式下的提示

new Vue({
  router, // 注入路由配置
  store, // 注入 Vuex 状态管理
  render: h => h(App), // 渲染 App 组件
}).$mount('#app'); // 挂载 Vue 实例到 id 为 app 的元素上
1
2
3
4
5
6
7
8
9
10
11
12

这里的 $mount('#app') 方法是 Vue 实例挂载的另一种方式，与 el 属性的方式等效。

  • 使用 el 属性的方式：

    new Vue({
  el: '#app', // 挂载 Vue 实例到 id 为 app 的元素上
  router, // 注入路由配置
  store, // 注入 Vuex 状态管理
  render: h => h(App), // 渲染 App 组件
});
    1
    2
    3
    4
    5
    6

  • 使用 $mount('#app') 方法的方式：

    new Vue({
  router, // 注入路由配置
  store, // 注入 Vuex 状态管理
  render: h => h(App), // 渲染 App 组件
}).$mount('#app'); // 挂载 Vue 实例到 id 为 app 的元素上
    1
    2
    3
    4
    5

两者的区别在于，使用 el 属性时，Vue 实例会立即挂载到指定的 DOM 元素上，而使用 $mount 方法时，可以更灵活地控制 Vue 实例的挂载时机。

# 4-3-3 App.vue

主组件，包含项目的主要结构和逻辑。

<template>
  <div id="app">
    <h1>Welcome to Your Vue.js App</h1>
    <router-view></router-view> <!-- 路由出口 -->
  </div>
</template>

<script>
export default {
  name: 'App', // 组件的名称
  // 这里可以添加更多的配置，比如 data、methods、computed 等
};
</script>

<style>
/* 样式 */
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

export default { name: 'App' }; 是 ES6 模块语法，用于导出一个对象。在 Vue 组件中，export default 用来导出组件的配置对象，使得该组件可以在其他地方被引入和使用。

# 4-3-4 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); // 使用 VueRouter 插件

const routes = [
  { path: '/', component: Home }, // 定义首页路由
  { path: '/about', component: About }, // 定义关于页面路由
];

const router = new VueRouter({
  mode: 'history', // 使用 HTML5 模式的路由
  routes, // 注入路由配置
});

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 4-3-5 store/index.js

Vuex 状态管理配置文件，用于管理全局状态。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex); // 使用 Vuex 插件

export default new Vuex.Store({
  state: {
    count: 0 // 定义初始状态
  },
  mutations: {
    increment(state) {
      state.count++; // 定义增加 count 的 mutation
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // 定义增加 count 的 action
    }
  },
  getters: {
    count: state => state.count // 定义获取 count 的 getter
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在以上流程中：

  1. index.html：中预留了一个 id 为 app 的元素，用于挂载 Vue 实例。
  2. main.js：文件中创建了 Vue 实例，并将 router 和 store 注入到 Vue 实例中，同时将 App.vue 组件渲染到 #app 元素中。
  3. App.vue：是主组件，负责显示应用的主要内容，并包含一个 <router-view> 作为路由出口。
  4. router/index.js：定义了项目的路由配置，使用 VueRouter 插件管理不同页面组件的切换。
  5. store/index.js：定义了 Vuex 状态管理配置，用于管理全局共享的状态。

通过这种方式，Vue 项目实现了组件化、模块化和高效的状态管理。

总结

通过 vue-cli，开发者可以快速创建一个工程化的 Vue 项目。Vue 的 SPA 项目将所有功能局限于一个 Web 页面中，利用 JavaScript 动态地变换 HTML 内容，实现页面与用户的交互。通过理解 Vue 项目的运行流程，可以更好地组织和开发 Vue 应用。

# 5. 关闭 Vue 项目中的 ESLint 检查

在实际开发过程中，ESLint 可以帮助我们保持代码的一致性和质量。然而，对于初学者来说，ESLint 可能会带来许多困扰。在适当的时候关闭 ESLint 检查，可以让我们更专注于学习和开发。下面介绍几种方法来关闭 Vue 项目中的 ESLint 检查。

# 方案一：创建项目时不选择 ESLint

在使用 Vue CLI 创建项目时，不要选择 Linter / Formatter 选项。这将确保项目没有 ESLint 检查。

image-20240731184502468

# 方案二：删除 ESLint 相关依赖

如果你已经在项目中启用了 ESLint，可以通过删除 ESLint 相关依赖来关闭 ESLint 检查。

  1. 找到 package.json 文件：

    在项目根目录下找到 package.json 文件。

  2. 删除 ESLint 相关依赖：

    删除 devDependencies 中的以下依赖项：

    • eslint
    • eslint-plugin-vue
    • @vue/cli-plugin-eslint

    image-20240731184637547

  3. 重新安装依赖：

    在终端中运行以下命令重新安装依赖：

    npm install
    1

  4. 重启开发服务器：

    重新启动开发服务器，你会发现 .eslintrc.js 文件的作用已经失效。

# 方案三：通过 vue.config.js 配置 lintOnSave

vue.config.js 是一个可选的配置文件，如果项目根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

  1. 创建或更新 vue.config.js 文件：

    在项目根目录下创建或更新 vue.config.js 文件，并添加以下配置：

    module.exports = {
  lintOnSave: false
};
    1
    2
    3

    lintOnSave 选项说明：

    • false：关闭 ESLint 检查。
    • true 或 'warning'：ESLint 报错将作为编译警告输出。
    • 'default'：强制 ESLint 报错作为编译错误输出。
    • 'error'：ESLint 警告也作为编译错误输出。

    vue.config.js官网 (opens new window), 其中一条就关于配置eslint的。

  2. 重启开发服务器：

    保存更改后，重新启动开发服务器。

# 方案四：通过 .eslintrc.js 控制

通过修改 .eslintrc.js 文件来控制 ESLint 的行为。虽然这并不能完全关闭 ESLint 检查，但可以让 ESLint 更人性化地检测代码。

  1. 找到或创建 .eslintrc.js 文件：

    在项目根目录下找到或创建 .eslintrc.js 文件。

  2. 修改 .eslintrc.js 文件：

    添加或修改规则，使其更适合你的开发需求。例如：

    module.exports = {
  // 配置代码的运行环境
  env: {
    browser: true, // 浏览器环境
    es6: true, // 启用 ES6 语法
    node: true, // Node.js 环境
  },
  // 配置解析器选项
  parserOptions: {
    parser: 'babel-eslint', // 使用 babel-eslint 解析器
    ecmaVersion: 2020, // 指定 ECMAScript 的版本为 2020
    sourceType: 'module', // 指定代码的模块类型为 ES6 模块
  },
  // 配置 ESLint 规则的基础配置
  extends: [
    'eslint:recommended', // 使用 ESLint 推荐的规则
    'plugin:vue/essential', // 使用 Vue.js 的基本规则
  ],
  // 配置需要使用的插件
  plugins: [
    'vue', // 使用 vue 插件
  ],
  // 配置自定义的规则
  rules: {
    'no-console': 'off', // 关闭 no-console 规则，允许使用 console
    'no-debugger': 'off', // 关闭 no-debugger 规则，允许使用 debugger
    'vue/no-unused-components': 'off', // 关闭 vue/no-unused-components 规则，允许未使用的组件
    'vue/no-unused-vars': 'off', // 关闭 vue/no-unused-vars 规则，允许未使用的变量
    // 在此添加其他需要禁用或自定义的规则
  }
};
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31

方案总结

  • 方案一：最简单，直接在创建项目时不选择 ESLint。
  • 方案二：删除 ESLint 相关依赖，适用于已经启用 ESLint 的项目。
  • 方案三：通过 vue.config.js 配置 lintOnSave，灵活控制 ESLint 检查的开启和关闭。
  • 方案四：通过 .eslintrc.js 控制，调整 ESLint 的规则以适应你的开发需求。

# 6. 解决 VSCode中导入vue 组件路径提示问题

当在 VSCode 中进行 Vue 组件开发时，经常需要引入文件，但是没有路径提示。下面是详细的解决方法：

注意

  • 编写 Vue 项目时需要从根目录打开，否则会导致很多插件不能用。
  • 编写 Vue 项目时只打开一个项目，打开多个文件会导致很多插件不能用。

步骤一：安装 Path Autocomplete 扩展

  1. 打开 VSCode。
  2. 点击左侧的扩展图标（或者使用快捷键 Ctrl+Shift+X）。
  3. 在搜索框中输入 Path Autocomplete。
  4. 点击安装。

image-20240731190539264

步骤二：配置 Path Autocomplete

  1. 安装完成后，点击左下角的齿轮图标。
  2. 点击设置。

image-20240731190827523

  1. 在设置页面中，点击右上角的配置按钮。

image-20240731191028068

  1. 复制以下代码：

    // 导入文件时是否携带文件的拓展名
"path-autocomplete.extensionOnImport": true,
// 配置 @ 的路径提示
"path-autocomplete.pathMappings": {
    "@": "${folder}/src"
},
    1
    2
    3
    4
    5
    6

  2. 将这段代码粘贴到设置的顶部，并保存。

粘贴代码并保存

设置完成后，你在编写 Vue 项目时引入文件就会有路径提示了。确保每次只打开一个项目，并从根目录打开项目，以保证插件的正常使用。

效果展示

设置效果

现在，你已经成功配置了 VSCode 的路径提示功能，可以更方便地进行 Vue 项目开发了。

编辑此页 (opens new window)
上次更新: 2025/01/30, 23:55:43
计算属性（computed）
vue.config.js配置

← vue.config.js配置→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar