安装 Vue CLI

检查正确已经安装 Vue CLI

1
2
3
D:\sources\vue_repos>vue --version
'vue' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

出现以上提示时，表示还没有安装 Vue CLI， 则需要先安装 Vue CLI

安装 Vue CLI

执行命令：npm install -g @vue/cli

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
D:\sources\vue_repos>npm install -g @vue/cli
npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> yarn@1.22.10 preinstall C:\Users\Laohoo\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

C:\Users\Laohoo\AppData\Roaming\npm\vue -> C:\Users\Laohoo\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

> core-js@3.8.1 postinstall C:\Users\Laohoo\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> @apollo/protobufjs@1.0.5 postinstall C:\Users\Laohoo\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\@apollo\protobufjs
> node scripts/postinstall


> nodemon@1.19.4 postinstall C:\Users\Laohoo\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> ejs@2.7.4 postinstall C:\Users\Laohoo\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN @vue/compiler-sfc@3.0.4 requires a peer of vue@3.0.4 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/cli@4.5.9
added 1347 packages from 699 contributors in 72.435s

使用 Vue CLI 创建项目

  1. 执行命令：vue create book-store-app
1
2
3
4
D:\sources\vue_repos>vue create book-store-app
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes
   ( 是否选择使用 tabbao 源来加快安装速度，回答: y)

此处使用了 yarn 包管理工具，如果没有安装 yarn 将没有类似提示及选择

  1. 选择预设选项
1
2
3
4
5
Vue CLI v4.5.9
? Please pick a preset:
  Default ([Vue 2] babel, eslint)                    ( Vue2 默认选项)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)    ( Vue3 默认选项)
> Manually select features             (手动选择功能，选择这一项，回车)
  1. 手动选择功能（星号表示选中该项； 空格用于 选择/取消 ）
1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version       (选择版本)
 (*) Babel                    (编码转换)
 ( ) TypeScript               (TypeScript 开发支持)
 ( ) Progressive Web App (PWA) Support  (渐进式网页支持，国内网络目前对这一项支持不好)
 (*) Router                   (路由功能)
 (*) Vuex                     (状态管理)
 ( ) CSS Pre-processors       (CSS预处理)
>( ) Linter / Formatter       (代码规范)
 ( ) Unit Testing             (单元测试)
 ( ) E2E Testing              (ESE测试)
  1. 选择 Vue 2.x 版本
1
2
3
4
5
6
Vue CLI v4.5.9
? 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)
  1. 路由是否使用 history 模式，选择 n
1
2
3
4
5
Vue CLI v4.5.9
? 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
  1. Babel, ESLint等配置使用专用配置文件或使用 package.json
1
2
3
4
5
6
7
8
Vue CLI v4.5.9
? 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
  1. 是否保存选项到预设中
1
2
3
4
5
6
7
Vue CLI v4.5.9
? 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)
  1. 所有选项以及安装过程
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
Vue CLI v4.5.9
? 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.9
✨  Creating project in D:\sources\vue_repos\book-store-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.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" 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 16.82s.
🚀  Invoking generators...
📦  Installing additional dependencies...

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

📄  Generating README.md...

🎉  Successfully created project book-store-app.
👉  Get started with the following commands:

 $ cd book-store-app
 $ yarn serve

安装 vuetify 和 leancloud SDK

进入项目文件夹

1
cd book-store-app

安装 vuetify

输入命令：vue add vuetify

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
D:\sources\vue_repos\book-store-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.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" 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.8
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.8
Done in 6.29s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)   (选择预设，使用方向键)
> Default (recommended)               (默认值，推荐 -- 选择这一项)
  Prototype (rapid development)       (原型， 快速开发)
  Configure (advanced)                (配置，高级)

安装 leancloud SDK

输入命令： npm install leancloud-storage --save --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
D:\sources\vue_repos\book-store-app> npm install leancloud-storage --save  --registry https://registry.npm.taobao.org
npm WARN deprecated 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.
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: joi is leaving the @hapi organization and moving back to 'joi' (https://github.com/sideway/joi/issues/2411)
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN rm not removing D:\sources\vue_repos\book-store-app\node_modules\.bin\semver.cmd as it wasn't installed by D:\sources\vue_repos\book-store-app\node_modules\semver
npm WARN rm not removing D:\sources\vue_repos\book-store-app\node_modules\.bin\semver as it wasn't installed by D:\sources\vue_repos\book-store-app\node_modules\semver
npm WARN rm not removing D:\sources\vue_repos\book-store-app\node_modules\.bin\json5.cmd as it wasn't installed by D:\sources\vue_repos\book-store-app\node_modules\json5
npm WARN rm not removing D:\sources\vue_repos\book-store-app\node_modules\.bin\json5 as it wasn't installed by D:\sources\vue_repos\book-store-app\node_modules\json5

> core-js@2.6.12 postinstall D:\sources\vue_repos\book-store-app\node_modules\@babel\runtime-corejs2\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js@3.8.1 postinstall D:\sources\vue_repos\book-store-app\node_modules\@vue\babel-preset-app\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@2.6.12 postinstall D:\sources\vue_repos\book-store-app\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall D:\sources\vue_repos\book-store-app\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: vue-loader-v16@npm:vue-loader@^16.0.0-beta.7 (node_modules\@vue\cli-service\node_modules\vue-loader-v16):
npm WARN notarget SKIPPING OPTIONAL DEPENDENCY: No matching version found for vue-loader-v16@16.1.1.
npm WARN @vue/babel-preset-app@4.5.9 requires a peer of core-js@^3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ leancloud-storage@4.8.2
added 162 packages from 87 contributors, removed 70 packages and updated 1097 packages in 72.668s

64 packages are looking for funding
  run `npm fund` for details

配置 leancloud SDK

创建文件夹: src\api\config\

创建并编辑文件： src\api\config\lc.config.js ， 内容如以下所示：

1
2
3
4
5
6
7
8
9
10
export default {
  //'这里填写 leancloud 的 appId',
  id: '9MCRS87WVkReLtNbQWbnllm9-********',

  // '这里填写 leancloud 的 appKey',
  key: 'zAfYTXaiXYGeQUm8********',

  // '这里填写 leancloud 的 REST API 服务器地址，国际版应用等未绑定自定义域名的此项留空'
  url: 'https://********.lc-cn-n1-shared.com',
}

以上部分内容已经用 星号 隐藏，请用自己的 leancloud 应用 key 代替以上三个内容

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
import LC from 'leancloud-storage';
import config from './config/lc.config';

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
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 ===