使用vue-cli+webpack搭建vue开发环境

在这里我真的很开心,好久没有用过博客,今天突然看到了我的博客有不少人看过,虽然没有留下脚印,但是还是激起了我重新拿起博客的信心,感谢大家。

在这里我们需要首先下载node,因为我们要用到npm包下载,是基于node的

废话不多说,我们直接进入正题

下载node,同时需要下载git,以后我们就在git上输入命令来搭建我们的vue环境

git用的是linux命令

不要问为什么,能用就行,你说是不是?

windows系统,下载完git以后我们再桌面右击鼠标会看到git Bash,点开它,然后就打开了git,

git有很多功能,同时git可以往github上push你的文件,github是一个很不错的仓库管理工具哦

好,我们直接开始,打开git之后会显示

然后我们执行npm install webpack

就会自动下载webpack最新版本了

在这里我们直接进入正题,怎么使用vue-cli搭建vue的开发环境

在这里我们需要全局安装vue-cli

在git里执行npm install vue-cli -g  安装vue命令环境

执行vue --verson查看是否安装成功,

显示vue的版本,就是安装成功了

这样就是全局安装了

现在我们再命令行输入vue init webpack-simple<模板名,就是你的项目的名称>,

在这里我们用webpack-simple搭建,因为他没有严格的规范,相对于大多数程序员来说比较好,他与webpack的区别在这里我就不细说了,如果需要的话大家可以在下面留言,我们给大家分享

在这里我的项目名称为myvue

所以我执行vue init webpack-simple myvue

桌面会有一个myvue的文件夹

我们执行cd myvue进入到我们的项目下

会发现文件夹下会有这些文件,这就是vue-cli自动为我们搭建的环境了

我们执行npm install

这时候我们需要等待一小会,npm在为我们下载基于node的一些文件,

然后你会发现多了一个node——modules文件,里面是node的一些模块

然后我们再命令行执行npm run dev

vue自动打开了浏览器,运行了此vue项目

这样,我们使用vue-cli搭建vue的开发环境就算成功了,大家有没有学会呢?

时间: 2024-10-06 13:08:37

使用vue-cli+webpack搭建vue开发环境的相关文章

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

使用Webpack搭建React开发环境

1. 安装Node.js Webpack实际是用Node.js写的,所以要先安装Node.js环境.而且Node.js中集成了NPM包管理,我们在后面用到的很多模块都需要使用NPM下载. 首先进入Node.js的官网,选择对应系统下载安装包,对于 windows 用户,直接下载安装包安装即可,如果是 Macos 用户,推荐使用 brew 进行安装.Node.js有很多版本,包括稳定版和开发版,不同的项目需要的Node.js版本不同,推荐大家安装 8.x 以上的版本. 2. 安装Webpack 在

搭建 webpack、react 开发环境(一)

基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.less 等转换成一个静态文件,减少了页面的请求. React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,它是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).由于拥有较高的性能,代码逻辑非常简单,所以

Ubuntu搭建Android开发环境

前言 因为迁移到新的笔记本,所以Android开发环境需要重新配置了,android官网有配置教程,我正好回顾一遍 配置Java环境 下载jdk,官网地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html?ssSourceSiteId=otnjp, 我下载的是jdk-7u60-linux-i586.tar.gz,适合于Ubuntu 64bit操作系统版本. 解压JDK打包文件: tar -zxvf jdk-7u6

CentOS 7快速搭建Nodejs开发环境

Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.学习Nodejs首先需要会安装环境.这里我介绍如何在CentOS7快速搭建Nodejs开发环境. 工具/原料 CentOS 7 Nodejs 通过NVM安装 1 NVM(Node version manager)顾名思义,就是Node.js的版本管理软件,可以轻松的在Node.js各个版本间切换,项目源码在GitHub: 如果你想长期做 node

Eclipse+ADT+Android SDK 搭建安卓开发环境

要求 必备知识 windows 7 基本操作. 运行环境 windows 7 下载地址 环境下载 最近开接触Android(安卓)嵌入式开发,首要问题是搭建Andoid开发环境,由于本人用的是windows7的笔记本,也就只能到Windows中搭建Android 开发环境了! 就搭建环境都花了比较长的时间, 在各种版本之间折腾了比较久的时间, 装好后SDK包更新又是一个比较大的麻烦(天朝的网络大家懂的--).下面把我的安装过程和经验分享个大家!! 安装JDK 这里可以参考我之前写的一篇关于安装J

ActiveReports 9实战教程(1): 手把手搭建好开发环境Visual Studio 2013 社区版

ActiveReports9刚刚公布3天.微软就公布了 Visual Studio Community 2013 开发环境. Visual Studio Community 2013 提供完整功能的 IDE ,可开发 Windows.Android 和 iOS 应用.支持:C++, Python, HTML5, JavaScript, 和 C#,VB, F# 语言的开发.提供设计器.编辑器.调试器和诊断工具. 最牛逼的在于你全然能够免费使用该工具: 能够正大光明的免费使用visual studi

搭建Andriod开发环境

上一篇文章中总结了Andriod系统架构以及系统移植要点,为了进行Andriod系统移植,需要搭建相应开发环境,包括:JDK.SDK(adt).NDK(cdt)以及arm-Linux交叉编译环境等.我的平台以Linux虚拟机为背景,以下为详细步骤: JDK安装: 可以先下载安装再配置环境变量,或者直接在Terminal下执行以下代码一次性完成: # add-apt-respository "deb http://archive.canonical.com/ lucid partner" # ap

搭建Android开发环境

通过学习Android系统基本构架和Android移植的工作后,我们就要学习如何搭建Android开发环境了. 搭建Android底层开发环境,主要包括:Android应用程序开发环境.Android NDK开发环境.交叉编译环境. 底层环境的开发,需要配置Linux的驱动开发环境,Android应用程序和Android NDK的开发环境,还需要辅助工具测试Linux驱动及调试开发板,本书作者建议使用Ubuntu Linux10.04或以上版本作为Linux驱动的平台.底层环境开发需要的工具有:

Struts2 + Spring 学习(一)搭建struts开发环境

·为Web应用增加Struts2支持 1. 登陆struts2官网下载struts2的最新版,本文所用的是Struts 2.3.16.2 我们所下载的压缩包内内容应给如下 其中,apps包含了struts2的实例应用,docs包含了struts2的相关文档,lib包含了Struts2框架的核心类库以及struts2的第三方插件类库,src包含了struc包含了struts2框架的全部源码. 2. 在Eclipse新建Web工程,将是所用到的类库放到WEB-INF/路径下 3. 编辑Web应用的w