vue cli 3.0 使用全过程解析


Posted in Javascript onJune 14, 2018

首先在使用 vue create my-project 创建项目的时候要选择使用 css 预处理器。

安装 vue-cli

首先使用 npm 安装 vue-cli v3.0。

npm install -g @vue/cli

安装完成后使用 vue -V 查看版本号,如果显示版本号说明安装完成。

创建项目

vue-cli v3.0 创建项目的命令与 2.0 有所不同。3.0 创建项目的命令为:

vue create test-project

创建过程中首先选择创建的模式,是采用默认配置,还是自定义配置:

vue cli 3.0 使用全过程解析 

通过上下箭头进行选择。window 默认 cmd 可能不支持箭头上下选择,建议下载其他 shell 工具。

建议采用 Mannual select features 自定义模式。这样可以自主选择需要的插件。

因为我之前创建过一次,所以创建了一个命名为 walle 的模板,下次创建的时候可以直接按照上次的模板进行创建。

选择自定义模式后可以自由选择想要在项目中使用的插件,用空格键选中。

vue cli 3.0 使用全过程解析 

如果选择了 CSS Pre-processors (CSS预处理器), 则接下来会让你选择预处理器的类型。

vue cli 3.0 使用全过程解析 

我选择了相对比较熟悉的 SCSS/SASS 预处理器。这样就可以在项目中使用 SCSS 语法和 SASS 语法了。关于 如何在项目中使用 SCSS/SASS 请看我的另一篇。

接下来会让你选择 lint 的模式,也就是检测代码的规则。

vue cli 3.0 使用全过程解析 

选择每次保存时进行代码规则校验。

vue cli 3.0 使用全过程解析 

选择配置文件的集成方式,是配置在独立文件中,还是全都配置在 package.json 文件中。因为在独立文件中比较容易看,所以建议选择使用独立文件。

vue cli 3.0 使用全过程解析 

最后就是询问你是否将此次的配置生成一个模板,下次直接之后模板配置直接生成项目了。

vue cli 3.0 使用全过程解析 

确定后就开始了漫长的项目生成之旅了。(第一次使用 vue-cli 进行项目生成可能会卡主,一直不动,这时候按一下 enter 键项目就能继续生成了)

总结

以上所述是小编给大家介绍的vue cli 3.0 使用全过程解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
AngularJS快速入门
Apr 02 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JS字符串常用操作方法实例小结
Jun 24 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
jQuery实现列表的增加和删除功能
Jun 14 #jQuery
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 #Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 #Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 #Javascript
vue中如何让子组件修改父组件数据
Jun 14 #Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 #Javascript
MVVM框架下实现分页功能示例
Jun 14 #Javascript
You might like
PHP form 表单传参明细研究
2009/07/17 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
浅谈javascript回调函数
2014/12/07 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
Python2随机数列生成器简单实例
2017/09/04 Python
Django admin美化插件suit使用示例
2017/12/12 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
Django REST framework视图的用法
2019/01/16 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
投资意向书范本
2014/04/01 职场文书
教师职位说明书
2014/07/29 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
党员承诺书格式范文
2015/04/28 职场文书
干部考核工作总结
2015/08/12 职场文书
如何拟写通知正文?
2019/04/02 职场文书