vue全家桶(vue2.x+vue-router+axios+webpack)项目搭建

Vue:vue2.0全家桶搭建element-ui+axios+vuex+mockjs 作为一名前端人员,并且作为一名使用过vue框架的前端人员,相信都听说过vue全家桶(1.项目构建工具vue-cli、2.路由vue-router:http://router.vuejs.org、3.状态管理vuex:http://vuex.vuejs.org、4.http请求工具axios:http://www.axios-js.com/zh-cn/docs/、5.样式element-ui:htt... 阅读详情

参考博客文章 博主FungLeo的Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版
注:原博主写的非常详细 本文章为根据原博主教程总结的自己的搭建流程

一、安装node环境

二、使用node -v以及npm -v查看版本号

查看node版本号

三、安装vue-cli

npm install -g vue-cli

查看vue版本号(注:这里的-V的V必须为大写)

vue -V

四、使用vue-cli搭建项目

1.新建项目文件夹vueStudy

2.在vueStudy中打开git bash窗口

3.执行

vue init webpack vuedemo   

这是命令行会出现以下代码

? Project name (vueDemo)                   //输入项目名称 回车默认为vue init 时的vueDemo
? Project description A Vue.js project      //输入项目描述
? Author yinshiru <yin1906901803@163.com>   //输入作者
? Vue build standalone                      //需要不需要安装编译器,我选择需要安装
? Install vue-router? Yes                   //是否使用vue-router Y为使用N不使用
? Use ESLint to lint your code? (Y/n)       //是否使用ESLint语法检查 
? Set up unit tests No                      //是否使用unit测试 我没有用到选的是不选择
? Setup e2e tests with Nightwatch? No       //是否使用e2e测试 我也没有用到选择的不使用

这里写图片描述

tip:出现如上图所示提示即为安装成功,这时我们可以看一下vueStudy文件下已经生成了vuedemo项目文件

按照终端给出的提示执行命令:

cd vueDemo      //进入项目文件夹
npm run dev     //运行项目

这里写图片描述

执行成功如上图所示,在浏览器中输入localhost:8080页面出现如下图所示即为搭建成功

这里写图片描述

                                    。。。未完待续
vue全家桶是指什么?有哪些东西? Vue全家桶一般来说指的是脚手架vue-cli、路由vue-Router、状态管理模式vuex、Axios、elementUI等ui框架和打包工具webpack,下面我们分别介绍。 阅读详情

相关推荐

vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019

未完

PGguoqi的博客 9746

npm国内淘宝镜像

使用cmd配置 打开cmd 1.配置命令: npm config set registry https://registry.npm.taobao.org 2.验证是否成功: npm config get registry 如果返回https://registry.npm.taobao.org,说明镜像配置成功。  

weixin_44915226的博客 248

【使用vue init和vue create的区别以及搭建vue项目的教程】

【使用vue init和vue create的区别以及搭建vue项目的教程】

????鱼干~ 3250

推荐项目:Vue2.0 + ElementUI + Axios + VueRouter 实战框架

推荐项目:Vue2.0 + ElementUI + Axios + VueRouter 实战框架 该项目()是一个基于 Vue.js 2.0 的完整前端应用模板,融合了 Element UI、Axios 和 Vue Router 等热门技术,旨在提供一个快速启动的新项目基础架构。本文将对其技术构成进行解析,并探讨其用途和特点。 技术分析 Vue.js 2.0 Vue.js 是一款轻量级但功能强大的...

gitblog_00052的博客 647

Avue.js2.0是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图

Avue.js2.0是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易,avue-cli是后台模版

Mixer-First Receiver适用于宽带阵列应用的接收机技术1

Mixer-First Receiver适用于宽带阵列应用的接收机技术1技术的背景单元级数字化阵列传统链路到Mixer-First链路的逻辑考虑三种场景小结 技术的背景 在文章《吊打全球的顶级毫米波数字阵列项目-MIDAS》中提到了DARPA在MIDAS项目中在毫米波实现宽带单元级数字化阵列用到了一个关键的叫做N-Path filter的技术,而这个技术同样出现在了《让微波射频工程师颤抖的芯片-MATRICs》的MATRICs芯片中。 为什么DARPA的各个合作研究机构选择这种技术?这篇来自Universi

ICONO的博客 2167

Vue中router和axios使用教程

router是前端路由的一种实现方式,它可以根据不同的URL地址展示不同的页面内容,实现单页应用(SPA)的效果。在Vue框架中,我们可以使用Vue Router来进行路由管理。path: '/',//斜杠表示再路由时找不到路径时,都会访问到home组件},其中,path属性表示路由路径,name属性表示路由名称,component属性表示路由对应的组件。path: '/user/:id',//id表示动态参数,前面用:其中,:id表示动态参数。

桑稚远方的博客 1700

从零构建C++ Gerber解析器:以PCB缺陷检测为目标的实战指南

本文是一份面向PCB缺陷检测项目的实战指南,详细介绍了如何从零开始使用C++构建高性能的Gerber文件解析器。文章深入剖析了Gerber RS-274X格式,并提供了完整的开发环境搭建、核心数据结构设计、解析步骤实现以及为缺陷检测优化的具体方案,旨在帮助开发者获得对PCB制造数据的深度控制与极致性能。

weixin_29291185的博客 184

vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发

关于项目vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发,使用webpack构建工具编译打包项目http://www.vue-js.com/topic/58ae7fc2a9c1282817afc2e0如果此开源项目对大家学习vue的全家桶有帮助,请给我一个star,因为你的star让我觉得这个开源有了价值!仓库地址点击查看效果vue1.x 项目基于vu

qq_34935885的博客 1069

RK3568-MIPI屏幕调试实战:LCD初始化时序解析与转换

本文详细解析RK3568平台MIPI屏幕调试中的LCD初始化时序,重点介绍DCS Write与Generic Write数据类型的转换方法,并提供厂家时序到RK格式的实战转换案例。通过理解上电初始化时序的重要性,帮助开发者快速解决屏幕不亮、花屏等常见调试问题,提升RK3568硬件开发效率。

d6e7f8g9h的博客 187

锂电池主动均衡理解

锂电池主动均衡方案总结: 来自:http://wenku.baidu.com/link?url=EWiyACZ3aLPhcOjI4FZL3uQ9d0FD6dBhADQSVQiaSmRHHATTdSig1Wy39JY7-ijCzbAEYG1ymz6Lv5zhGdZaStQSHzFt6v3h3_tMrJudz9O 目前车厂采用被动均衡方案的公司:(来自网页) 目前采用主动均衡的...

weixin_34365417的博客 2911

【Vue】全家桶介绍

Vue全家桶一般来说包括主体Vue.Js、开发插件vue-devtools、项目构建工具vue-cli、路由管理器vue-Router、状态管理模式vuex、网络请求库Axios、ui框架、打包工具webpack

欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发 5453

[后端设计]innovus命令editPin详解?

先放命令,有空慢慢写。

m0_61003348的博客 5738

IDEA搭建vue-cli | vue-router | 排错思路、Webpack、Axios、周期、路由、异步、重定向

IDEA搭建vue-cli项目 | 排错思路、Webpack、路由、异步、重定向 学习

wei_shuo的博客 6556

NX二次开发获取最小包容块和最小包容柱(PK)

用PK获取最小包容块的数据,拿到方向后再用PK求极限点,将点的数据转换到同一平面,最后求多个点的外接圆就出来了。

qq_39541524的博客 3121

【Flink】FlinkCDC获取mysql数据时间类型差8小时时区解决方案

​ 1、背景: 在我们使用FlinkCDC采集mysql数据的时候,日期类型是我们很常见的类型,但是FlinkCDC读取出来会和数据库的日期时间不一致,情况如下 FlinkCDC获取的数据中create_time字段1694597238000转换为时间戳2023-09-13 17:27:18,而数据库中原始数据如下,并没有到下午5点,这就导致了FlinkCDC读出来的时间和数据库中实际的时间不一致的情况,与数据库对比可以发现,这里的时间戳与数据库时间刚好相差了 8 个小时,在实际生产中这种情况是不

一杯咖啡半杯糖的博客 3855

vue3全家桶技术栈基础(一)

vue3全家桶总结

qq_44472790的博客 3843

vmvare kali如何配置桥接模式进行上网

注意点:虚拟机可以PING通物理机,但是PING不通其他的网站。经过收集资料,得知由于是校园网连接,所以DHCP只能分配一个授权的IP地址给连接的主机,由于KALI是桥接物理机,物理机已经获得了这个授权的IP,所以导致桥接的虚拟机无法上网。所以不是因为配置的有问题,而是网络的安全设置导致了桥接失败。如果你是使用校园网,可以换个网络试试,使用校园网的时候,可能会遇到桥接失败。

猿小白的博客 1409

已构建配置好的vuejs全家桶项目已包含vue-router vuex api,axios. webpack, 储存vue-ls, 异步async/await, css less. 下载即使用项目开发

github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,vuex,api,axios. webpack, 储存用vue-ls, 异步async/await, css less. 下...

Github.com/liangfengbo 4219

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建后台管理系统(axios的封装)

前言 最近公司项目需要做一个小型的填报的录入系统,根据业务的具体分析,采用了基于vue2.0 + webpack+axios+elementUi+vue-router+vuex全家桶的技术栈构建录入系统,同时也作为学习vue全家桶技术栈的一个学习记录。 目标 axios的二次封装 loading的加载 axios 的封装 第一步:先新建一个axios封装的js文件,如api.js ...

淡淡的云彩恋歌 515

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Vue 命令行工具 Vue-CLI 详解

阅读目录阐述vue全家桶vue-cliVue CLI 的安装① 默认安装 vue/cli 脚手架 3② 默认安装失败,解决mode版本问题③ nvm下载太慢问题解决④ 安装 Node ^12.0.0⑤ 从新安装 VueCli 脚手架 3④ 拉取 2.x 模板 (旧版本)⑤ 安装vue指定版本⑥ 博主node版本初始化项目① vue init命令讲解② 项目初始化③ 目录结构详解④ 运行项目node 安装适合小白1 去node官网下载2 下载完成后双击安装包,跳出安装弹窗,点击Next从新来过vue-cli

wgchen 3万+

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

Vue全家桶(五)之Vue-Router路由 (概念及基本使用)

Vue-router 路由🔥 路由 地址 Vue-router 路由 (概念及基本使用)🔥 https://blog.csdn.net/m0_55990909/article/details/123957200 Vue-router 路由 (常见用法) 🔥 https://blog.csdn.net/m0_55990909/article/details/123981283 路由的基本概念与原理 路由是一个比较广义和抽象的概念,路由的本质就是对应关系。 在开发中,路由分为: 后端

m0_55990909的博客 868

Vue 全家桶学习资源(持续更新)

companion: React 全家桶学习资源(持续更新)   下面整理了一些关于Vue以及Vue衍生的学习资源: 官网文档 官网API ECMAScript 6 入门 30分钟掌握ES6/ES2015核心内容(上) 30分钟掌握ES6/ES2015核心内容(下) vuefe Vue 中文社区 vue-router 2 Vuex 到底 Vuex 是什么 Vue...

2万+

Vue全家桶

Vue全家桶一般来说指的是脚手架vue-cli、路由vue-Router、状态管理模式vuex、Axios、elementUI等ui框架和打包工具webpack,下面我们分别介绍。 1. 项目构建工具:vue-cli vue-cli也叫脚手架,官方定义为Vue.js开发的标准工具。Vue-cli是一个基于Vue.js进行快速开发的完整系统,可以自动生成Vue.js+webpack的项目模板。Vue cli提供了强大的功能,用于定制新项目、配置原型、添加插件和检查webpack配置。@vue/cli

qq_47793359的博客 481
上一篇: vue全家桶(vue2.x+vue-router+axios+webpack)项目搭建
下一篇: 隐藏移动端自带导航
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值