什么是vue?零基础创建一个vue项目


前言

对于刚刚接触vue的我们来说一个简单的vue项目创建流程可以对vue有一个系统性的认知。作为一个刚刚入职一年的小菜鸡,以下所写内容均为自己的系统性复习所作,如有不足或者错误的地方欢迎各位指正。


一、什么是vue?

vue就是Vue.js,它是一款较为流行的JavaScript前端框架,用于创建用户界面的开源JavaScript框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。(js框架就是对js代码一层封装,提供了一些教常用的方法)

二、vue全家桶有哪些?

1.vue-cli

vue-cli就是vue的脚手架,它是一个专门为单页面应用快速搭建繁杂的脚手架,可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

也就是我们现在所讲的vue2.0、vue3.0…

2.vue-router

vue-router 是 Vue.js 官方提供的一个路由管理器。用于页面之间的跳转,路由路径需要我们自己配置,

3.vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说,将vue想作是一个js文件、组件是函数,那么vuex就是一个全局变量,只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中,经常会遇到需要将当前组件的状态传递给其他组件。在组件之间通信时,我们通常会采用传统的三种传值方式(子传父,父传子,兄弟传值)来实现。但当通信双方压根不存在相关联系,或者一个状态需要共享给多个组件时,就会非常麻烦,数据也会相当难维护,这对我们开发来讲就很不友好。vuex 这个时候就很实用。

4.axios

axios简单来讲就是一个基于 promise 用于浏览器和 nodejs 的 HTTP 客户端(HTTP库),主要作用就是可以发送get、post等请求。它本身具有以下特征:

**
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
**

5.UI框架

UI框架很好理解就是外界已经封装好的一些组件库只需要通过官方文档正确引入就能很快实现一些炫酷或者耗时的效果。具体使用可以查看其官网(elementiviewmintUI等)

三、如何创建一个简单的vue项目?

安装node

点这里win10安装 nodejs和cnpm

创建vue项目

1.安装vue

cnpm install vue -g

2.安装vue脚手架(vue-cli)

cnpm install vue-cli -g

3.开始新建项目

① 新建一个文件夹
打开开始菜单,输入 CMD,或使用快捷键 win+R,输入 CMD,敲回车,弹出命令提示符。跳转到你新建的文件夹下

输入:

vue init webpack 项目名称

在这里插入图片描述
按照给的提示

cd 项目名称
npm run dev

一个最基础的vue demo就出来了
在这里插入图片描述
在这里插入图片描述

总结

若有什么问题欢迎大家提出指正

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值