资讯专栏INFORMATION COLUMN

vue-cli3.0安装与配置

zilu / 988人阅读

摘要:安装与配置最近公司要开新项目,用配置,让我搞一搞,做个记录。最好自己去官网过一遍的文档安装完成后检测一下是否安装成功,如下图展示。显示以上就安装成功。第一个默认配置只会安装和,其它的需要自己配置,不建议选,这里我们选择第二个手动配置。

vue-cli3.0安装与配置

最近公司要开新项目,用vue-cli3.0配置,让我搞一搞,做个记录。

安装

首先你要升级到cli3.0,命令如下。(最好自己去官网过一遍cli3.0的文档)

npm install -g @vue/cli-service-global

安装完成后检测一下是否安装成功,如下图展示。


显示3.0以上就安装成功。

创建一个项目
vue create hello-world

创建过程中,会让你选一系列的配置,键盘上下键可以切换,空格键可以选取,回车键确认。下面我一一细说。


第一个默认配置只会安装babel和eslint,其它的需要自己配置,不建议选,这里我们选择第二个手动配置。按回车(键盘上下键可以上下切换选择)


从上往下分别为(注:空格键可以选定)

babel:用来将es6的代码编译为es5
typescript:javascript的一个超集,我这里没选
Progressive Web App (PWA) Support: pwa技术
Router:路由
Vuex:全局状态管理
CSS Pre-processors: css预处理
Linter / Formatter: 风格检查器
Unit Testing:单元测试
E2E Testing:e2e测试

这里选择可以根据个人需求来进行选择

下一步,选择eslint的风格,这里不多啰嗦,直接选择第三个standard(应为前几个我也不了解-_-)

这里是问你,要在保存时设置lint还是在提交是设置lint,我这里设置保存时lint(第一个)

这里是问你将babel,eslint,postcss这些配置放在那里

In dedicated config files:放在相应的文件中
In package.json:放在package.json中


这里是问你是否保存预设,当你选择是的时候,下次你在执行vue create xxx的时候,会默认选择这些设置,建议选否

走到这一步就配置完成,等待安装完成。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102858.html

相关文章

  • (小白篇)vue-cli3.0创建项目+引入element-ui

    摘要:在年月份发布了版本,经过重构之后,可以说是一个船心版本在项目都落地之后,就想升级一下版本,尝一尝带来的舒适,也是为后面项目的开展做一个准备。选了之后会询问是否开启模式,以及选择预处理器,这里根据个人情况选用。 vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本!在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个...

    avwu 评论0 收藏0
  • vue-cli 3.0

    摘要:配置环境变量参考打包后项目的启动发生了变化,之前可以直接打开,现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题 首先这次使用的vue脚手架为vue-cli 3.0,它跟之前的脚手架改变了很多,这里我也没去细细的研究,也只懂得了最基本的用法,参考: vue-cli 3 地址:http...

    April 评论0 收藏0
  • vue-cli 3.0

    摘要:配置环境变量参考打包后项目的启动发生了变化,之前可以直接打开,现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题 首先这次使用的vue脚手架为vue-cli 3.0,它跟之前的脚手架改变了很多,这里我也没去细细的研究,也只懂得了最基本的用法,参考: vue-cli 3 地址:http...

    mengera88 评论0 收藏0
  • vue-cli 3.0 源码分析

    摘要:写在前面其实最开始不是特意来研究的源码,只是想了解下的命令,如果想要了解命令的话,那么绕不开写的。通过分析发现与相比,变化太大了,通过引入插件系统,可以让开发者利用其暴露的对项目进行扩展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 写在前面 其实最开始不是特意来研究 vue-cli 的源码,只是想了解下 n...

    yiliang 评论0 收藏0
  • vue-cli@3.0和之前版本的差异

    摘要:记使用方式和之前版本的差异的使用下载和安装项目生成的目录结构以上,目前版本的使用下载和安装项目生成的目录结构新的目录结构,隐藏了配置文件,封装了细节对比个区别区别下载包的包命变化。貌似是之前的版本有点问题 记vue-cli@3.0使用方式和之前版本的差异 @2.9.3的使用 1.下载vue-cli和安装项目 cnpm i -g vue-cli#2.9.3 vue init webpa...

    wow_worktile 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<