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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
多个iframe自动调整大小的问题
Sep 18 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
node实现的爬虫功能示例
May 04 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
原生js实现随机点名功能
Nov 05 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JS验证码实现代码
2017/09/14 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
协议书的格式
2014/04/23 职场文书
工作建议书范文
2014/05/13 职场文书
求职自我评价怎么写
2015/03/09 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android