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

 更新时间:2017年12月22日 15:20:42   作者:我叫大王来巡山   我要评论
这篇文章主要介绍了使用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的开发环境就算成功了,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家的支持!

相关文章

  • vue实现微信分享链接添加动态参数的方法

    vue实现微信分享链接添加动态参数的方法

    这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • 解决vue-router中的query动态传参问题

    解决vue-router中的query动态传参问题

    下面小编就为大家分享一篇解决vue-router中的query动态传参问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现鼠标移过出现下拉二级菜单功能

    vue实现鼠标移过出现下拉二级菜单功能

    这篇文章主要介绍了vue实现鼠标移过出现下拉二级菜单功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • Vue+Element实现表格编辑、删除、以及新增行的最优方法

    Vue+Element实现表格编辑、删除、以及新增行的最优方法

    这篇文章主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 实现一个简单的vue无限加载指令方法

    实现一个简单的vue无限加载指令方法

    vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简单的指令。
    2017-01-01
  • element-ui 远程搜索组件el-select在项目中组件化的实现代码

    element-ui 远程搜索组件el-select在项目中组件化的实现代码

    这篇文章主要介绍了element-ui 远程搜索组件el-select在项目中组件化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Vue入门之数据绑定(小结)

    Vue入门之数据绑定(小结)

    本篇文章主要介绍了探索Vue高阶组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue中使用protobuf的过程记录

    vue中使用protobuf的过程记录

    由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的。下面小编给大家分享vue中使用protobuf的过程记录,需要的朋友参考下吧
    2018-10-10
  • Vue 实现树形视图数据功能

    Vue 实现树形视图数据功能

    这篇文章主要介绍了Vue 实现树形视图数据功能,利用简单的树形视图实现的,在实现过程中熟悉了组件的递归使用,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • Vue-Router实现组件间跳转的三种方法

    Vue-Router实现组件间跳转的三种方法

    这篇文章主要为大家详细介绍了Vue-Router来实现组件间跳转的三种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论