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... 阅读详情

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

参考博客文章 博主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页面出现如下图所示即为搭建成功

这里写图片描述

                                    。。。未完待续
posted @ 2018-01-09 23:36 我在等风也等你啊 阅读( ...) 评论( ...) 编辑 收藏
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

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

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

推荐项目: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

【STM32学习】(29)STM32实现595驱动三个数码管(标准库和HAL库实现)

我选用的单片机型号为:STM32F103系列 74LS595是一个串转并行输出的芯片,它能为单片机节省很多的IO口,应用场景广泛。 现要求三个数码管动态显示,常规设计都是并行实现,需要8个IO数据口,然后还需要3个IO片选数码管接口,这样大大占用了IO口,导致连接的外设变少。因此我们引入74LS595芯片。电路设计如下: 只需要三个共阴极数码管与三个595芯片级联即可完成,通过RCLK,SCK,SER三个IO即可完成对数码管的动态控制并显示。电路焊接的实物图如下: 要求完成功能:实现数.

XiaoCaiDaYong的博客 8266

基于wxWidgets框架,使用DialogBlocks建立OpenGL界面

前言 之前公司要求使用wxWidgets做GUI,基于OpenGL图形内核,开发三维可视化工具。目前初步开发工作基本已经完成,剩下都是完善了。这里记录一下最开始的框架搭建过程(当然是简化版啦)。wxWidgets结合OpenGL开发可以实现跨平台应用,再结合CMake和VS Code,整体开发工具用习惯了会感觉非常顺手。 界面编辑 首先,使用DialogBlocks新建一个工程,这里工程目录...

cyberobot的博客 2751

vue2.x+antd-vue搭建后管项目

vue2.x+ant-design-vue快速搭建一个后台管理系统架子

洋茄子炒鸡蛋的博客 3104

深入解析“PROJ: proj_create_from_database: Cannot find proj.db”错误:从环境配置到打包实战

本文深入解析了“PROJ: proj_create_from_database: Cannot find proj.db”错误的根源与解决方案,涵盖环境配置、PyInstaller打包及跨平台兼容性处理。通过详细分析PROJ库路径问题及GDAL依赖关系,提供动态路径设置、资源文件打包等实战技巧,帮助开发者高效解决地理数据处理中的常见错误。

weixin_29074409的博客 448

Vue中router和axios使用教程

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

桑稚远方的博客 1700

Maestro 薛定谔软件简单分子对接案例

#参考:Maestro 薛定谔软件使用:Maestro 薛定谔对接:sid=287811。

weixin_42357472的博客 1万+

详解AUTOSAR:AUTOSAR架构中的配置文件(拓展篇—7)

查看AUTOSAR代码包时会发现一些这样格式的文件:xxx_PBcfg.c、xxx_Lcfg.c和xxx_Cfg.h,本篇博文讲一讲这几个配置文件的作用和特点。

不脱发的程序猿 2148

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

保姆级教程!Python爬虫爬取知乎回答,保存为Markdown文件

本教程实现了知乎公开回答的完整爬取与Markdown保存,核心流程为「请求页面→解析作者/时间/正文/图片→下载图片→保存MD文件」,步骤清晰,代码可直接复用关键特性:支持合并/单文件两种保存模式、自动下载图片并引用、中文乱码防护、非法文件名过滤,满足日常整理知乎回答的需求新手友好:无需复杂配置,仅需修改知乎问题URL即可运行,全程无坑,5分钟内可看到运行结果灵活扩展:支持进阶优化(登录、分页、格式完善),可根据个人需求调整功能。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 1232

【Vue】全家桶介绍

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

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

Unity WebView 插件⭐️(十八)3D WebView 原生2D模式 — Native 2D Mode

Unity中的 浏览器插件:3D WebView,利用好该插件我们可以自己使用Unity打造出一个自定义的多样化浏览器。可以用于2D显示,也可以用于3D空间场景中使用,在PC端、手机端和VR设备等都可以有一个非常好的效果。一起来浏览器插件:3D WebView的专栏学习使用吧!

努力前行,总会成为自己心中的那道光 7642

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...

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

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

wei_shuo的博客 6556

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

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

vue3全家桶总结

qq_44472790的博客 3843

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

已构建配置好的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

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

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子组件获取父组件方法
下一篇: vue全家桶(vue2.x+vue-router+axios+webpack)项目搭建
我在等风也等你啊
博客等级 码龄10年 3粉丝 50原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值