Vue3 的项目搭建

最新推荐文章于 2024-08-08 15:22:23 发布
最新推荐文章于 2024-08-08 15:22:23 发布
阅读量343 收藏
点赞数
分类专栏： Web 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiao_sier/article/details/128557493
版权
本文介绍了如何使用VSCode编辑器和Volar插件，结合Vite打包工具来初始化一个Vue3项目。过程中涉及VueX状态管理、Vue-router路由、Node.js环境的安装。此外，还提到了使用stylus或sass进行CSS预处理，选择iView或Element3作为组件库，以及Axios用于网络请求，Eslint和Prettier确保代码规范，Git和commitizen协助代码管理和版本控制。最后讨论了发布部署的方案。
摘要由CSDN通过智能技术生成

使用工具：

  • VSCode + Volar ：编辑器和插件
  • Vite：打包工具
  • Vue3：
  • VueX：存储
  • NodeJs：环境

操作步骤：

  1. 安装Node.js
  2. 安装VsCode
  3. 安装 Volar
  4. 创建一个Vite的初始化项目
    1. npm init vite
    2. Project name 这一行 我们输入项目的名字
    3. Select a framework：选择 vue
    4. select a variant 选择JS/TS
    5. npm run dev
  5. 增加配置项
    1. 增加VueX 和 Vue-router 的命令： npm install vue-router@next vuex@next

架构组织在这里插入图片描述

  1. Css预处理工具stylus 或者 sass
  2. 组件库（iView、Element3）
  3. Axios 网络请求
  4. Eslint、Prettier 格式检查
  5. Git 以及 commitizen 代码管理以及日志规范
  6. 发布部署方案
xiao_sier
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite搭建vue3项目
09-06
在本文中，我们将深入探讨如何使用Vite搭建Vue 3项目。Vite是由Vue.js的作者尤雨溪创建的一个现代化的前端构建工具，它利用了浏览器原生的ES模块导入功能，提供了更快的开发环境启动速度和热更新体验。与传统的...
vue3项目搭建
helloaqr的博客
02-22 120
vue3项目搭建流程
Vue3项目搭建全过程
qq_52013792的博客
07-23 1万+
vue3项目搭建一条龙
创建Vue3项目(vue-cli，vite，create-vue)
最新发布
umin_的博客
08-08 911
记录一下vue3搭建项目的几种方法（vue-cli，vite，create-vue）更推荐vite安装，如果几种方法都尝试过的小伙伴应该会发现vite安装更加的快速推荐pnpm和yarn包管理器，安装速度杠杠的，可以学习一下。
手把手教你搭建vue3项目
weixin_43618130的博客
03-02 5万+
使用VUE3开发很久了，但一直没进行总结和记录，忙里偷闲整理搭建一套VUE3项目，正好记录一下，按照我的教程让你开启vue3之旅吧！
Vue3项目搭建教程
qq_39877681的博客
11-30 1722
Vue3项目搭建教程
Vue项目环境搭建详细总结
10-16
Vue项目环境搭建是一个关键步骤，对于前端开发者来说，掌握这一过程是非常重要的。本文将详细介绍如何在Windows环境下搭建Vue项目的开发环境，包括安装Node.js、npm、Vue CLI等工具，并指导如何创建一个Vue项目。 ...
Vue项目搭建 .xmind
06-28
Vue项目搭建 .xmind
springboot3+ vue3前后端分离项目搭建代码
04-05
总的来说，"springboot3+ vue3前后端分离项目搭建代码"是一个全面展示现代Web开发技术的实例，涵盖了后端服务、前端界面、以及二者之间的协作。对于想要学习或深入理解Spring Boot和Vue 3的开发者来说，这是一个极好...
vue3.0搭建项目文档
10-31
总的来说，Vue CLI 3使得Vue3.0项目搭建变得简单快捷。通过这个工具，开发者可以快速地开始开发，专注于编写业务逻辑，而不是配置环境。熟悉这些步骤和Vue3.0的新特性，将有助于你更好地利用Vue.js构建高性能的应用...
vue3项目搭建（学习记录）
2201_75553945的博客
05-24 92
如何三分钟，创建Vue3项目？
VUE3项目搭建笔记
weixin_50249353的博客
05-26 401
vue3的搭建
新建vue3.0 项目—步骤
L_15737525552的博客
10-21 1506
6、ESLint：提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多 —— 我选 ESLint + Prettier。2、自定义配置，根据你需要用箭头上下键选择（按 “空格键”选择/取消选择，A键全选/取消全选，I键进行反选）对应功能。3、我没有卸载旧版本的 vue-cli(1.x 或 2.x)，所以创建时需要选择2.0 还是 3.0。5、css预处理器（主要为css解决浏览器兼容、简化CSS代码 等问题） —— 我选 Less。2、安装vue-cli3.0。
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 7万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
Vue3项目搭建流程
冲冲冲
06-12 2020
git初始化：打开终端，执行命令git init（这里需要在vscode中打开Git Bash终端，而不是powershell）执行完成后会在项目目录生成一个.husky文件夹安装 lint-staged （依然在Git Bash终端执行此命令）配置// ... 省略 ...// ... 省略 ...修改 .husky/pre-commit 文件安装插件 pinia-plugin-persistedstate在stores下新建index.js。
Vue3实战教程：从概念到部署的完整项目搭建
A_Liyulong的博客
07-10 3599
太久没有进行从0到1进行项目搭建，日常的组件维护及组价的开发让我快忘记如何从头搭建一个完整的项目，正好借这个机会好好回忆下以往的知识。测试创建./store/user.ts，引入组件，打印效果例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
vue3组件传参
Agont_的博客
03-29 1203
props主要用于父组件向子组件通信。在父组件中通过用 :msg=“msg” 绑定需要传给子组件的属性值，然后再在子组件中用 props 接收该属性值。方法二：使用 setup 语法糖props中数据流是单项的，即子组件不可改变父组件传来的值在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。
❤ Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript（一）yarn 版本控制
林太白
06-28 2714
❤ Vue3+Pinia+Vant3/ElementPlus+typerscript项目搭建
vue3项目搭建推荐
08-23
- *1* *3* [Vue3项目搭建全过程](https://blog.csdn.net/qq_52013792/article/details/125950115)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值