环境
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
勾选特性：
- Babel
- Router
- CSS Pre-processors
- 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/，可以：
配置
参考：