从零开始搭建vue框架

于 2024-07-15 23:05:00 发布
阅读量553 收藏 8
点赞数 15
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_66547608/article/details/140450792
版权

 流程图

开始
|
|-- 2013 年底，尤雨溪开始开发 Vue 框架，最初命名为 Seed，后更名为 Vue
|   |-- 2013 年 12 月，Vue 0.6.0 版本
|
|-- 2014 年 1 月 24 日，Vue 0.8.0 版本发布
|   |-- 2014 年 2 月 25 日，Vue 0.9.0 版本，代号 Animatrix
|
|-- 2015 年 6 月 13 日，Vue 0.12.0 版本，代号 Dragon Ball
|   |-- 2015 年，Laravel 社区首次使用 Vue，Vue 在 JS 社区打响知名度
|   |-- 2015 年，vue-router、vuex、vue-cli 相继发布
|
|-- 2016 年 10 月 1 日，Vue 1.0.0 版本，代号 Evangelion
|
|-- 2019 年 2 月 4 日，Vue 2.6.0 版本，代号 Macross
|
|-- 2020 年 9 月，Vue 3.0 版本发布
结束

vue简介

Vue 框架由尤雨溪开发，其发展历程如下：

  1. 2013 年底，尤雨溪受到 Angular 的启发，开始开发 Vue 框架，最初命名为 Seed。同年 12 月，Seed 更名为 Vue，版本号是 0.6.0。
  2. 2014 年 1 月 24 日，Vue 正式对外发布，版本号是 0.8.0。发布于 2 月 25 日的 0.9.0 版本有了自己的代号：Animatrix（动画版《骇客帝国》），此后重要的版本都会有代号。
  3. 2015 年 6 月 13 日发布的 0.12.0 版本，代号为 Dragon Ball（龙珠），这一年 Vue 迎来了大爆发。同年，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
  4. Vue 1.0.0 Evangelion（新世纪福音战士）是 Vue 历史上的第一个里程碑。同年，vue-router（2015-08-18）、vuex（2015-11-28）、vue-cli（2015-12-27）相继发布，标志着 Vue 从一个视图层库发展为一个渐进式框架。
  5. 2016 年 10 月 1 日发布的 2.0.0 Ghost in the Shell（攻壳机动队）是第二个重要的里程碑，它吸收了 React 的 Virtual Dom 方案，还支持服务端渲染。
  6. 2019 年 2 月 4 日，Vue 发布了 2.6.0 Macross（超时空要塞）版本。该版本的主要改动涉及语法更新、性能提升以及向计划中的 3.0 靠拢，包括提供新的指令 v-slot 以代替 slot 组件、异步错误处理的改进、支持动态指令参数、编译器警告位置信息的添加、显式创建独立的响应式对象、新 ES 模块构建可直接导入使用、让 nextTick 恢复使用 Microtask 等。
  7. 2020 年 9 月，Vue 3.0 正式发布，其主要特点是具有更快的速度、更小的体积、更易于使用的 API 以及更好的 TypeScript 支持。

Vue 框架

Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。

它具有以下显著特点和优势：

  1. 轻量级：Vue 的核心库只关注视图层，体积相对较小，易于上手和集成到项目中。
    • 例如，对于小型项目或只需要简单前端交互的应用，Vue 能够快速搭建起有效的界面。
  2. 数据驱动：通过将数据和视图进行绑定，当数据发生变化时，视图会自动更新。
    • 比如，一个购物车中的商品数量发生改变，对应的显示数量的视图也会实时更新，无需手动操作 DOM。
  3. 组件化开发：可以将页面拆分成多个独立的、可复用的组件，提高代码的可维护性和可扩展性。
    • 像导航栏、侧边栏等常见的模块都可以封装为组件，在不同页面中重复使用。
  4. 指令系统：提供了丰富的指令，如 v-if、v-for 等，方便对 DOM 进行操作和控制。
    • 用 v-if 可以根据条件决定元素是否渲染，v-for 可以方便地遍历数组或对象来生成列表。
  5. 良好的生态：拥有大量的第三方插件和库，满足各种开发需求。

Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它有以下三个版本：

  • Vue 1.x：于2014年2月发布了第一个公开版本。其核心特点是直接操作DOM，并且支持可组合的视图组件。该版本使用了全局混合，开发者可以在应用程序的任何一个组件中注册一个混合，并将新功能添加到组件上。但是，Vue 1.x没有提供过多的模板语法，很多时候需要手动撰写DOM元素来创建组件。此外，它还没有提供服务端渲染功能。
  • Vue 2.x：是Vue.js的第二个主要版本，于2016年9月发布。它的核心特点是支持虚拟DOM，并且提供了新的语法和指令。该版本还支持服务端渲染和SSR性能优化，可提高应用程序的性能。此外，Vue 2.x在自定义指令、组件和混合方面提供了更多的可选项，并定期发布稳定的升级版本，以解决已知的问题。其中，最重要的新功能是scoped slot和动态组件，这些功能允许开发者构建灵活的整体组件。
  • Vue 3.x：是Vue.js的最新主要版本，于2020年9月发布。它带来了很多变化，包括许多特性和增强功能，以及对Vue全新的响应式API的升级。该版本通过使用Proxy对象而不是Object.defineProperty来管理响应式状态，大大减轻了内部操作的负担。此外，Vue 3.x还提供了新的Composition API，使开发者可以更灵活地组织组件逻辑和状态。这些API使得开发者可以轻松创建复杂的组件和应用程序。与Vue 2.x相比，Vue 3.x还优化了虚拟DOM算法，提高了性能。 Vue 3.x的模板语法也进行了更新，现在更加简单明了。

了解了vue的历史之后我们开始 

 从零开始搭建vue框架

首先准备一些必备的工具和软件

WebStrom

WebStorm 是一款商业软件，需要付费使用，但 JetBrains 也提供了学生和开源项目免费使用的许可证。它的功能非常丰富，不过学习曲线较陡峭，且占用资源较多。同时，它主要适用于 Web 开发。

Visual Studio Code 

如何安装Visual Studio Code-CSDN博客

Visual Studio Code（简称 VS Code）

Visual Studio Code 是一款由微软开发的免费、开源的现代化轻量级代码编辑器。

在实际应用中：

  1. 对于前端开发，VS Code 配合相关扩展可以轻松编写 HTML、CSS 和 JavaScript 代码。
  2. 后端开发中，无论是 Python、Java 还是 Node.js 等语言，都能得到很好的支持。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。

在这里在列一下需要安装的软件列表（ WebStrom和 Visual Studio Code 二选一）

  node.js

如何安装node.js-CSDN博客

 Visual Studio Code 

如何安装Visual Studio Code-CSDN博客

 WebStrom

安装完上面的软件之后要安装一个插件

打开开发者工具

打开拓展

 搜索vue，安装Vue-Officical插件

安装之后

 到这里，恭喜你，所有的安装准备工作就完成了

第四步，我们要下载一个vue项目进行运行

在网上找一个vue项目下载一下

GitHub和csdn上都有对应的资源可以随意下载

在这里我随意展示一个实例代码资源库

 这里推荐这几个网站，都是免费的

Fantastic-admin | 一款 Vue 中后台管理系统框架 (gitee.io)

装载。。。 (buildadmin.com)

GitCode - 开发者的代码家园

上面这些网站都是可以下载后台项目。

这里我以下面的这个项目为例

vue-element-plus-admin: 一套基于vue3、element-plus、typescript4、vite3的后台集成方案 (gitee.com)

打开网页

 需要进行一个验证，

在window浏览器下载的文件，一般都在

文件管理系统的下载文件夹下

 

下载完之后打开文件夹

 下载完之后，进行解压

这里我解压到桌面方便操作，也可以解压到其它地方

用开发者工具打开

在terminal命令行中输入命令：

在这里说一下，安装命令和运行命令，都有很多种

项目的命令依赖，要根据具体情况

主要放在 package.json文件下

这里给出常用的两种 

安装依赖命令

npm install

#或者采用
pnpm install

 

 

 

安装后之后进行运行

npm start

#或者

npm run dev
npm run serve
（具体情况要根据对应的package.json文件里面的配置进行输入）

 

 打开网址

 恭喜你，你已经可以成功搭建一个后台管理系统里，可以登录看看。

 这里只是一个后台模版，还需要根据你自己的情况，进行配置和组合。

在运行过程中可能出现失误

 这个问题是由于命令权限导致的，需要管理权限

在任务栏下方的搜索框中输入cmd

 选择第一个命令提示符

 

在命令行里面操作就可以了

 有时候会报错

有些错误可以删掉对应文件夹下面的

在重新pnpm install加载一下

应该就可以了

如果出现下面的错误

您遇到的问题中包含了几个部分，我将逐一解释并提供可能的解决方案：

  1. Browserslist: caniuse-lite is outdated
    • 这个问题提示您的 caniuse-lite 数据库已经过时。这通常不会影响项目的运行，但建议定期更新以保持兼容性信息的准确性。您可以通过运行命令 npx update-browserslist-db@latest 来更新这个数据库。
  2. Error: error:0308010C:digital envelope routines::unsupported
    • 这是一个在 Node.js 17+ 版本中常见的问题，尤其是在 Windows 系统上。这个错误通常与 OpenSSL 的加密模块有关，特别是在某些版本的 Node.js 中，OpenSSL 的默认配置发生了变化。
    • 解决方案：
      • 设置环境变量：您可以通过设置环境变量 NODE_OPTIONS 来禁用 OpenSSL 的某些特性。打开命令提示符（CMD）或 PowerShell，然后运行以下命令
set NODE_OPTIONS=--openssl-legacy-provider

 早重新启动就可以了

 

 

张謹礧
关注
  • 15
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
从零开始搭建Vue3.0项目入门篇
yang651158的博客
09-26 4514
vue3.0入门心得
从零搭建vue框架
qq_40588166的博客
10-11 228
框架搭建 vue-cli创建项目 命令：vue create newnft 根据需要回车选择 打包路径配置 1.router.js配置 const router = new VueRouter({ mode: 'history', base: 'mobile',//路径配置 routes }) 2.vue.config.js配置 publicPath: "/mobile/",// 与router.js一致 服务器环境区分 1.建立.env系列文件 根据项目需求，在根目录新建3个文件，.en
记录一次从零开始搭建Vue框架并完成前后端对接的经历
qq_55754838的博客
08-11 1365
从零开始搭建Vue项目
从零搭建vue项目
m0_58467275的博客
11-19 266
零基础搭建一个vue项目/拷贝别人项目运行
vue从零开始搭建vue项目
H_hl2021的博客
12-22 1515
vue.js前端框架，从零开始搭建一个vue项目，流程如下： 一、安装node.js 1.进入node.js官网下载相应安装包：https://nodejs.org/en/ 我这边下载的是稳定版本，然后下载安装 2.安装完成以后，打开命令行，输入node -v来判断是否安装成功 3.在安装node的时候，npm包管理器会自动安装，我们在命令输出 npm -v 看看是否安装成功 4.安装Vue-cli脚手架： 二、npm包管理器和vu...
从零开始搭建Vue + element-ui 项目完整过程
全栈开发工程师，不定期分享Python、Golang、Java、前端等程序员必备技术，干货满满，不断充电！
03-28 5657
1. 安装Nodejs 1.1 下载对应版本后进行傻瓜式安装 https://nodejs.org/en/download/ 1.2 打开安装目录新建文件夹【node_global】及【node_cache】如下图： 1.3 在当前文件夹，长按Shift + 鼠标右键 打开cmd命令行，输入以下命令设置 npm config set prefix "D:\NodeJS\node_global" npm config set cache "D:\NodeJS\node_cache" 1.4 设置环境变量
从零开始搭建Vue3框架（一）：项目初始化+Vite基础配置
qq_25081445的博客
03-18 5634
前言 vue3.0更新了不短的时间，目前很多配套框架如elementui、echarts等主流UI框架都已经做了升级。 考虑到目前2.0的项目工程运行速度、开发效率都有了一定瓶颈，所以公司考虑优化技术架构，实现3.0版本升级。 升级肯定涉及到兼容性和技术栈的问题，至于两个版本的改动在项目搭建过程中，如果设计到的会适当说明。本文目的在于记录自己项目框架搭建的过程，也记录一下遇到的坑吧。 项目创建 Vue官方提供了两种方法： 通过vite，强烈推荐这种方法，毕竟升级的目的之一也是希望提高一下开发效率，vite
从零开始搭建vue脚手架
weixin_44289670的博客
12-10 653
重0开始搭建vue脚手架 简单来说***vue是一个前端框架***脚手架
从零开始搭建VUE项目
GoodIdea
06-27 361
前言：      此样板面向大型，严肃的项目，并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工作流配方的文档。如果您只想尝试vue-loader或者鞭打一个快速原型，请改用webpack-simple模板。快速开始：    要使用这个模板，可以用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树：$ npm install -g ...
从零开始搭建vue移动端项目到上线的步骤
10-17
本篇文章将详述从零开始搭建Vue移动端项目到上线的完整步骤。 ### 1. 初始化项目 首先，确保已经安装了Node.js环境。然后，通过以下命令全局安装Vue CLI： ```bash npm install --g vue-cli ``` 接着，在你想创建...
Vue2.0 从零开始_环境搭建操作步骤
12-10
Vue.js 是一款流行的轻量级前端JavaScript框架，尤其在2.0版本之后，其功能更加完善，成为开发者构建用户界面的首选工具。Vue的核心特性包括数据绑定和组件化，这使得开发过程更为高效且易于维护。 一、Vue.js 的...
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架源码
11-04
在本文中，我们将深入探讨如何从零开始搭建一个基于Vue3、Vite、TypeScript（TS）、Vue Router和Pinia的脚手架源码。这是一个现代前端开发的常见配置，可以提供高效、类型安全以及组织良好的项目结构。下面将依次...
详解如何从零开始搭建Express+Vue开发环境
10-18
本文将详细介绍如何从零开始搭建一个基于Express（Node.js的Web应用框架）和Vue（渐进式JavaScript框架）的开发环境。 首先，我们需要准备以下工具： 1. **前端预处理和资源管理**： - **JavaScript预处理**：...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1211
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1457
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 174
vue 自定义滚动条同步拖动（移动端）
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 499
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 508
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
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的语法、功能和特点，结合实际需求来不断优化和完善代码，最终实现一个完整的门户网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张謹礧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值