施工程找工程做哪个网站好,深圳网站制作建设服务公司,公司网站开发流程,高端企业网站源码【Vue3】工程创建及目录说明 背景简介开发环境开发步骤及源码 背景
随着年龄的增长#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来#xff0c;技术出身的人总是很难放下一些执念#xff0c;遂将这些知识整理成文#xff0c;以纪念曾经努力学习奋斗的日… 【Vue3】工程创建及目录说明 背景简介开发环境开发步骤及源码 背景
随着年龄的增长很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来技术出身的人总是很难放下一些执念遂将这些知识整理成文以纪念曾经努力学习奋斗的日子。本文内容并非完全原创大多是参考其他文章资料整理所得感谢每位技术人的开源精神。
简介
本文介绍如何创建 Vue3 前端工程并对自动创建的工程目录做个简单说明。
开发环境
分类名称版本操作系统WindowsWindows 11IDEVisual Studio Code1.91.1
开发步骤及源码
1 安装 Node.js本文使用的版本是 v20.15.1。
C:\...node -v
v20.15.12 升级 npm。
C:\...npm -v
10.7.0C:\...npm install -g npmadded 1 package in 15s22 packages are looking for fundingrun npm fund for detailsC:\...npm -v
10.8.23 配置 NPM 国内镜像源。
C:\... npm installadded 62 packages, and audited 63 packages in 7m7 packages are looking for fundingrun npm fund for detailsfound 0 vulnerabilities4 打开 Visual Studio Code安装 Vue 官方插件。
5 创建 Vue3 工程。
PS D:\temp\VUE npm create vuelatest
Need to install the following packages:
create-vue3.10.4
Ok to proceed? (y) y npxcreate-vueVue.js - The Progressive JavaScript Framework√ Project name: ... vue3-demo
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / YesScaffolding project in D:\temp\VUE\vue3-demo...Done. Now run:cd vue3-demonpm installnpm run dev创建过程首先提示安装 create-vue 包然后填写工程名并配置各项工程依赖此处只配置了 TypeScript。
6 进入新创建工程的根目录执行 npm install 命令安装工程依赖。
PS D:\temp\VUE cd vue3-demo
PS D:\temp\VUE\vue3-demo npm install7 执行 npm run dev 启动工程。
PS D:\temp\VUE\vue3-demo npm run dev vue3-demo0.0.0 devviteVITE v5.3.4 ready in 1772 ms➜ Local: http://localhost:5173/➜ Network: use --host to expose➜ press h enter to show help8 浏览器访问 http://localhost:5173/。
9 已创建好的工程目录说明。 说明
.vscode此目录下只有一个文件 extensions.json是 Visual Studio Code 插件配置之前已安装 Vue 官方插件所以文件内容如下{recommendations: [Vue.volar]
}node_modules存放工程依赖包在执行 npm install 命令后才会有此文件夹。public脚手架根目录默认只有一个页签图片文件 favicon.ico。src源代码目录开发工作基本都集中在此目录中。src/assets存放工程静态资源文件。src/components存放 Vue 组件。src/App.vueVue 根组件其他所有 Vue 组件都是其子组件。src/main.ts应用入口文件负责初始化 Vue 应用并将其挂载到 DOM 上。.gitignoreGit 配置文件用于配置哪些文件/文件夹不需要提交到代码仓。env.d.ts类型声明文件declaration file把 node_modules 中 vite 文件夹下 client 客户端类型声明文件导入到这个文件里此文件无需修改也不能删除。index.htmlVite 入口文件与 webpack 不同webpack 的入口文件是 main.ts / main.js。package-lock.json锁定安装时的包的版本号需要上传 Git 以保证其他人在执行 npm install 时大家的工程依赖保证一致。package.json定义项目依赖与配置。README.md工程描述文件。tsconfig.app.jsonTypeScript 配置文件为前端 Vue 应用提供了一套合理的默认 TypeScript 编译设置通过继承、文件包含或排除规则和编译器选项来优化开发和构建过程。保持默认生成不要修改。tsconfig.jsonTypeScript 项目核心配置文件提供了对 TypeScript 编译器的全局设置并决定了如何编译 TypeScript 源代码。保持默认生成不要修改。tsconfig.node.jsonTypeScript 配置文件专门用于配置 TypeScript 在 Node.js 环境下的行为。保持默认生成不要修改。vite.config.tsVite 项目配置文件用来配置构建选项和插件。
