项目演示地址：https://hujiyi.github.io/acme-world-web/

前提条件

在创建项目前需要先安装下列应用程序

  1. node.js
  2. yarn (可选)
  3. @vue/cli
  4. Visual Studio Code (包含安装相应的扩展)
  5. Git (可选)

创建项目

包管理工具 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窗口中完成以下命令也是一样的）

提示: 如果电脑已经安装 Git, 也可以在右键菜单中选择 Git Bash Here, 在 Git Bash 命令窗口下执行命令.

创建项目

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

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

  • 在 Please pick a preset(请选择一个预设) 中选择 Manually select features(手动选择项目):
1
2
3
4
5
Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features
  • 在 Check the features needed for your project(检查项目所需的功能) 中选择以下几项：
    • Choose Vue version
    • Babel
    • Router
    • Vuex
1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v4.5.15
? 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

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

  • 在 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.15
? 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
  • 在 Use history mode for router?(路由使用history模式) 中回答 n，不使用 history模式 。

history模式 : 网址的中间不显示 # 号, 但需要服务器端支持. 如果项目最后需要部署到 Github Pages 或 Gitee Pages, 则不要使用 history模式;

hash模式: 网址的中间显示 #, 例如: http://localhost:8080/#/ 

1
2
3
4
5
Vue CLI v4.5.15
? 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.15
? 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。
1
2
3
4
5
6
7
Vue CLI v4.5.15
? 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)

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

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

  • 完成了创建项目的所有选项，创建项目的过程显示如以下：
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
PS D:\sources\vue_repos> vue create acme-world-app


Vue CLI v4.5.15
? 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.15
✨  Creating project in D:\sources\vue_repos\acme-world-app.
🗃  Initializing git repository...
⚙️  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.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" 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 20.52s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" 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.25s.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd acme-world-app
 $ yarn serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.

运行项目

进入创建好的项目文件夹

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

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

在 Visual Studio Code 中打开项目

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

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

1
PS D:\sources\vue_repos\acme-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": "acme-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
11
12
13
14
15
PS D:\sources\vue_repos\acme-world-app> yarn dev
yarn run v1.22.5
$ vue-cli-service serve --open
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4008ms 

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

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

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

添加 Element UI

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，提供了配套设计资源，帮助网站快速成型.

安装 Element UI

npm 安装

1
npm i element-ui -S

yarn 安装

1
yarn add element-ui

yarn 安装过程如下：

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
PS D:\sources\vue_repos\acme-world-app> yarn add element-ui
yarn add v1.22.5
[1/4] Resolving packages...
warning element-ui > async-validator > babel-runtime > core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" 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 8 new dependencies.
info Direct dependencies
└─ element-ui@2.15.6
info All dependencies
├─ async-validator@1.8.5
├─ babel-helper-vue-jsx-merge-props@2.0.3
├─ babel-runtime@6.26.0
├─ element-ui@2.15.6
├─ normalize-wheel@1.0.1
├─ regenerator-runtime@0.11.1
├─ resize-observer-polyfill@1.5.1
└─ throttle-debounce@1.1.0
Done in 6.71s.

引入 Element

编辑 src/main.js， 内容如以下代码所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';   // 导入ElementUI
import 'element-ui/lib/theme-chalk/index.css';  // 导入element ui 主题
import 'element-ui/lib/theme-chalk/display.css';  // 导入用于隐藏断点的样式

Vue.use(ElementUI);  //通过全局方法 Vue.use() 使用插件

Vue.config.productionTip = false;

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

使用 Leancloud

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

请提前到 leanclou.cn 注册一个账号。因 华北节点 的 文件服务 功能去年无法使用，建议选择使用 华东节点。

安装 leancloud SDK

在控制台输入命令：yarn add leancloud-storage

安装过程显示如以下:

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
PS D:\sources\vue_repos\acme-world-app> yarn add leancloud-storage
yarn add v1.22.5
[1/4] Resolving packages...
warning leancloud-storage > leancloud-realtime > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning leancloud-storage > @leancloud/platform-adapters-node > @leancloud/adapters-superagent > superagent > formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "win32" is incompatible with this module.
info "fsevents@2.3.2" 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 35 new dependencies.
info Direct dependencies
└─ leancloud-storage@4.12.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.13
├─ @types/ws@7.4.7
├─ ascli@1.0.1
├─ 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.3
├─ crypt@0.0.2
├─ event-target-shim@5.0.1
├─ eventemitter3@2.0.3
├─ fast-safe-stringify@2.1.1
├─ formidable@1.2.6
├─ 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.7
├─ leancloud-storage@4.12.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
├─ superagent@5.3.1
├─ underscore@1.13.1
└─ window-size@0.1.4
Done in 7.98s.

添加 leancloud SDK 配置文件

如果还没有 leancloud 账号，请参考本教程的第六部分 使用 Element UI 和 Leancloud 的 Vue.js 项目开发 VI：实现用户注册、登录、找回密码, 在 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 SDK 初始化

编辑文件：src/main.js, 内容如以下代码所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';   
import 'element-ui/lib/theme-chalk/index.css';  
import 'element-ui/lib/theme-chalk/display.css'; 

Vue.use(ElementUI);  
require('./api/init.js');  // 导入并执行 LeanCloud SDK 初始化

Vue.config.productionTip = false;

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

Moment.js 和 Marked

Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。

安装 Moment.js

npm 安装

1
npm install moment -S

yarn 安装

1
yarn add moment

安装 Marked

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。 Marked 是一个高效的 Markdown 解析器。

npm 安装

1
npm install marked -S

yarn 安装

1
yarn add marked

moment.js 和 marked.js 安装完毕待用。

使用 font-awesome-4.7 图标

Element UI 自带的图标少，也不好看，这里使用 font-awesome-4.7 的图标

  1. 载 font-awesome-4.7 下载地址 代码到本地, 解压到当前项目的 src/assets 文件夹中。

  2. 编辑 main.js ，添加以下引用(和设置 moment 的语言地区一起)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';   
import 'element-ui/lib/theme-chalk/index.css';  
import 'element-ui/lib/theme-chalk/display.css'; 
import './assets/font-awesome-4.7.0/css/font-awesome.min.css';  // 导入 font awesome 图标
import moment from 'moment';        // 导入时期时间库

moment.locale('zh-cn');    // 设置时期时间的地区

Vue.use(ElementUI);  
require('./api/init.js');  

Vue.config.productionTip = false;

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

  1. 使用示例：http://www.fontawesome.com.cn/examples/

  2. 查找想要的图标：

后继内容：
使用 Element UI 和 Leancloud 的 Vue.js 项目开发 II

=== END ===