带你玩转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天前
|
前端开发 JavaScript API
前端框架Vue------>第二天学习(1)插槽
这篇文章介绍了Vue框架中插槽(slot)的概念和用法,以及如何在组件中使用自定义事件进行父子组件间的通信。
前端框架Vue------>第二天学习(1)插槽
|
6天前
|
JSON 前端开发 JavaScript
前端框架Vue------>第一天学习(3)
这篇文章是关于使用Vue框架进行前端开发的教程,重点介绍了如何使用Axios实现异步通信和表单输入的双向数据绑定。
前端框架Vue------>第一天学习(3)
|
4天前
|
前端开发 JavaScript Java
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显(一))
这篇文章详细介绍了在SpringBoot+Vue项目中实现表单和图片上传的完整流程,包括前端上传、后端接口处理、数据库保存图片路径,以及前端图片回显的方法,同时探讨了图片资源映射、token验证、过滤器配置等相关问题。
|
4天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
5天前
|
存储 前端开发 JavaScript
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
本文介绍了使用Springboot后端和Vue前端实现图片与表单数据一起提交到后端,并保存图片地址到数据库,然后展示存储的图片到前端Vue页面的完整流程。
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
|
6天前
|
前端开发 JavaScript
前端框架Vue------>第三天学习(1)
这篇文章介绍了Vue框架的组件基础和计算属性的概念,通过示例代码展示了如何定义可复用的Vue组件和使用计算属性来声明性地描述依赖其他值的数据。
|
2天前
|
缓存 前端开发 JavaScript
前端框架选择指南:React vs Vue vs Angular
React、Vue与Angular是主流前端框架,各有千秋。React专注视图层,学习曲线平缓,生态丰富,适用于中大型项目;Vue简洁易学,模板直观,内置状态管理,适合中小项目及快速原型;Angular全栈框架,结构严谨,适合大型企业应用。React需手动处理状态管理,Vue提供完整CLI加速开发,Angular虽学习曲线陡峭但提供全套解决方案。性能方面,三者均利用虚拟DOM优化渲染。社区支持上,React最为庞大,Vue活跃度高,Angular有Google背书。选型应基于项目需求、团队技能及维护考量。
11 0
|
7天前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
10 0
|
2月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
55 2
|
2月前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记