Vue2初始化工程

发表于 更新于 本文字数： 3.3k 阅读时长 ≈ 3 分钟

本教程已经默认你安装了npm以及node.js

01

1、安装VUE CLI

命令行输入以下指令安装vue cli：

1
npm install -g @vue/cli

安装后输入以下指令检验是否安装成功

1
npm ls -g

02

2、打开cmd，输入vue create [文件名]

02

3、手动选择功能

03

4、选择功能解释

04

  1. Babel：用于将现代 JavaScript 转换为向后兼容的版本，以便能够在旧版浏览器中运行。如果您使用现代 JavaScript 语法，建议选择此选项。

  2. TypeScript：使用 TypeScript 编写 Vue 应用程序。TypeScript 提供类型检查和更好的开发体验。如果您希望使用强类型系统，可以选择此选项。

  3. Progressive Web App (PWA) Support：使您的应用成为渐进式 Web 应用，支持离线访问、推送通知等。如果您计划构建一个需要离线访问的应用，建议选择此选项。

  4. Router：为您的应用启用 Vue Router，以便在不同的视图之间导航。如果您的应用需要多页面或路由功能，请选择此选项。

  5. Vuex：状态管理模式+库，用于 Vue.js 应用。如果您的应用需要集中管理状态，建议选择此选项。

  6. CSS Pre-processors：使用 Sass、Less 或 Stylus 等 CSS 预处理器。如果您希望使用预处理器来编写 CSS，选择此选项。

  7. Linter / Formatter：用于代码格式化和 linting，以确保代码质量和一致性。选择此选项有助于保持代码整洁和规范。

  8. Unit Testing：添加单元测试支持，通常使用 Jest 或 Mocha。如果您希望为应用编写单元测试，请选择此选项。

  9. E2E Testing：端到端测试支持，通常使用 Cypress 或 Nightwatch。如果您希望测试整个应用的工作流程，可以选择此选项。

5、选择 Vue.js 版本

05

  • 3.x: 最新的 Vue.js 版本，具有更好的性能和更强大的功能，推荐用于新项目。

  • 2.x: 较旧的 Vue.js 版本，虽然仍然被许多项目使用，但不建议在新项目中使用。

6、CLI 询问是否使用 class-style component syntax

06

如果选择 Y (Yes)，您的 Vue 组件将采用基于类的语法。具体来说，组件将使用 TypeScript 的 class 语法来定义。您可以使用 vue-class-component 和 vue-property-decorator 库来让类风格组件正常工作。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
tsimport Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  message: string = 'Hello World!';

  mounted() {
    console.log(this.message);
  }
}

优点:

  • 更符合面向对象编程的习惯，代码结构清晰。

  • 适合有面向对象编程经验的开发者，尤其是从 Java 或 C# 等语言转过来的开发者。

缺点:

  • 需要安装额外的库，如 vue-class-component 和 vue-property-decorator。

  • 在 Vue 2.x 的生态系统中，这种方式并不是默认的编码风格，所以需要一定的学习成本。

Non class-style (N)

如果选择 N (No)，您的 Vue 组件将继续使用标准的 Vue 2.x 组件语法，这是目前大多数 Vue 2.x 项目使用的传统方法。您将继续使用普通的选项式 API (Options API)，这也是 Vue 2.x 的默认方式。

示例代码：

1
2
3
4
5
6
7
8
9
10
tsexport default {
  data() {
    return {
      message: 'Hello World!',
    };
  },
  mounted() {
    console.log(this.message);
  },
};

优点:

  • 更直观，符合 Vue 2.x 的标准语法。

  • 没有额外的库依赖，语法简单易用。

缺点:

  • 对面向对象编程的支持较弱（但这对大多数项目来说不会成为问题）。

选择建议

  • 如果您更倾向于面向对象的编程风格，或者有使用 TypeScript 类的经验，可以选择 Y (Yes)。

  • 如果您更喜欢 Vue 2 的传统方式，或者只是简单的 Vue 开发，选择 N (No) 会更适合。

7、 是否在 TypeScript 中使用 Babel。

07

选择 “Y” (Yes)

如果您选择 Y (Yes)，这将启用 Babel 和 TypeScript 的结合使用，主要优点包括：

  1. 现代模式：能够使用现代 JavaScript 特性，如 async/await 和其他 ES6+ 语法。

  2. 自动检测 Polyfills：Babel 将根据目标浏览器自动添加所需的 Polyfills，确保更好的浏览器兼容性。

  3. 支持 JSX：如果您希望在 Vue 组件中使用 JSX 语法，这样的配置会很方便。

示例配置：

1
2
3
4
bash"@babel/preset-env": {
  "useBuiltIns": "entry",
  "corejs": 3
}

选择 “N” (No)

如果您选择 N (No)，则项目将只使用 TypeScript，而不使用 Babel。这意味着：

  1. TypeScript 的类型检查：TypeScript 的强类型系统将可用，但不会经过 Babel 的转译过程。

  2. 缺少某些现代 JavaScript 特性：可能无法直接使用某些现代 JavaScript 特性，取决于您所支持的目标环境。

示例配置：

1
2
3
4
json"compilerOptions": {
  "target": "es5",
  "module": "commonjs"
}

选择建议

  • 选择 “Y (Yes)”：

    • 如果您希望充分利用 Babel 的能力，确保您能够使用最新的 JavaScript 特性，且不想手动处理 Polyfills。
    • 如果您需要在 Vue 组件中使用 JSX，选择这个选项会很方便。

  • 选择 “N (No)”：

    • 如果您的项目更依赖于 TypeScript 的类型系统，并且不需要使用 Babel 的额外功能。
    • 如果您的项目需要更小的构建体积，且不需要 Polyfills 或现代特性支持。

8、选择使用 history mode for router

08

使用 History Mode (选择 Y)

如果您选择 Y (Yes)，这将启用 Vue Router 的历史模式，主要特点包括：

  1. 更干净的 URL：使用历史模式时，您的 URL 将不会包含哈希符号（#）。例如，您可以访问 /about 而不是 /#/about，这使得 URL 更加美观且更符合标准的 RESTful 路由设计。

  2. SEO 友好：因为没有哈希符号，搜索引擎更容易索引您的页面，这有利于提高您的网站在搜索引擎中的排名。

  3. 用户体验更佳：用户可以直接使用浏览器的后退和前进按钮，这对用户的体验是有帮助的。

然而，启用历史模式还需要您配置服务器以处理所有路由请求，确保当用户直接访问某个 URL 时，能够正确地返回应用的 index.html 文件。常见的配置包括：

  • Apache：在 .htaccess 中添加重定向规则。

  • Nginx：配置 server 块以确保所有请求指向 index.html。

不使用 History Mode (选择 N)

如果您选择 N (No)，将使用默认的哈希模式，主要特点包括：

  1. 不需要服务器配置：哈希模式不需要额外的服务器配置，所有路由请求都将自动处理。

  2. 简单易用：适合小型项目或临时应用。

  3. 可能不够美观：由于 URL 中会包含 # 符号，可能不太美观，且对 SEO 支持较差。

9、选择配置文件的位置

选择package.json

09

10、保存预设状态

选择No

09

11、接着输入cd 项目名 以及npm run serve即可打开项目

09

09

09