likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 4

零、 章节目录

  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

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

二、 改用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这种文件格式的类型声明。

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

根目录创建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)(一、创建helloword项目)

黄色警告:解决参考

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

碎碎

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

//.gitignore
node_modules
转载自:https://juejin.cn/post/7349827135232884776
评论
请登录