从零开始搭建vue3项目（一）创建基础框架

最新推荐文章于 2024-04-02 19:09:47 发布
最新推荐文章于 2024-04-02 19:09:47 发布
阅读量974 收藏 11
点赞数 14
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44996937/article/details/136615467
版权

闲谈

一般进入公司，都有大佬搭好的现成项目框架，其他人负责写页面，页面写多了发现无非是增删改查，就想着自己也鼓捣一个项目架子出来，总不能一直做个画图仔吧。人生的意义在于折腾。

一些说明

Node版本：18.19.0
为啥强调node版本呢？因为以前使用npm安装依赖时遇到过不少报错问题，究其原因，很大一部分是版本问题，就是node版本和所安装的依赖包版本不兼容，点名批评一下sass。
打包工具：webpack
UI组件库：element plus

创建项目

  1. 在本地文件夹找个目录，将用于存放项目代码
    在这里插入图片描述
  2. 在资源管理器的地址栏输入cmd，按下回车，可以在当前目录快速打开终端窗口
    在这里插入图片描述
  3. 输入以下命令创建项目
vue create vue_template

其中“vue_template”代表项目名
在这里插入图片描述
4. 按下回车后，进入到项目配置
在这里插入图片描述
5. 既是从零开始搭建，我们这里就选第三个，英文的意思是“手动选择要素
”，就是DIY呗，按下键盘的上下箭头按键可以切换，切到第三个，然后回车，会出现具体的配置
在这里插入图片描述

  • 默认选中了Babel和Linter/Formater，Babel是代码编译器，作用是将ES6代码转换成ES5代码，这个我们保留。
  • Lineter/Formater是和ESLint相关的，这里就不勾选了，包括其他的配置我们统统不勾选，后续自己在项目中配置。
  • 不过还是说明一下都是干嘛的
    在这里插入图片描述
  1. 我们只选择Babel，然后按下回车
    这里让选择vue版本，我们自然是选择3.0
    在这里插入图片描述
  2. 我们选择一个单独的文件放置Babel配置
    在这里插入图片描述
  3. 选择是否保存此次预设，就是我们上面进行的那些配置项，看你要不要保存下来，下回创建项目就不用再勾选一遍了，这里我就不保存了，输入“N”，然后回车。
    在这里插入图片描述
  4. 然后就开始搭建项目了，用vue create命令创建，会直接下载相关依赖，所以时间会比较长一些，出现以下情况，说明就成功创建好了一个项目。
    在这里插入图片描述
  5. 启动项目
  • 我们是在一个目录下运行的vue create命令，创建完后，会在该目录下生成一个以项目名命名的文件夹，要启动项目，就先cd到该文件夹下，然后运行npm run serve 启动项目。
    在这里插入图片描述
  1. 跑起来后，会出现两个地址，打开浏览器访问该地址，预览此次创建的项目，至此，最简单的一个项目就搭建完成。
    在这里插入图片描述
    能看到这里，感谢观众老爷捧场~~~
    欲知后事如何，且听下回分解
奇维
关注
  • 14
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）
11-29
VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vue作为前端框架，vuejs轻量、简单，对于前端友好，学习路线平坦，这使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。其中ElementUI，就是饿了么团队开发的一款基于vue的前端组件库。构建网站的必备环境： NodeJS（npm）Webstorm （前端IDE）Nginx（后期用来转发请求到后台服务器） 由于我们需要使用npm的包管理器，所以首先得先安装nodejs,  直接在node官网下载 windows系统直接下载  .msi。下载完毕直接双击安装就ok啦 安装完毕，打开cmd 输入命令 npm
从0搭建Vue3组件库(五): 如何使用Vite打包组件库
xdididi的博客
08-25 2840
本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts)
从 16 个方向逐步搭建基于 Vue3 的前端架构，前端程序员架构之路该如何继续学习
04-02 299
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料eURL`，如果接口存在多个不同域名，可以通过 js 变量控制。设置。
vue3前端开发系列(2) - 项目框架搭建篇(新手必看)
硅谷工具人
10-10 1107
如果两个文件(.env.development和.env.production)在src文件夹里面，那么可以通过在vite.config.ts文件中设置envDir的值为"./src",在**项目根目录(通常是src目录外面)**新建.env.development和.env.production两个文件。项目别名配置的时候需要用的 path 模块，而path模块是node.js的内置模块，node不支持TS。模式启动，所以读取到的是.env.development文件中的值。
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
热门推荐
逆境清醒的博客
03-19 4万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
Vue 3 开发PC端实战从零到上线.docx
最新发布
05-16
随着前端技术的发展，Vue.js 以其轻量、灵活和易上手的特点，已经成为构建交云应用的热门选择。Vue 3 引入了诸多新特性，如组合式API、响应式系统重构等，进一步增强了框架的性能和开发体验。本文将带你从零开始，使用 Vue 3 开发一个简单的PC端应用程序，并将其部署上线。 第一步：环境搭建 安装Node.js：确保你的开发环境中安装了Node.js。可以从Node.js官网下载并安装。 安装Vue CLI：Vue CLI 是官方提供的命令行工具，用于快速搭建Vue项目。通过终端安装Vue CLI： npm install -g @vue/cli 创建Vue 3项目：使用Vue CLI创建一个新的Vue 3项目： vue create my-vue3-pc-app 选择默认的配置选项，等待项目创建完成。 第二步：项目结构与基础配置 项目结构：创建完成后，你的项目结构应该类似于： my-vue3-pc-app ├── node_modules ├── public ├── src │ ├── assets │ ├── components │ ├── view
vue3框架搭建
weixin_48022521的博客
01-29 693
目前预估是这些有部分还没用到就先不写了，等用到了再补充。
前端VUE3+Vite -- 框架搭建
寿春
06-02 4456
卸载 vue – 安装 vue Vite vite 官网学习开始构建越来越大型的应用时，需要处理的 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 ，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。1.旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 模块，且越来越多 2. 工具使用编译型语言编写。...
从零搭建vue3.0项目框架与基本封装
陆仁丶的博客
12-08 3178
从零搭建vue3.0项目框架与基本封装 一、先卸载旧版本 如果没有旧版本可直接跳过此步骤 npm uninstall vue-cli -g 二、安装Vue CLI 3 npm install -g @vue/cli 三、创建项目 进入要创建项目的目录 vue create name 执行上述命令后，出现如下界面，选择配置，这里不选默认，选择自己配置 根据自己的需求，选择相应的配置，这里按"a",全选，回车。 这里选择3x,回车。 这里问你是否使用class风格的组件语法，输入y，回车。 这里
从零开始搭建Vue3框架（一）：项目初始化+Vite基础配置
qq_25081445的博客
03-18 5348
前言 vue3.0更新了不短的时间，目前很多配套框架如elementui、echarts等主流UI框架都已经做了升级。 考虑到目前2.0的项目工程运行速度、开发效率都有了一定瓶颈，所以公司考虑优化技术架构，实现3.0版本升级。 升级肯定涉及到兼容性和技术栈的问题，至于两个版本的改动在项目搭建过程中，如果设计到的会适当说明。本文目的在于记录自己项目框架搭建的过程，也记录一下遇到的坑吧。 项目创建 Vue官方提供了两种方法： 通过vite，强烈推荐这种方法，毕竟升级的目的之一也是希望提高一下开发效率，vite
vue系列（二）——vue3基础项目（集成框架）搭建
xxfen_的博客
06-17 5493
目录一、新建项目二、集成路由三、安装配置axios（网络请求库）四、使用vuex（暂无）五、结尾打开编辑器新建项目，填写项目名称，点击创建，之后等待项目加载完成就可以了。我的Hbuilder X 版本是3.4.14新建的项目目录下面是vue项目加载页面的形式，单页渲染，所有的内容展示都是在index.html页面上进行渲染，而App.vue是index.html里面最外层的组件容器、包含全局的js代码css样式。所有的页面的渲染是在App.vue容器里面进行文件main.js：入口js文件，所有全局文件的引
Vue2.0 从零开始_环境搭建操作步骤
12-10
简要：继项目空闲后，开始着手vue的学习;为此向大家分享其中的艰辛和搭建办法，希望能够跟各位VUE大神学习探索，如果有不对或者好的建议告知下；*~*！ 一、什么是VUE？ 是一种node.js框架，特点如下: 1.数据绑定 ...
vue实战入门进阶篇：从零开始实现网站后台实例
05-05
vue实战入门进阶篇：从零开始实现网站后台实例，使用vue+elementui实现网站管理系统后台管理界面框架搭建，实现首页、新闻、访问记录、内容发布、系统管理等界面的增删改查功能。
从零开始学习搭建React脚手架项目
12-11
准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多 react和vue,angular一样也有脚手架。这大大方便了我们的...
前端项目框架搭建（vue3-vite-ts-pinia）
sy697097的博客
03-02 1489
在项目所在文件创建项目文件夹右键文件夹，通过code打开。打开终端（ctrl + `）,确保终端文件夹是刚刚创建的项目文件夹。
手把手教学 如何快速搭建一个vue3开发框架
秋来九月八
06-03 2475
之前写过一篇vue3框架的博客，但需要自己搭配路由，vuex，以及eslint等等，今天用最简单的方式，搭建一个vue3全家桶框架。 全局安装最近版本的 vue/cli https://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli yarn global add @vue/cli # 或 npm install -g @vue/cli 选好一个文件夹，在地址栏输入cmd，进
vite+vue3+TypeScript 搭建项目基本框架
Mr_XiMu的博客
04-23 3634
vite+vue3+TypeScript 搭建项目基本框架
从0到1搭建兼容vue2和vue3的前端组件库 - Vue demi
飞翔的熊blabla
07-07 2144
1、创建四个文件，替换其中关键信息2、修改entry，components.json，添加新建的组件信息需要的关键信息只有三个，组件名，组件描述，组件中文名，所以我们创建时要输入如下即可：image想实现命令行提问并收集输入的答案需要用到一个库 inquirer代码很简单},message: '请输入你要新建的组件名（中文）:',default: '示例组件',},message: '请输入组件的功能描述：',default: '默认：这是一个新组件']);
一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输（第一篇）
qq_17335549的博客
12-29 1万+
【前端工程化实践】手把手教小白搭建 vite + ts + vue3 项目
vue实战入门基础篇二:从零开始仿门户网站实例-开发框架搭建
06-20
### 回答1： 在vue实战入门基础篇二中，我们将会从零开始搭建一个仿门户网站的实例，这个实例包括了前端页面的设计和后端API的实现。在开始这个实例之前，我们需要选定一个开发框架，这个框架将会支持我们在开发中的需求，并且方便我们的团队协作和项目管理。 在选择框架之前，我们需要考虑以下因素：开发速度、团队协作、可维护性和可扩展性。因此，我们应该选择一个适合我们现有技术栈的框架，并且具备这些因素。 在这个实例中，我们选择了vue.js作为我们的开发框架。vue.js是一个流行的JavaScript框架，它提供了强大的工具来开发富客户端应用程序。它易于使用和学习，并且对于大多数应用程序而言，它具有良好的性能。 在搭建框架时，我们采用了vue-cli工具来建立vue.js的项目模板。vue-cli可以为我们自动配置开发环境、构建工具和其他常见的开发工具，从而减少我们的开发时间。使用vue-cli搭建框架时，我们可以根据我们的需求选择所支持的特性，并且自定义构建配置。 搭建好框架后，我们还需要依次配置vue-router、vuex、axios等工具，用于路由管理、状态管理和API请求。这些工具可以加速我们的开发过程，并且有助于我们在开发过程中实现更好的代码组织，提高代码质量和可维护性。 总之，搭建一个好的开发框架是成功的开发的关键之一。我们应该选择一个适合我们项目需求的框架，同时尽可能地利用现有的工具和库来支持我们的开发过程。 ### 回答2： Vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建，主要是介绍如何使用Vue.js开发一个门户网站的搭建方法。在此基础篇中，我们将会学习如何使用vue-cli建立Vue.js的基本项目框架，并结合Bootstrap、FontAwesome等前端开发产品来丰富我们的门户网站页面。 首先，我们需要安装Vue CLI，这是Vue.js官方提供的脚手架工具，可以快速生成Vue.js项目的基本架构。安装Vue CLI之后，我们可以通过命令行在终端中进入到目标项目目录，并通过vue create projectName命令来创建一个Vue.js项目。 接下来，我们需要安装Bootstrap和FontAwesome，因为它们是实现我们门户网站样式和布局的重要工具。我们可以通过npm命令来安装它们：npm install bootstrap @fortawesome/fontawesome-free。 安装成功之后，我们可以在Vue.js的组件中使用Bootstrap和FontAwesome提供的样式和图标。在项目开发中，我们可以通过组件化的思想，将各个部分拆分为独立的组件，再通过父子组件的嵌套来构建整个门户网站的页面。 在搭建门户网站页面的过程中，还需要注意一些细节问题。比如在Vue.js中如何使用路由功能来实现不同页面之间的跳转，如何进行页面的布局和调整等等。通过综合运用Vue.js的基本语法和其它前端产品，我们可以初步完成一个仿门户网站的实例。 总之，Vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建，是一个非常实用的课程，可以帮助我们了解Vue.js在实际项目开发中的具体应用。掌握这些基础知识之后，我们可以更加专业、高效地进行门户网站开发工作。 ### 回答3： 本次教程是基于Vue.js框架来实现仿门户网站的实例教程，本文将重点介绍如何搭建开发框架。 首先，我们需要安装Vue.js框架，可以通过官网下载或者使用npm命令行工具安装，具体方法可以参考Vue.js官网上的介绍。 安装好Vue.js之后，我们需要使用Vue.js提供的命令行工具Vue CLI来搭建开发框架。首先，我们需要在命令行中输入以下命令： ``` npm install -g @vue/cli ``` 接着，我们可以创建一个新的Vue项目，可以使用以下命令： ``` vue create project-name ``` 其中，project-name是你自定义的项目名称。接下来，我们可以根据自己的需求选择不同的配置。例如，我们可以选择手动配置，来选择需要的插件和功能。然后，我们需要安装一些Vue.js的插件，例如Vue Router和Vuex。 ``` npm install vue-router vuex --save ``` 安装好插件之后，我们需要在项目中创建一些组件和页面。这些组件和页面可以根据实际需求来创建，例如首页组件、新闻组件、产品组件等。在创建组件和页面之前，我们需要在src目录下创建一个views文件夹来存放页面组件，在src/components文件夹下创建组件。 接着，我们可以使用Vue.js提供的语法来编写组件、页面和路由等。在编写代码的过程中，我们可以参考Vue.js官方文档和各种教程、博客等。 总而言之，搭建好开发框架是Vue.js实现仿门户网站的第一步。在开发过程中，我们需要不断学习和掌握Vue.js的语法、功能和特点，结合实际需求来不断优化和完善代码，最终实现一个完整的门户网站。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值