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

时间:2021-08-01 00:13:00

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

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

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

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

git用的是linux命令

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

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

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

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

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

然后我们执行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+webpack搭建vue开发环境

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

我们执行npm install

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

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

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

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

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

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

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

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

  1. 从零开始使用 Webpack 搭建 Vue3 开发环境

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 ...

  2. VUE依赖webpack分别给开发环境和生产环境配置不同的常量值并在项目中动态引用

    当在开发和产品上线的时候,我们经常会遇到在同一个地方由于环境的不同而地址也不同的情况,这时候如果在代码中将该地址写死,那势必会造成上线时手动改动,多人开发及多处使用该地址难以维护等一系列问题,为避免这 ...

  3. &lbrack;转&rsqb;Vue CLI 3搭建vue&plus;vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  4. Vue CLI 3搭建vue&plus;vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  5. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  6. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  7. 使用webpack搭建react开发环境

    安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...

  8. webpack搭建前端开发环境

    webpack的版本已经是来到了4.0,口号是无配置就可以使用webpack,当然是使用一些基本的功能 1.安装以下webpack的一些必须npm包 npm install webpack npm i ...

  9. 用webpack搭建react开发环境

    安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...

  10. 从无到有实现搭建vue&plus;ElementUI&plus;less&plus;ES6的开发环境并进行简单的开发的项目

    项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译.压缩和打包,并疏通 ...

随机推荐

  1. How to build a NFS Service

    NFS网络文件系统的服务的配置 1 Preparation Three Linux virtual machines one: to be NFS Service the other two: NFS ...

  2. TypeScript - 基本类型系统

    对于程序来说我们需要基本的数据单元,如:numbers, strings, structures, boolean 等数据结构.在TypeScript中我们支持很多你所期望在JavaScript中所拥 ...

  3. python初识生成器 迭代器

    生成器 带有 yield 的函数在 Python 中被称之为 generator(生成器) def xragns(): #定义函数生成器 print('小伙') yield ('好') #加上yiel ...

  4. Linux基础2

    命令格式命令的类型:1.内部命令 linux系统使用的shell提供.2.外部命令 安装第三方软件才会. type 命令名 查命令的类型 | 把前边命令的输出作为后边命令的输入 管道 grep 对数据 ...

  5. C&num; 中DataGridView 绑定List&lt&semi;T&gt&semi;做数据源的操作问题

    若想将 List<T>作为DataGridView的数据源,然后后续还想继续操作的话,需要将List<T>赋值给BindingList对象, 然后直接将BindingList赋 ...

  6. 绝对好评的淘宝购物导航:baiso&period;uz&period;taobao&period;com

    绝对好评的淘宝购物导航:baiso.uz.taobao.com 绝对好评的淘宝购物导航--百搜:http://baiso.uz.taobao.com

  7. 编译安装HTTPD 2&period;4&period;9版本

    编译安装HTTPD 2.4.9版本    服务脚本:/etc/rc.d/init.d/httpd    脚本配置文件路径:/etc/sysconfig/httpd    运行目录:/etc/httpd ...

  8. 通知栏发送消息Notification(可以使用自定义的布局)

    一个简单的应用场景:假如用户打开Activity以后,按Home键,此时Activity 进入-> onPause() -> onStop() 不可见.代码在此时机发送一个Notifica ...

  9. &num;maven系列(4)-maven插件的介绍

    1. 简介 在Maven设计中,实际的任务都是交由插件完成的,这种思想和设计模式中的模板方法非常类似,模板方法模式在父类中定义算法的整体结构,子类可以通过实现或者重写父类的方法来控制实际的行为,这样既 ...

  10. mysql之字符集与校对集

    一.字符集 1.mysql的字符集设置非常灵活 可以设置服务器默认字符集: 数据库默认字符集: 表默认字符集: 列字符集: 如果某一级别没有指定字符集,则继承上一级. 查看所有字符集语句:show c ...