1. Vue CLI 客户端

三大组件

1、Vue @vue/cli

2、Vue @vue/cil-service

3、Vue @vue/cli-plugin

vue create

注意点：vue 项目名称不能包含大写字母。

预设 preset：

① TypeScrip 和 JavaScript（类比java平台：Java 和 kotlin）

② PWA：Progressive Web APP 渐进式WEB应用程序

③ CSS Pre-processors：Less、Sass

④ Unit Testing：单元测试

⑤ Babel：做浏览器脚本语言（Browser）兼容性辅助，将高级的JS代码编译成低级的JS代码。

⑥ Vuex：vue项目管理（Plugin）

⑦ ESlint：ECMA Script Lint 代码规范，格式校验。

Where do you perfer placing config for Babel，ESlint，etc. ?

in dedicated file. 在独立的文件中

  1. vue create help 查看vue选项指令
  1. vue ui  开启图形化界面

项目结构

  1. main.js  # 程序入口（webpack打包入口），引入各种的公共组件或者所需要使用的Plugin
  2.         （例如：vuex，vue-router，electron-builder）
  4. App.vue  # 根组件（唯一性）在main.js中被vm实例中的render函数所渲染
  5.         （render：粉刷 造成 翻译 致使 给予 表达）
  7. package.json  # npm 的配置文件，里面设置脚本和项目依赖的库
  9. package-lock.json  # 版本锁，控制项目依赖的版本和仓库来源
  11. .gitignore   # 配置在git提交项目代码的时需要忽略的文件或者文件夹
  13. babel.config.js # Babel 配置文件

package.json

  1. {
  2.   "name": "kingcard",       ## 项目名称
  3.   "version": "0.1.0",         ## 项目版本
  4.   "private": true,            ## 是否是私有项目
  5.   "scripts": {                ## 项目在生命周期中各个环节需要执行的脚本（简化）
  6.     "serve": "vue-cli-service serve",
  7.     "build": "vue-cli-service build",
  8.     "lint": "vue-cli-service lint",
  9.     "electron:build": "vue-cli-service electron:build",
  10.     "electron:serve": "vue-cli-service electron:serve",
  11.     "postinstall": "electron-builder install-app-deps",
  12.     "postuninstall": "electron-builder install-app-deps"
  13.   },
  14.   "main": "background.js",
  15.   "dependencies": {            ## 配置项目的模块包的依赖
  16.     "axios": "^0.22.0",
  17.     "core-js": "^3.6.5",
  18.     "electron": "^15.2.0",
  19.     "jsonp": "^0.2.1",
  20.     "less": "^4.1.2",
  21.     "vue": "^2.6.14",
  22.     "yarn": "^1.22.17"
  23.   },
  24.   "devDependencies": {        ## 配置项目的模块包的依赖（开发环境，不发布到生成环境production）
  25.     "@vue/cli-plugin-babel": "~4.5.0",
  26.     "@vue/cli-plugin-eslint": "~4.5.0",
  27.     "@vue/cli-service": "~4.5.0",
  28.     "babel-eslint": "^10.1.0",
  29.     "electron": "^13.0.0",
  30.     "electron-devtools-installer": "^3.1.0",
  31.     "eslint": "^6.7.2",
  32.     "eslint-plugin-vue": "^6.2.2",
  33.     "less-loader": "^7.3.0",
  34.     "vue-cli-plugin-electron-builder": "~2.1.1",
  35.     "vue-template-compiler": "^2.6.11"
  36.   },
  37.   "eslintConfig": {            ## 语法规范，格式校验的配置
  38.     "root": true,
  39.     "env": {
  40.       "node": true
  41.     },
  42.     "extends": [
  43.       "plugin:vue/essential",
  44.       "eslint:recommended"
  45.     ],
  46.     "parserOptions": {
  47.       "parser": "babel-eslint"
  48.     },
  49.     "rules": {
  50.       "vue/no-unused-components": "off"
  51.     }
  52.   },
  53.   "browserslist": [
  54.     "> 1%",
  55.     "last 2 versions",
  56.     "not dead"
  57.   ]
  58. }

在发布代码的时候，我们不会node_module也发布，会根据package.json文件执行终端npm install来下载我们需要的模块包。