Vue3框架搭建:vue+vite+pina+typescript

一、使用vue-create创建一个vue3项目

仓库地址:GitHub - buguniao5213/LuArch: Front-end architecture

官方地址:GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project

原始目录结构如下:

vue3-project/
├── public/            # 静态资源目录,构建过程中会被直接复制,无需经过编译处理
│   ├── favicon.ico    # 网站图标
├── src/
│   ├── assets/        # 静态资源目录,包含图片、字体等未经过编译的文件
│   ├── components/    # 组件目录(.vue文件)
│   │   └── ...        # 各类组件目录
│   ├── router/        # 路由配置目录
│   ├── stores/        # 状态管理目录,此处使用pinia
│   ├── views/         # 主要页面目录
│   ├── App.vue        # 根组件,应用入口,通常包含路由视图和其他全局共享组件
│   └── main.ts        # 入口脚本,用于初始化Vue实例、引入并配置路由、状态管理等核心模块
├── .eslintrc.cjs      # Eslint 配置文件,用于定义项目的代码风格规范和错误检查规则
├── .gitignore         # Git忽略文件
├── .prettierrc.json   # Prettier 配置
├── index.html         # 入口HTML文件
├── package-lock.json  # npm 包管理器中用于锁定项目依赖版本的文件
├── package.json       # npm 包配置文件,包括项目依赖、脚本命令、项目信息等元数据
├── README.md          # 项目文档和说明文件,介绍项目结构、启动方式及注意事项等
├── tsconfig.app.json  # TypeScript 设置,为前端应用配置的
├── tsconfig.json      # TypeScript 项目的核心配置文件
├── tsconfig.node.json # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── tsconfig.vitest.json # TypeScript 设置,为 Vitest 测试框架配置的
├── vite.config.ts     # Vite配置文件
└── vitest.config.ts   # Vitest配置文件

二、框架开发目录:

1、axios封装

2、相关配置和说明,包括vite、eslint等

3、router封装(静态)

4、………………

5、………………

6、(先开发,后补充+链接)

Vue是用于构建用户界面的渐进式JavaScript框架Vite是一种新型前端构建工具,Vue + Vite框架结合了两者的优势,为前端开发提供了高效、便捷的开发体验。 ### Vue + Vite框架的特点 - **快速冷启动**:Vite利用浏览器原生ES模块导入的特性,无需打包即可快速启动开发服务器,避免了传统构建工具在启动时需要对整个项目进行打包的漫长等待时间。 - **即时热更新**:当修改代码时,Vite能够快速更新浏览器中的内容,无需重新加载整个页面,大大提高了开发效率。 - **按需编译**:Vite只在需要时对模块进行编译,而不是一次性编译整个项目,减少了不必要的编译时间和资源消耗。 - **集成Vue生态**:充分利用Vue的组件化开发、响应式数据绑定等特性,同时借助Vite的构建能力,提供了良好的开发体验。 ### Vue + Vite项目的原始目录结构 以Vue3 + Vite + Pina + TypeScript项目为例,原始目录结构如下: ```plaintext vue3-project/ ├── public/ # 静态资源目录,构建过程中会被直接复制,无需经过编译处理 │ ├── favicon.ico # 网站图标 ├── src/ │ ├── assets/ # 静态资源目录,包含图片、字体等未经过编译的文件 │ ├── components/ # 组件目录(.vue文件) │ │ └── ... # 各类组件目录 │ ├── router/ # 路由配置目录 │ ├── stores/ # 状态管理目录,此处使用pinia │ ├── views/ # 主要页面目录 │ ├── App.vue # 根组件,应用入口,通常包含路由视图和其他全局共享组件 │ └── main.ts # 入口脚本,用于初始化Vue实例、引入并配置路由、状态管理等核心模块 ├── .eslintrc.cjs # Eslint 配置文件,用于定义项目的代码风格规范和错误检查规则 ├── .gitignore # Git忽略文件 ├── .prettierrc.json # Prettier 配置 ├── index.html # 入口HTML文件 ├── package-lock.json # npm 包管理器中用于锁定项目依赖版本的文件 ├── package.json # npm 包配置文件,包括项目依赖、脚本命令、项目信息等元数据 ├── README.md # 项目文档和说明文件,介绍项目结构、启动方式及注意事项等 ├── tsconfig.app.json # TypeScript 设置,为前端应用配置的 ├── tsconfig.json # TypeScript 项目的核心配置文件 ├── tsconfig.node.json # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置 ├── tsconfig.vitest.json # TypeScript 设置,为 Vitest 测试框架配置的 ├── vite.config.ts # Vite配置文件 └── vitest.config.ts # Vitest配置文件 ``` ### 示例代码 以下是一个简单的Vue + Vite项目示例,展示了如何创建一个基本的Vue组件: `src/components/HelloWorld.vue` ```vue <template> <div> <h1>{{ message }}</h1> <button @click="changeMessage">Change Message</button> </div> </template> <script lang="ts" setup> import { ref } from &#39;vue&#39;; const message = ref(&#39;Hello, Vue + Vite!&#39;); const changeMessage = () => { message.value = &#39;Message changed!&#39;; }; </script> ``` `src/App.vue` ```vue <template> <div id="app"> <HelloWorld /> </div> </template> <script lang="ts" setup> import HelloWorld from &#39;./components/HelloWorld.vue&#39;; </script> <style scoped> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值