# 1、安装vue-cli脚手架，全局安装
// yarn
yarn global add @vue/cli
// npm
npm install -g @vue/cli

# 2、一次性安装3个vue-cli服务
// yarn
yarn global add @vue/cli @vue/cli-service-global @vue/cli-service
// npm
npm install -g @vue/cli @vue/cli-service-global @vue/cli-service
# 如果安装失败，可能是没有权限，`macbook` 命令行前加 `sudo`

# 安装完成后，需要配置环境变量，根据自己的nodejs目录进行配置路径
我的电脑-》右击-》属性-》高级系统设置-》环境变量-》系统变量-》Path-》编辑-》新建(赋值nodejs目录下的node_global路径)
D:\Program Files\nodejs\node_global\

# yarn
yarn global upgrade --latest @vue/cli
# npm
npm update -g @vue/cli

vue -V 或 vue --version

# VS Code中powershell无法运行cnpm, vue等命令
windows运行-》cmd-》输入powershell-》命令行输入：set-ExecutionPolicy RemoteSigned-》命令行输入：A-》回车-》重启VS code

# yarn
yarn global remove @vue/cli
# npm
npm uninstall vue-cli -g

# 1、创建一个项目
# 1.1、www.ouyangke.com 是目录名
vue create www.ouyangke.com

# 2、选择：用vue2，vue3，手动配置。 vue2，vue3除了基本语法， 还有下面2个功能
# 2.1、babel 把es6的语法，转成es5的语法，可以做到兼容
# 2.2、eslint 语法检查，约束你的代码习惯
please pick a preset：
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

# 3、手动选择功能：Choose Vue version、Babel、CSS Pre-processors
Check the features needed for your project:
  Choose Vue version                  // 版本
  Babel                               // 把es6的语法，转成es5的语法，可以做到兼容
  TypeScript                          // 由微软开发的自由和开源的编程语言，是 JavaScript 的一个超集，支持es6语法
  Progressive Web App (PWA) Support   // Web APP开发
  Router                              // 路由
  Vuex                                // 状态管理器
  CSS Pre-processors                  // css预处理器：三种流行的CSS预处理器：Sass、LESS 和 Stylus
  Linter / Formatter                  // 代码语法检查器(eslint)
  Unit Testing                        // 单元测试
  E2E Testing                         // e2e(端到端)测试

# 4、选择版本：3.x
Choose a version of Vue.js that you want to start the project with:
  2.x
  3.x

# 5、选择css预处理器版本：dart-sass，官方目前主力推dart-sass
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/Scss (with node-sass)
  Less
  Stylus

# 6、配置文件：In package.json
Where do you prefer placing config for Babel, ESlint, etc.?
  In dedicated config files   // 独立配置文件
  In package.json             // 放在package.json里

# 7、是否保持此项目配置：保存的话，起个名字
Save this as a preset for future projects?
  y   // 保存
  n   // 不保存

# yarn
yarn serve
# npm
npm run serve

// package.json文件中版本号的说明，安装的时候代表不同的含义：
"5.0.3"   表示安装指定的5.0.3版本
"~5.0.3"  表示安装5.0.X中最新的版本
"^5.0.3"  表示安装5.X.X中最新的版本
// 因为前端版本太随意了，所以要指定版本，可能1个小版本，就跟之前的不兼容了

{
    "name": "ouyangke",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-airbnb": "^5.0.2",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-vue": "^7.0.0",
        "lint-staged": "^9.5.0",
        "sass": "^1.26.5",
        "sass-loader": "^8.0.2"
    },
    "gitHooks": {
        "pre-commit": "lint-staged"
    },
    "lint-staged": {
        "*.{js,jsx,vue}": [
            "vue-cli-service lint",
            "git add"
        ]
    }
}

# 1、引入 vue 模块
import { createApp } from 'vue'
# 2、引入 App.vue 文件
import App from './App.vue'
# 3、引入 路由 模块
import router from './router'

# 4、createApp创建应用
# 4.1、(App) 参数，就是App.vue文件中的export default(默认导出的)
# 4.2、use() 使用Vue.js插件
# 4.3、mount() 组件挂载在DOM的ID元素上
createApp(App).use(router).mount('#app')

# 还有一些其他的链式方法：component（组件）、config（配置）、directive（指令）、mixin（混入）、provide（搭配Inject）、unmount（卸载）