Vue.js - 05 使用 Vue CLI 新建项目，基于 Vue.js 2.x

环境

Ubuntu 版本信息：

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 22.04 LTS
Release:	22.04
Codename:	jammy

Node.js 和 NPM 版本信息：

$ node --version
v16.15.0
$ npm --version
8.5.5

VS Code 版本信息：

Version: 1.66.2
Commit: dfd34e8260c270da74b5c2d86d61aee4b6d56977
Date: 2022-04-11T07:49:24.808Z
Electron: 17.2.0
Chromium: 98.0.4758.109
Node.js: 16.13.0
V8: 9.8.177.11-electron.0
OS: Linux x64 5.15.0-27-generic

新建项目

使用 vue create [options] <app-name> 命令格式新建项目：

$ vue create hello-world

选择预设，此处选择 Manually select features（手动选择特性）：

Vue CLI v5.0.4
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features

勾选特性：

1. Babel
2. Router
3. CSS Pre-processors
4. Linter / Formatter

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

选择项目需要使用的 Vue.js 版本，此处选择 2.x：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 
  3.x 
❯ 2.x

选 Y（第 5 行）：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

选择 CSS 预处理器，此处选择 Sass/SCSS（第 7 行）：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors,
 Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Less 
  Stylus

选择 ESLint with error prevention only：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier

选择 Lint on save：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit (requires Git)

选择 In dedicated config files（在专用的配置文件中存放 Babel、ESLint 等）：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

选择 N，不保存预设（根据自己的需求）：

Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

项目创建成功：

Vue CLI v5.0.4
✨  Creating project in /home/mk/Documents/Vue.js/Projects/hello-world.
⚙️  Installing CLI plugins. This might take a while...


added 841 packages in 49s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 87 packages in 8s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project hello-world.
👉  Get started with the following commands:

 $ cd hello-world
 $ npm run serve

进入项目目录：

$ cd hello-world

查看结构：

$ ls -l
total 796
-rw-rw-r--   1 mk mk     73  6月  5 22:15 babel.config.js
-rw-rw-r--   1 mk mk    279  6月  5 22:15 jsconfig.json
drwxrwxr-x 563 mk mk  20480  6月  5 22:15 node_modules
-rw-rw-r--   1 mk mk    703  6月  5 22:15 package.json
-rw-rw-r--   1 mk mk 763125  6月  5 22:15 package-lock.json
drwxrwxr-x   2 mk mk   4096  6月  5 22:15 public
-rw-rw-r--   1 mk mk    323  6月  5 22:15 README.md
drwxrwxr-x   6 mk mk   4096  6月  5 22:15 src
-rw-rw-r--   1 mk mk    118  6月  5 22:15 vue.config.js
mk@mk-virtual-machine:~/Documents/Vue.js/Projects/hello-world$

使用 VS Code 打开项目：

启动应用

运行服务：

$ npm run serve

启动成功：

 DONE  Compiled successfully in 7429ms                                                                                                                                          10:21:03 PM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.88.128:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

根据提示，在本机使用浏览器访问 http://localhost:8080/，可以：

配置

参考：

1. Vue.js - 02 修改网站的标题
2. Vue.js - 03 修改网站的图标
3. Vue.js - 04 配置 vue.config.js 的 devServer

参考

Vue CLI 创建一个项目