第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解

第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
第Ⅰ章-III Vite 创建vue3 项目

一.自定义创建项目配置

选择自定义后

1. Babel: es6转es5
2. TypeScript:支持ts
3. Progressive Web App (PWA) Support:渐进式web应用
4. Router:路由
5. Vuex:管理状态
6. CSS Pre-processors：CSS预处理
7. Linter / Formatter：代码规范
8. Unit Testing：单元测试
9. E2E Testing：端到端测试

我们全部选择。

1.Use class-style component syntax?

是否使用Class风格装饰器？
选择y 意味着Vue Cli 会生成使用类风格组件语法的组件，使用ES6的类语法定义Vue组件而不是传统的对象语法。是代码更加结构后更具有可读性，更贴近面向对象编程。

//传统方式
export default{
    name:"MyComponent",
    data(){
        return{
            message:'Hello Vue!'
        };
    },
    methods:{
        greet(){
            alert(this.message);
        }
    }
}

//类风格组件方式
@Component
export default class MyComponent extends Vue{
    message='Hello Vue!';
    greet(){
        alert(this.message);
    }
}

@Component
export default class MyComponent extends Vue {
    message:string='Hello Vue!';
    greet():void{
        alert(this.message);
    }
}

2.Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills,

transpiling JSX)
使用Babel与TypeScript一起使用?
在项目中可以使用TypeScript,并Babel将用于转译你的代码，以支持一些现在语法特性，自动检测polyfills和转译JSX

3.Use history mode for router?

(Requires proper server setup for index fallback in production)

是否启用Vue Router 的History模式。
在这种模式下，URL将不会带有“#/”前缀，干净地显示路径。当用户方位任何URL时，服务器都必须返回你的应用程序主页，而不是404错误页面，以便Vue Router可以处理路由。这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

4.Pick a CSS pre-processor

(PostCSS, Autoprefixer and CSS Modules are supported by default)

选一个css编译器 sass 难点 less 简单点
我这边选择sass

5.Pick a linter / formatter config:

(Use arrow keys)
校验格式

• ESLint with error prevention only
  仅启用ESLint进行错误预防，不进行代码格式化
• ESLint + Airbnb config
  这个配置更加严格，涵盖了更多的代码检查规则，适用于需要高度一致性的可读性的项目。
• ESLint + Standard config
  是一种简洁的代码规则配置，它提供了一组通用的代码风格，适用一般项目。
• ESLint + Prettier
  同时启用ESLint进行代码规范检查和Prettier进行代码格式化。
  我这儿没有出现 TSLint，可能是官方推荐ESLint，因为ESLint提供了更丰富功能和更广泛的生态系统。

6.Pick additional lint features

代码检查方式

7.Pick a unit testing solution

Jest 适合中小型 或需要快速开发的 场景
Mocha+Chai 更加灵活，适合于大型项目或需要定制化测试框架的场景。

8.Pick an E2E testing solution

端到端测试解决方案

• Cypress
  适用于构建高质量的端到端测试套件。
• Nigtwatch.js
  适用于自动化浏览器行为，具有简单的API和内置的断言¹
• TestCafe
  无需额外安装和配置浏览器驱动程序 支持并发测试 自动等待 只能断言等

9.Where do you prefer placing config for Babel, ESLint, etc.?

vue-cli 一般来讲是将所有的依赖目录放在package.json文件里

10.Save this as a preset for future projects?

是否在以后的项目中使用以上配置？

二.文件结构

node_modules

npm或者yarn 等包管理器 自动生成的文件夹，用于存放项目所依赖的第三方库和工具。当你在项目中 安装了新的依赖时，他们会被下载并存放到这个文件夹中。

public

存放静态资源，图片 字体 图标等。不经过构建的全局静态文件。

favicon.ico

网站图标文件，通常显示在浏览器标签页的左侧，用于表示网站。

index.html

整个应用的入口文件

robots.txt

告诉搜索引擎的网络爬虫哪些页面可以抓取，哪些页面不能抓取。

• User-agent 指定对应的爬虫用户代理
• Disallow 指定不允许排重访问的URL路径
• Allow 指定允许爬虫的URL路径
• Sitemap 指定网站的XML格式 的Sitemap文件的URL

src

存放源码

assets

静态资源 适合放一些内部是用的资源，并且可以享受webpack的构建优化

comonents

存放项目中可复用的组件 .vue文件

router

存放路由的相关配置

store

存放Vuex 的相关配置和模块，用于管理应用的状态。

views

存放页面级组件，通常是多个组件组成

App.vue

应用的根组件，通常包含应用的整体布局和路由视图的渲染。

main.ts

应用文件的入口文件，负责创建 Vue实例，并且配置全局插件和其他全局设置。

registerServiceWorker.ts

用于注册Service Worker 定义Service Worker的文件路径 注册成功和失败的回调函数等。

Service Worker 作用

• 缓存资源 缓存图片 js css html 文件。
• 离线访问 在用户离线状态下浏览缓存资源。
• 推送通知 可以接收来自服务器端的推送通知。
• 后台同步 用户在离线状态下操作同步到服务器。
• 性能优化 通过缓存策略，预加载技术优化页面响应速度加载速度

shims-vue.d.ts

一个类型声明文件,用于告诉 TypeScript 编译器如何处理 Vue 的单文件组件(SFC)和其他自定义模块。

tests

测试文件夹

.gitignore

一个用于指定Git版本控制系统应忽略的文件和文件夹的文本文件。

babel.config.js

Babel的配置文件,作用于整个项目。
可以改写成ts

package.json

Node.js 项目的配置文件,用于描述项目的元数据和依赖关系。

tsconfig.json

TypeScript 编译器的配置文件，用于指定编译 TypeScript 代码时的编译选项和编译目标等信息。

vue.config.js

用于配置 Vue Cli项目的构建配置。通过这个文件，可以对项目的构建过程惊醒自定义配置，包括但不限于webpack,自定义构建流程，设置代理。
可以改写成ts

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

import {defineConfig} from '@vue/cli-service'
export default defineConfig({
    transpileDependencies:true
})

yarn.lock

yarn的锁文件，用于锁定项目的依赖版本。

---

1. 用于编写测试用例时进行断言的工具。断言时测试用例中的一种语句，用于验证预期结果与实际结果是否一致。提供一组方法或者函数，用于比较值检查条件是否为真，判断异常是否抛出等操作 以版主开发人员编写和执行测试用例。 ↩︎