vue cli 3.0 使用全过程解析

 更新时间:2018年06月14日 17:20:50   作者:沈鑫Real  
这篇文章主要介绍了vue-cli 3.0 使用全过程,本文通过项目实例相结合的形式给大家介绍的非常详细,需要的朋友可以参考下

首先在使用 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

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

 

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

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

总结

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

相关文章

  • 详解Vue ElementUI手动上传excel文件到服务器

    详解Vue ElementUI手动上传excel文件到服务器

    这篇文章主要介绍了详解Vue ElementUI手动上传excel文件到服务器,对ElementUI感兴趣的同学,可以参考下
    2021-05-05
  • Vue实现当前页面刷新的七种方法总结

    Vue实现当前页面刷新的七种方法总结

    大家在vue项目中当删除或者增加一条记录的时候希望当前页面可以重新刷新,但是vue框架自带的router是不支持刷新当前页面功能,所以本文就给大家分享了七种vue实现当前页面刷新的方法,需要的朋友可以参考下
    2023-07-07
  • Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享,数据缓存等等,下面这篇文章主要给大家介绍了关于Vuex(多组件数据共享的Vue插件)搭建与使用的相关资料,需要的朋友可以参考下
    2022-10-10
  • 12 种使用Vue 的最佳做法

    12 种使用Vue 的最佳做法

    这篇文章主要介绍了12 种使用Vue 的最佳做法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue2.0 如何把子组件的数据传给父组件(推荐)

    vue2.0 如何把子组件的数据传给父组件(推荐)

    这篇文章主要介绍了vue2.0 如何把子组件的数据传给父组件,需要的朋友可以参考下
    2018-01-01
  • 解决element-ui中下拉菜单子选项click事件不触发的问题

    解决element-ui中下拉菜单子选项click事件不触发的问题

    今天小编就为大家分享一篇解决element-ui中下拉菜单子选项click事件不触发的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue-element-admin项目导入和导出的实现

    vue-element-admin项目导入和导出的实现

    组件是Vue.js最强大的功能,这篇文章主要介绍了vue-element-admin项目导入和导出的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 简单学习vue指令directive

    简单学习vue指令directive

    这篇文章主要和大家一起简单学习一下vue指令:directive,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue如何修改data中的obj数据的属性

    vue如何修改data中的obj数据的属性

    这篇文章主要介绍了vue如何修改data中的obj数据的属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue分片上传视频并转换为m3u8文件播放的实现示例

    vue分片上传视频并转换为m3u8文件播放的实现示例

    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,本文主要介绍了vue分片上传视频并转换为m3u8文件播放的实现示例,感兴趣的可以了解一下
    2023-11-11

最新评论