使用脚手架安装相关依赖

使用vueCli 安装预设的vuex+ts+less+router

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version

## 安装或者升级你的@vue/cli
npm install -g @vue/cli

## 创建
vue create vue3_cli_ts_htgl          //create vue3_cli_ts_htgl为自定义文件名

按方向键 ↓，选择Manually select features，enter

手动配置：是我们所需要的面向生产的项目，提供可选功能的 npm 包

手动配置，根据你需要用方向键选择（按 “空格键”选择/取消选择，A键全选/取消全选，i反选）对应功能

? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
( ) TypeScript // JavaScript的一个超集（添加了可选的静态类型和基于类的面向对象编程：类型批注和编译时类型检查、类、接口、模块、lambda 函数）
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
() Router // vue-router（vue路由）
() Vuex // vuex（vue的状态管理模式）
() CSS Pre-processors // CSS 预处理器（如：less、sass）
() Linter / Formatter // 代码风格检查和格式化（如：ESlint）
() Unit Testing // 单元测试（unit tests）
() E2E Testing // e2e（end to end）测试

我们选择如下

确认enter后，需要选择vue版本，选择3.x的版本然后继续确认

然后如下配置

是否使用class风格的组件语法：Use class-style component syntax?输入N

Vue CLI v4.5.15

? Please pick a preset: Manually select features

//检查项目所需的功能：选择 Vue 版本、Babel、TS、Router、Vuex、CSS 预处理器

? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors

//选择你想用 3.x 启动项目的 Vue.js 版本

? Choose a version of Vue.js that you want to start the project with 3.x

//是否使用class风格的组件语法

? Use class-style component syntax? No

//将 Babel 与 TypeScript 一起使用（现代模式、自动检测的 polyfill、转译 JSX 需要）

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

//路由器使用历史模式？（需要为生产中的索引回退正确设置服务器）否

? Use history mode for router? (Requires proper server setup for index fallback in production) No

//选择一个 CSS 预处理器（默认支持 PostCSS、Autoprefixer 和 CSS 模块）：Less

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less

//你更喜欢将 Babel、ESLint 等的配置放在哪里？在专用配置文件中

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

//将此保存为未来项目的预设？(是/否)

? Save this as a preset for future projects? (y/N) N

至此，配置完毕，桌面会出现一个vue3_cli_ts_htgl文件夹

默认项目解析

文件夹结构


├─ public
│  ├─ favicon.ico            //浏览器标签文件图标
│  └─ index.html             //总的入口文件
├─ src                                        
│  ├─ App.vue                   //根组件
│  ├─ assets                 //静态资源目录
│  │  └─ logo.png
│  ├─ components             //自定义组件目录（可删除）
│  │  └─ HelloWorld.vue
│  ├─ main.ts                                 //项目入口
│  ├─ router                                 //路由
│  │  └─ index.ts
│  ├─ shims-vue.d.ts         //ts声明文件，使ts识别.vue文件
│  ├─ store                  //vuex
│  │  └─ index.ts
│  └─ views                  //自定义路由组件目录（可删除）
│     ├─ About.vue
│     └─ Home.vue
└─ tsconfig.json             //ts的配置文件
├─ .browserslistrc                     //配置兼容浏览器
├─ .gitignore
├─ babel.config.js           //babel.config.js配置文件
├─ package-lock.json
├─ package.json
├─ README.md

默认文件内容

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{
    {
     msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script lang="ts">
import {
     defineComponent } from 'vue';

export default defineComponent({
    
  name: 'HelloWorld',
  props: {
    
    msg: String,
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
    
  margin: 40px 0 0;
}
ul {
    
  list-style-type: none;
  padding: 0;
}
li {
    
  display: inline-block;
  margin: 0 10px;
}
a {
    
  color: #42b983;
}
</style>

router->index.ts详解

使用 Vue Router 4 来创建一个基于 Vue 3 应用的路由配置

// 导入 Vue Router 的相关函数和类型
import {
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
// 导入 Home 组件
import Home from '../views/Home.vue'

// 定义路由配置数组
const routes: Array<RouteRecordRaw> = [
  {
    
    // 定义根路径的路由
    path: '/',
    name: 'Home', // 路由名称
    component: Home // 关联的组件
  },
  {
    
    // 定义 /about 路径的路由
    path: '/about',
    name: 'About', // 路由名称
    // 路由级别代码分割
    // 这将为该路由生成一个单独的 chunk (about.[hash].js)
    // 当访问该路由时会懒加载这个组件
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// 创建路由实例
const router = createRouter({
    
  // 使用 hash 模式的历史记录
  history: createWebHashHistory(),
  // 路由配置
  routes
})

// 导出路由实例
export default router

store->index.ts详解

下面的代码展示了如何使用 Vuex 4 创建一个简单的 Vuex store。Vuex 是 Vue.js 的官方状态管理库，适用于中大型单页面应用，通过集中式的存储管理应用的所有组件的状态。

import {
     createStore } from 'vuex'

// createStore: 调用该函数来创建一个 Vuex store 实例。
export default createStore({
    
  state: {
    
    // 定义全局状态
  },
  mutations: {
    
    // 定义更改状态的同步方法
  },
  actions: {
    
    // 定义包含业务逻辑的异步方法
  },
  modules: {
    
    // 定义模块化的子 store
  }
})

state: 用于存储应用的全局状态。

mutations: 定义更改状态的同步方法：mutations 是一个对象，其中包含多个函数，用于更改 state 中的数据。

Mutation 必须是同步函数，因为它们直接更改状态。

actions: 定义包含业务逻辑的异步方法：

actions 是一个对象，其中包含多个函数，用于执行异步操作或提交 mutation。
Action 函数接收一个包含 commit 方法的 context 对象，以及其他参数。
Actions 通常用于处理异步任务，然后通过 commit 方法调用 mutation 来更改状态。

modules: 用于将 store 分割成模块。

modules 是一个对象，可以包含多个子模块，每个子模块具有自己的 state、mutations、actions 和 modules。

App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<style lang="less">
#app {
    
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
    
  padding: 30px;

  a {
    
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
    
      color: #42b983;
    }
  }
}
</style>

main.ts详解

// 从 'vue' 导入 createApp 函数
import {
     createApp } from 'vue'
// 导入主应用组件 App
import App from './App.vue'
// 导入路由实例
import router from './router'
// 导入 Vuex store 实例
import store from './store'

// 创建一个 Vue 应用实例，并传入根组件 App
const app = createApp(App)

// 使用 Vuex store 插件
app.use(store)
// 使用 Vue Router 插件
app.use(router)
// 将 Vue 应用实例挂载到具有指定 id 的 DOM 元素上
app.mount('#app')

shims-vue.d.ts详解

/* eslint-disable */
declare module '*.vue' {
    
  import type {
     DefineComponent } from 'vue'
  const component: DefineComponent<{
    }, {
    }, any>
  export default component
}

shims-vue.d.ts 文件在 TypeScript 项目中有重要作用,这个文件用于告诉 TypeScript 如何处理 .vue 文件，从而避免类型错误。

eslint-disable用于禁用 ESLint 检查。因为这个文件主要是用来提供类型声明的，通常不需要进行代码风格检查。

declare module '*.vue':告诉 TypeScript，任何以 .vue 结尾的文件都应该被视为一个模块。这是一个模块声明，它使TypeScript 能够处理 .vue 文件。
import type { DefineComponent } from 'vue':从 vue 包中导入 DefineComponent 类型。这是 Vue 3 的一个内置类型，用于定义一个 Vue 组件。
const component: DefineComponent<{}, {}, any>:这里定义了一个常量 component，它的类型是 DefineComponent<{}, {}, any>。这意味着这个组件没有严格定义的 props、data 或者 methods 类型。

为什么需要这个文件？

类型安全:

- 提供 .vue 文件的类型定义，使 TypeScript 能正确识别和处理这些文件。
- 增加类型安全，减少运行时错误。

开发者体验:

- 提供更好的开发者体验，如自动补全和类型检查。

示例

假设你有一个简单的 Vue 组件 HelloWorld.vue：

<template>
  <div>{
    {
     msg }}</div>
</template>

<script lang="ts">
import {
     defineComponent } from 'vue'

export default defineComponent({
    
  props: {
    
    msg: String
  }
})
</script>

在没有 shims-vue.d.ts 文件的情况下，TypeScript 可能会报错，因为它不知道如何处理 .vue 文件。有了这个文件后，TypeScript 知道 .vue 文件是一个 DefineComponent，从而能够正确处理它们。

.browserslistrc详解

> 1%
last 2 versions
not dead

.browserslistrc文件的主要作用是配置项目的目标浏览器和Node.js版本范围，用于确定项目需要兼容的浏览器版本。

指定浏览器支持范围：.browserslistrc文件允许开发者明确列出项目需要支持的浏览器及其版本。这有助于确保前端代码在各种浏览器上都能正确运行，并提供良好的用户体验。
兼容性处理：该文件中的配置信息会被一些前端工具（如Babel、Autoprefixer等）读取。这些工具会根据指定的浏览器范围，对代码进行相应的编译或处理，以确保代码在目标浏览器上的兼容性。
配置参数解释：
- last 2 versions：表示支持所有浏览器的最后两个版本。
- 1%：表示支持全球市场份额超过1%的浏览器。
- not ie <= 8：表示不支持IE浏览器版本8及以下的版本。
- not dead：表示不支持已经停止维护或不再使用的浏览器。

babel.config.js详解

module.exports = {
    
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

babel.config.js 文件在 Babel 中起着配置 Babel 转换规则的关键作用。Babel 是一个广泛使用的 JavaScript 编译器，可以将现代（ES6+）的 JavaScript 代码转换为向后兼容的旧版本 JavaScript，以便在旧浏览器或环境中运行。

package.json

{
    
  "name": "vue3_cli_ts_htgl",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "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-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "typescript": "~4.1.5"
  }
}

tsconfig.json详解

{
    
  "compilerOptions": {
    
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
    
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

tsconfig.json 是 TypeScript 项目的一个核心配置文件，它用于指定编译 TypeScript 代码时所需的选项和设置。

常用配置选项

compilerOptions
- target：指定编译后的 JavaScript 代码应该符合的 ECMAScript 标准版本。如 "es5", "es2015", "esnext" 等。
  - module：指定生成的模块化代码的模块系统。如 "commonjs", "amd", "es6", "umd" 等。
  - outDir：指定编译后的 JavaScript 文件输出目录。
  - strict：启用严格的类型检查。
  - baseUrl：用于解析非相对模块名称的基本目录。
  - paths：指定模块的路径映射，用于模块解析。
  - allowJs：允许编译 JavaScript 文件。
  - sourceMap：是否生成 source map 文件，用于调试。
  - ...（其他编译选项，如 noImplicitAny, jsx, lib 等）
include
- 指定需要编译的文件路径或文件夹路径的 glob 模式。例如，"src/*/" 表示编译 src 目录下所有文件。
exclude
- 指定不需要编译的文件路径或文件夹路径的 glob 模式。例如，"node_modules" 和 "*/.spec.ts" 分别表示排除 node_modules 目录和所有 .spec.ts 文件。
files

明确指定需要编译的文件列表。当使用 include 和 exclude 时，这个选项通常不需要。

extends
- 指定继承自另一个 tsconfig.json 文件，允许配置文件之间的继承。
compileOnSave（已弃用）
- 指定是否在保存文件时自动编译。注意，这个选项在较新的 TypeScript 版本中已被弃用。
references

使用项目引用，可以将一个项目作为另一个项目的依赖。

angularCompilerOptions
- 针对 Angular 项目的特殊编译器选项。

vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！

使用脚手架安装相关依赖

默认项目解析

文件夹结构

默认文件内容

HelloWorld.vue

router->index.ts详解

store->index.ts详解

App.vue

main.ts详解

shims-vue.d.ts详解

.browserslistrc详解

babel.config.js详解

package.json

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！

使用脚手架安装相关依赖

默认项目解析

文件夹结构

默认文件内容

HelloWorld.vue

router->index.ts详解

store->index.ts详解

App.vue

main.ts详解

shims-vue.d.ts详解

.browserslistrc详解

babel.config.js详解

package.json

热门文章

最新文章

相关课程

相关电子书