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 相关文章推荐
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
JS实现拖动示例代码
Nov 01 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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中cookie的作用域
2008/03/27 PHP
php简单提示框alert封装函数
2010/08/08 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
党员岗位承诺书
2014/03/25 职场文书
公开承诺书格式
2014/05/21 职场文书
商场父亲节活动方案
2014/08/27 职场文书
龙门石窟导游词
2015/02/02 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript