假设各位的电脑已经安装好配置了相应的开发环境：

  1. node.js
  1. yarn
  1. @vue/cli
  1. Visual Studio Code

创建项目

包管理工具 npm 和 yarn

npm 和 yarn 都是包管理工具， npm 是node.js自带的，yarn 需要额外安装。在使用一段时间之后，我现在比较喜欢使用 yarn, 至于优点，网上列出来的主要有这么几个：速度快、安装版本统一、输出信息更简洁等等。

所以在下面的操作过程中，基本上就按照自己的习惯使用yarn 来完成，如果自己不习惯这个命令的话，也可以自行使用相应的 npm 命令来操作。只要得到的结果一样就可以了。

Vue.js 2.x 和 Vue.js 3.x 的选择

Vue.js 3.x 的正式版发布已经有一段时间了，而且和 Vue.js 2.x 相比变化非常大，这就导致了现在很多和 Vue.js配套的库，特别是和 UI 有关的库大部分都还没有来得及未完成新版本的适配。虽然以后肯定是会升级到 Vue.js 3.x，但就目前阶段来说，继续使用 Vue.js 2.x 来开发项目不失为一个明智的选择。

使用 @vue/cli 创建项目

打开Powershell窗口

首先，我在自己的电脑建了一个专门的文件夹 D:\sources\vue_repos 用来存放 Vue.js 项目。按住Shift键，然后在该文件夹空白处点鼠标右键，在弹出的快捷菜单中选择 在此处打开Powershell窗口(s)。（打开CMD窗口中完成以下命令也是一样的）

创建项目 mad-world-app

在Powershell窗口 中输入命令：vue create mad-world-app

mad-world-app 为项目名称，请把它替换为你自己的项目名。

  • 在 Please pick a preset(请选择一个预设) 中选择 Manually select features(手动选择项目):
1
2
3
4
5
Vue CLI v4.5.10
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

  • 在Check the features needed for your project()中选择以下几项：

    • Choose Vue version
    • Babel
    • Router
    • Vuex

取消原来默认选中的 Linter / Formatter(当然你已经会使用这一项就选上，不知道这一项是做什么的，最好不要选)

以下是选择后的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
>( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  • 在 Choose a version of Vue.js that you want to start the project with (Use arrow keys)(选择项目的 Vue.js 版本) 选择 2.x
1
2
3
4
5
6
Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)
  • 在 Use history mode for router?(路由使用history模式) 中回答 n，不使用history模式。(当然了，这一项目y或n都没有任何影响，只是个人的习惯而已)
1
2
3
4
5
Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? 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)n
  • 在Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) (选择Babel, ESLint 等等第三方包的配置文件) 中选择 In dedicated config files(在专用的配置文件中)
1
2
3
4
5
6
7
8
Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? 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) No
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
  • 在Save this as a preset for future projects? (保存刚才的选择到项目预设) 中回答 n。

以后建项目的时候如果确定回答和上面的完全一样的，也可以回答y，把刚才的选择项都存为一个预设，以后可以使用该预设完成项目的创建。

对于初学者来说，多做几次才能熟悉操作，所以建议不存预设，给自己一个练习的机会。

1
2
3
4
5
6
7
Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? 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) No
? 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
  • 完成了创建项目的所有选项，创建项目的过程显示如以下：
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
PS D:\sources\vue_repos> vue create mad-world-app


Vue CLI v4.5.10
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
? 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) No
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.5.10
✨  Creating project in D:\sources\vue_repos\mad-world-app.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "win32" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...

success Saved lockfile.
Done in 22.18s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "win32" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 5.81s.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd mad-world-app
 $ yarn serve

进入创建好的项目文件夹

根据项目创建完成后倒数第二行提示，输入命令：cd mad-world-app

1
2
PS D:\sources\vue_repos> cd mad-world-app
PS D:\sources\vue_repos\mad-world-app>

在 Visual Studio Code 中打开项目

方法一： 启动 Visual Studio Code， 选择打开文件夹, 选中D:\sources\vue_repos\mad-world-app 打开。

方法二： 在上一步使用命令进入项目文件夹的基础上，直接在命令行中输入：code .(code 和 . 之间至少有一个空格隔开 )， 则可以启动 Visual Studio Code 并打开当前的文件夹。(我比较喜欢这种打开方式。)

1
PS D:\sources\vue_repos\mad-world-app> code .

启动开发服务器的时候自动打开默认浏览器

在 Visudl Studio Code 打开 package.json 文件。其内容如以下代码所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "mad-world-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}

其中 第5行的scripts用于定义脚本命令：

1
2
3
4
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
},

在上面这个 scripts小节中，定义了两个脚本命令serve和build

  • 每一行冒号左边的名字是命令名称，可以通过类似 npm run serve或是 yarn serve 的方式在控制台运行。

  • 每一行冒号右边的内容侧是该命令执行时实际调用的脚本。

两个脚本命令的说明：

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting

复制 "serve": "vue-cli-service serve",那一行。并修改冒号左边的命令名称为 dev, 在冒号右边的脚本后加空格，再添加选择 --open(用于自动打开默认浏览器)，修改后的代码如以下所示：

1
2
3
4
5
"scripts": {
    "dev": "vue-cli-service serve --open",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

以后在项目的控制台中运行命令：yarn dev 或npm run dev 就可以启动开发服务器，并自动打开默认浏览器显示运行的结果了。

运行项目

在控制台输入命令：yarn dev, 项目运行成功后将看到内容如下：

1
2
3
4
5
6
7
8
9
10
DONE  Compiled successfully in 144ms


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

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

在自动打开的默认浏览器中，可以看到项目运行的结果如下图所示：

安装 Vuetify 和 leancloud SDK

开发 Vue.js 应用程序的时候，需要给程序做一个好看的界面，同时还需要后台服务器端。

应用程序界面这里选择使用 Vuetify 框架，同时使用 LeanCloud 为应用程序提供后端支持，免去自己开发后台服务器端，还有布置、管理服务器等诸多难题。

要使用 LeanCloud 的数据存储服务，需要先到 leancloud.cn 或 leancloud.app注册一个帐号，并创建应用。

在项目中添加 Vuetify

Vuetify 完全按照 Material Design specification 开发, 是一个用于 Vue.js 的 Material Design 组件框架, 语义化的 Material 组件非常方便使用。

在控制台输入命令：vue add vuetify

出现以下选项时，选择第一项：Default (recommended)(默认) 即可。

1
2
3
4
? Choose a preset: (Use arrow keys)
> Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

完整的安装命令过程如以下显示：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
PS D:\sources\vue_repos\mad-world-app> vue add vuetify

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "win32" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ vue-cli-plugin-vuetify@2.0.9
info All dependencies
├─ interpret@1.4.0
├─ null-loader@3.0.0
├─ rechoir@0.6.2
├─ shelljs@0.8.4
└─ vue-cli-plugin-vuetify@2.0.9
Done in 10.36s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "win32" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
Done in 10.99s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

使用 vue add vuetify 安装的 Vuetify 已经自动完成相应的配置，之后直接使用就可以了。

使用本地的图标和样式(可选)

(这一项不是必须的，内容待定)

安装 leancloud SDK

LeanCloud（原 AVOS Cloud） 是针对移动应用的一站式云端服务，专注于为应用开发者提供工具和平台, 这里使用 leancloud 的 数据存储功能来保存数据。

在控制台输入命令：yarn add leancloud-storage (在命令后面添加使用淘宝源的选项加快安装速度： --registry https://registry.npm.taobao.org)

安装过程显示如以下所示：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
PS D:\sources\vue_repos\mad-world-app> yarn add leancloud-storage
yarn add v1.22.5
[1/4] Resolving packages...
warning leancloud-storage > babel-runtime > core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
[2/4] Fetching packages...
info fsevents@2.3.1: The platform "win32" is incompatible with this module.
info "fsevents@2.3.1" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "vue-cli-plugin-vuetify > null-loader@3.0.0" has unmet peer dependency "webpack@^4.3.0".
warning " > vuetify-loader@1.6.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 37 new dependencies.
info Direct dependencies
└─ leancloud-storage@4.10.0
info All dependencies
├─ @leancloud/platform-adapters-browser@1.5.2
├─ @leancloud/platform-adapters-node@1.5.2
├─ @leancloud/platform-adapters-weapp@1.6.1
├─ @types/cookiejar@2.1.2
├─ @types/superagent@4.1.10
├─ @types/ws@7.4.0
├─ ascli@1.0.1
├─ babel-runtime@6.26.0
├─ base64-arraybuffer@0.1.5
├─ bytebuffer@5.0.1
├─ charenc@0.0.2
├─ code-point-at@1.1.0
├─ colour@0.7.1
├─ cookiejar@2.1.2
├─ crypt@0.0.2
├─ event-target-shim@5.0.1
├─ eventemitter3@2.0.3
├─ fast-safe-stringify@2.0.7
├─ formidable@1.2.2
├─ invert-kv@1.0.0
├─ javascript-state-machine@2.4.0
├─ lcid@1.0.0
├─ leancloud-realtime-plugin-live-query@1.2.0
├─ leancloud-realtime@5.0.0-rc.5
├─ leancloud-storage@4.10.0
├─ localstorage-memory@1.0.3
├─ long@3.2.0
├─ md5@2.3.0
├─ miniprogram-api-typings@2.12.0
├─ number-is-nan@1.0.1
├─ optjs@3.2.2
├─ os-locale@1.4.0
├─ protobufjs@5.0.3
├─ regenerator-runtime@0.11.1
├─ superagent@5.3.1
├─ underscore@1.12.0
└─ window-size@0.1.4
Done in 210.00s.

在项目中初始化 leancloud SDK

设置 leancloud 应用keys

在项目中创建文件夹：src/api/config/

再文件夹中创建文件：src/api/config/lc.config.js, 编辑其内容如以下代码：

1
2
3
4
5
6
7
8
9
10
11
export default {
    //'这里填写 leancloud 的 appId',
    id: '9MCRS87WVkReLtNbQWbnllm9-********',
  
    // '这里填写 leancloud 的 appKey',
    key: 'zAfYTXaiXYGeQUm8********',
  
    // '这里填写 leancloud 的 REST API 服务器地址，国际版应用等未绑定自定义域名的此项留空'
    url: 'https://********.lc-cn-n1-shared.com',
  }

以上部分字符已经改成了* 以隐藏真实的keys，请用自己的 leancloud 应用keys 中相应的内容替换以上三个值。

leancloud SDK 初始化

在项目中创建文件：src/api/init.js，编辑其内容如以下代码：

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
import LC from 'leancloud-storage';   // 导入 leancloud 数据存储模块
import config from './config/lc.config';  // 导入 leancloud 的应用keys

let initOptions;

if (config.url.trim() === '') {
    // url 为空的时候，访问国际版：leancloud.app
    initOptions = {
        appId: config.id,
        appKey: config.key,
    };
} else {
    // url 不为空的时候，访问国内版:leancloud.cn
    initOptions = {
        appId: config.id,
        appKey: config.key,
        serverURLs: config.url,
    };
}

// 执行 leanCloud 初始化
LC.init(initOptions);

// 导出模块
export default {}

在 main.js 中导入并执行 leancloud 初始化

编辑文件：src/main.js, 添加 leancloud 导入并执行初始化的代码如以下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

require('./api/init.js');  // 导入并执行 LeanCloud 初始化
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');

===END===