项目初始化

基于环境版本

注意，因为需要使用最新的模板，所以 vue-cli 的版本在 4.5.13 以上：

node -v

v14.17.3

vue -V

@vue/cli 4.5.15 // 输出版本号

// 如果你需要升级版本，那么可以通过以下指令进行升级：
npm update -g @vue/cli

项目创建细节

// 利用 vue-cli 创建项目
vue create vue3-backstage

// 进入模板选择
Vue CLI v4.5.13
? 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 // 选择 vue 版本
 (*) Babel // 使用 babel
 ( ) TypeScript // 不使用 ts
 ( ) Progressive Web App (PWA) Support // 不使用 PWA
 (*) Router // 添加 vue-router
 (*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器
 (*) Linter / Formatter // 代码格式化
 ( ) Unit Testing // 不配置测试
 ( ) E2E Testing  // // 不配置测试

// ----------------------------------------------------------

 Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x // 选择 vue 3.0 版本

// ----------------------------------------------------------

 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n 
 // 不使用 history模式 的路由

// ----------------------------------------------------------

 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
  Sass/SCSS (with node-sass)
  Less
  Stylus

// ----------------------------------------------------------

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案
  ESLint + Prettier

// ----------------------------------------------------------

? Pick additional lint features:
 (*) Lint on save //
>(*) Lint and fix on commit  // 保存时 && 提交时，都进行 lint

// ----------------------------------------------------------

? 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? (y/N) n // 不存储预设

Vue3 的历史

vue@3.0 在 2020年9月18号 发布后，非常有名的 Composition API 提供的 setup 语法比较不好用，如下：

<template>
  <h1>{{ count }}</h1>
  <button @click="inc">增加</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 创建响应式数据 count
    const count = ref(0)

    // 创建修改数据的方法 inc
    const inc = () => {
      count.value ++
    }

    // return 一个对象用于在 template 中使用
    return {
      // template 中有 count，必须 return 出去
      count,

      // template 中要有改变 count的方法，必须 return 出去
      inc
    }
  }
}
</script>

任何想要在 template 模板中使用的响应时数据或者方法，都要在 setup 函数中进行 return 操作，同时响应式数据还要通过 ref 声明。

项目庞大后的复杂和维护会非常难。

于是，一个月后的 2020年10月28号，Vue 就提出一个 RFC，尝试废弃掉这种 setup 函数式语法。

将近一年后的 2021年8月5号，vue@3.2 的全新 composition API的语法标准 script setup，它的用法是酱紫的：

<template>
  <h1>{{ count }}</h1>
  <button @click="inc">增加</button>
</template>

<script setup>
import { ref } from 'vue'

// 定义响应式数据
const count = ref(0)

// 定义响应式方法
const inc = () => {
  count.value ++
}
</script>

package.json

{
  "name": "vue3-backstage",
  "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.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-plugin-router": "~4.5.15",
    "@vue/cli-plugin-vuex": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "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"
    ]
  }
}

初始目录结构

.
├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   └── views
│       ├── About.vue
│       └── Home.vue
└── yarn.lock