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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
跟我学习javascript的循环
Nov 18 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
js实现带积分弹球小游戏
Jul 21 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维护文件系统
2006/10/09 PHP
PHP设计聊天室步步通
2006/10/09 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python 开发Activex组件方法
2009/11/08 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python中super函数的用法
2017/11/17 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python requests指定出口ip的例子
2019/07/25 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
保时捷设计:Porsche Design
2019/03/30 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
力学专业求职信
2014/07/23 职场文书
中层干部考核评语
2015/01/04 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
使用python创建股票的时间序列可视化分析
2022/03/03 Python
SQL中的连接查询详解
2022/06/21 SQL Server