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

零、 章节目录

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

一、创建hello world项目

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

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

arduino 复制代码
// index.js
console.log("hello world!");

脚本配置,添加启动命令

swift 复制代码
// 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配置文件 修改配置文件

json 复制代码
//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"] //排除路径
}

修改脚本配置

swift 复制代码
// 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

javascript 复制代码
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类型的代码。

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

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

json 复制代码
  "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

javascript 复制代码
npm i -D vite @vitejs/plugin-vue 

vite.config.ts

javascript 复制代码
    import vue from "@vitejs/plugin-vue";
    plugins: [vue()],

运行项目,成功!

黄色警告:解决参考

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

碎碎

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

arduino 复制代码
//.gitignore
node_modules
相关推荐
不想有bug的小菜鸟8 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238638 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559609 分钟前
前端代理,解决跨域问题讲解
前端
quitv14 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238123 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星24 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-44 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架