框架搭建（使用vite）(一、创建helloword项目)

零、 章节目录

1. helloword
2. 改造项目结构，增加前端项目必备组件。

一、创建hello world项目

npm init //初始化项目，创建nodejs项目的配置文件

根目创建index.js启动文件,

// index.js
console.log("hello world!");

脚本配置，添加启动命令

// package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node index.js"
  },

执行 npm run dev

二、 改用pnpm

参考：www.cnblogs.com/dylAlex/p/1...

全局安装npm install pnpm -g

查看版本pnpm -v//8.15.4

三、使用TS@5.4.2

全局安装npm install -g typescript

安装pnpm i typescript -D //typescript 5.4.2

根目录创建src文件夹，将启动文件移动进来，并改名为main.ts

终端执行：tsc --init 生成TS配置文件 修改配置文件

//tsconfig.json
{
  "compilerOptions": {
    /* Language and Environment */
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. 目标版本*/,
    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. 模块系统*/,
    "rootDir": "./src" /* Specify the root folder within your source files. 源代码目录 */,
    /* Emit */
    "outDir": "./dist" /* Specify an output folder for all emitted files. 输出目录*/,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["src/**/*"], //指定路径
  "exclude": ["node_modules"] //排除路径
}

修改脚本配置

// package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tsc && node dist/main.js"
  },

执行 npm run dev 输出hello world! ，成功！

四、 添加vue@3.4.21"

引入vue 并设置支持ts 的vue

改造 main.ts

import App from "./App.vue";
import { createApp } from "vue";
//引导程序
async function bootstrap() {
  const app = createApp(App);
  app.mount("#app");
}
bootstrap();

src文件夹下创建App.vue文件。

运行程序报错，原因是使用了TS，TS不识别*.vue，缺少*.vue这种文件格式的类型声明。

根目录创建types文件夹，添加module.d.ts,添加如下定义vue类型的代码。

declare module "*.vue" {
  import { DefineComponent } from "vue";
  const Component: DefineComponent<{}, {}, any>;
  export default Component;
}

修改tsconfig.json的include 添加制定路径"types/**/*.d.ts"

  "include": ["src/**/*", "types/**/*.d.ts"], //指定路径

运行程序，这个时候你会发现上面报错已经不存在，但是报Error: Cannot find module './App.vue',查看dist文件夹下只有一个main.js。

这里原因是没有编译vue，带出类构建工具的知识。

• typescript:如果遇到ts文件我们需要使用tsc将typescript代码转换为js代码。
• React/vue:安装react-compiler/vue-complier,将我们写的jsx文件或者.vue文件转换为render函数
• less/sass/postcss/component-style:我们需要安装less-loader，sass-loader等一些列编译工具
• 语法降级：babel--->将es的新语法转换旧版浏览器可以接受的语法。
• 体积优化：uglifyjs--->将我们的代码进行压缩编程体积更小性能更高的文件。
• ...

我们希望：

• 有一个东西能够帮你把tsc，react-compiler，less，babel，uglifyjs全部集成到一起
• 我们只需要关心我们写的代码就好了
• 我们写的代码一变化--->有人帮我们自动去tsc、react-compiler，less，babel，uglifyjs全部挨个走一遍--->js
• 构建工具就是这个东西，例如vite、webpack

五、 引入 vite @5.1.5

安装组件vite 及插件@vitejs/plugin-vue

npm i -D vite @vitejs/plugin-vue 

vite.config.ts

    import vue from "@vitejs/plugin-vue";
    plugins: [vue()],

运行项目，成功！

黄色警告：解决参考

自动打开浏览器：vite配置文件中添加server:{open: true}

碎碎

git 提交如何设置排除node_modules？ 答：根目录创建.gitignore 文件，添加吐下代码

//.gitignore
node_modules