教女朋友|表弟系列：vue3从菜鸟到独立开发-1前言女朋友不会vue3，我也不会，咋办？学呗，学会了再教她，还能怎么办

前言

女朋友不会vue3，我也不会，咋办？学呗，学会了再教她，还能怎么办？本系列也叫一人学会，全家前端系列。适合有一定前端vue2基础的人看。

另外实战是最好的学习，看一遍vue3文档后，直接去github拉个vue3项目照着写一遍，很快就会了（当然，遇到不懂的得弄懂）。

vue-cli

vue-cli官网

vue-cli，也叫vue脚手架，因为单纯的vue3虽然能开发项目页面，但除了写页面，我们还要进行接口请求的封装，项目打包等，所以vue-cli就诞生了，通过它我们可以直接一键安装项目大部分的必须品，非常方便。

1. 先安装vue-cli:

执行npm install @vue/cli -g， -g代表全局安装，这样你在任何地方都可以使用。

安装成功后，执行vue -V查看版本，4.x以上才支持vue3。

2. 创建vue3项目：

执行vue create projectName，projectName是项目名，自定义，执行后出现一系列配置：

第一个第二个是默认配置，第三个是自己选择配置，我们选第三个，回车是确定，空格是选择，我的选择如下：

解释下：

Babel：用于将es6转为es5，或者将一些es6的新特性转为大部分浏览器都能支持的代码，js每年都在更新，技术也在更新，新的特性需要浏览器去进行迭代升级支持，而一些浏览器升级比较慢，js的新特性又贼好用，所以为了省力的大佬们创建了Babel，大佬万岁。
TypeScript：很火的ts语言，和js类似，但它是强类型语言，具体参照这位大佬的解释与学习：ts保姆级教程，别再说你不会ts了。有了它，编码会清晰很多，而且提示也很友好。
Router：路由，必须的。
Vuex：数据状态管理插件，以防万一先装着。
CSS Pre-processors：css预处理器，比如我们常用的sass、less、stylus等。
Linter / Formatter：不推荐学习的时候装，它的功能是代码检测，规范你的代码，但是你要是编码规范不熟悉，或者对它不熟悉，简直就是恶心。后面可以单独自己装。

选择3.x，我们要学习vue3毕竟。

是否使用class风格的组件语法，如果你选择是，那么会给你装一个vue-class-component插件，这个插件可以让你这样开发组件(vue-class-component的github地址，它是vue3官网提供的插件，目前github5.8k的star，不过刚学习vue3不考虑，感觉会限制开发风格)：

<template>
  <div>
    <button @click="decrement">-</button>
    {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

// Define the component in class-style
@Component
export default class Counter extends Vue {
  // Class properties will be component data
  count = 0

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}
</script>