带你玩转vue——前端工程搭建

简介: 带你玩转vue——前端工程搭建

在正式搭建项目之前我们首先要认识一下vue-cli:

vue-cli就是vue的脚手架,顾名思义就是它的上面可以搭载很多工具,当你需要其中一个工具对工程进行构建时只需要将它安装到脚手架上,然后使用命令调用它,而你并不需要知道他是怎么运行的,这样我们在项目构建中就可以更加得心应手,当有一天你的脚手架拆除的时候,展露出来的就是你精美的作品了!

需要注意的是vue-cli有两个相差比较大的版本,2.x和3.x,因为很多类库2.x不支持所以我们尽量安装3.x:

npm install -g @vue/cli

安装完成后我们需要用cmd命令验证一下是否安装成功:vue --version

image.png

如果出现3.x的版本号说明安装成功了,如果设备之前安装过2.x的版本,需要将之前的版本卸载掉在执行上面的语句,卸载命令:npm uninstall vue-cli -g。

接下来就要进入我们的正题了——搭建项目。vue项目搭建有两种方式,一种是在命令窗口中执行,另一种是运行一个ui页面,鉴于可读性和可操作性我们使用ui页面的教程搭建项目:

运行vue ui

image.png

自动弹出如下图的一个项目管理器页面:

image.png

点击创建,选择项目根路径:

image.png

选中项目后,点击正下方的:

image.png

接下来就是一些项目基本项的配置:

1、这里我们选用的包管理工具是npm

image.png

2、选择预设配置

image.png

这里的demo是我以前预设好的配置可以拿来直接用,这个配置基本上是不用动的,等一下大家可以把接下来的配置都做成预设,这样就不用了每次搭建工程都重新选择配置项了!所以这里我们选择手动!!

3、新建功能选择

image.png

其中:

①router是vue的路由,官方解释为:Vue路由器是Vue.js的官方路由器。它与Vue.js核心深度集成!

功能包括:

嵌套路线/视图映射

模块化,基于组件的路由器配置

路由参数,查询,通配符

查看由Vue提供的转换效果。js的转换系统

细粒度的导航控制

链接自动活动的CSS类

HTML5历史模式或散列模式,在IE9中具有自动回退功能

可定制的滚动行为

反正就是很重要啦!在我们的项目中也是必不可少的!!

②Vuex帮助我们处理共享状态

通俗的讲,vuex就是一个存放全局变量的容器,可以存放同步不同vue文件之间的状态,例如我们的web项目的登录功能,当你完成一次登录后需要将当前登录人的信息存放在项目中,这样方便在以后其他功能中随时可以调用,这时候就可以将登录人信息存放在vuex中,这样即使你离开了登录页面,也可以在其他页面中获取到登录人信息

③PostCSS为css预处理器,这个可以查看

4、配置选择

image.png

配置选择如上所示,点击创建项目会弹出下面弹窗

image.png

为你的配置填入一个预设名,下次创建项目就可以直接使用预设啦!!

然后就是耐心的等待了

image.png

这个过程vue会自动下载安装自己需要的工具,如果网速慢可能要多等一会。

当出现下面这个页面的时候,恭喜你你的第一个vue项目已经可以进入开发阶段啦~~

image.png

相关文章
|
6天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
1天前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
|
11天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
7天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
29 3
|
6天前
|
JavaScript 前端开发 API
如何在前端开发中有效管理状态:React vs. Vue
在现代前端开发中,状态管理是一个关键因素,它直接影响到应用的性能和可维护性。React 和 Vue 是当前最流行的前端框架,它们在状态管理方面各有优势和劣势。本文将深入探讨 React 和 Vue 在状态管理中的不同实现,分析它们的优缺点,并提供实际应用中的最佳实践,以帮助开发者选择最适合他们项目的解决方案。
|
20天前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
52 0
|
20天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
42 0
|
20天前
|
开发者 Android开发 iOS开发
Xamarin开发者的神器!揭秘你绝不能错过的插件和工具,让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程,保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境,然后创建并运行一个包含标题、按钮和消息标签的示例应用,展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms,提高跨平台应用开发效率。
30 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem