vue-cli3脚手架的配置及使用教程


Posted in Javascript onAugust 28, 2018

这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具。
  • 可升级;
  • 基于 webpack 构建,并带有合理的默认配置;
  • 可以通过项目内的配置文件进行配置;
  • 可以通过插件进行扩展。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject

vue-cli3官网帮我们概述了vue-cli3的一些特点。个人在使用vue-cli3的感受中 零配置、可升级 2个特点确实很不错。

如何安装vue-cli3呢?

首先,你要有一个nodejs环境

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g yarn global remove vue-cli 卸载它。

假设你已有了nodejs环境,你可以通过下面指令安装vue-cli3的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。(例如 vue --version)

接下来就是创建一个vue的项目了,使用下面命令:

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

vue-cli3脚手架的配置及使用教程

在多选时,空格代表选中,enter代表进入下一个配置项

且你手动选择的配置项还会存入到你电脑的 ~/.vuerc 文件中,这样子你下次创建vue项目的时候,可以选择你之前手动配置的配置,这点vue cli3做得很人性化哦!点赞!

上面的配置选择完之后,一个简单的vue项目就创建成功了。这个时候你在命令行cd hello-world,进入到hello-world项目根路径下,命令行敲下npm run serve,项目就开始跑起来啦。

再讲一下创建项目后的 目录层次吧,接图:

vue-cli3脚手架的配置及使用教程

一个一个来:

  • public目录放置ico以及你的index.html。这个目录博主我没加过其他文件,让她生让她生让她生~~~;
  • src这个目录不得了了,这个是我们开发vue项目的重点目录所在。

1.assets目录:

vue-cli3脚手架的配置及使用教程

放置静态文件,例如:图片,js,svg的js等等啊,这个目录下的文件在生产环境下会被webpack copy
2.components目录:放置公用vue组件页面
3.styles目录:博主新增,放置重写reset.css以及阿里矢量图字体iconfont.css用
4.views目录:博主用作放大模块。登录页,首页,注册页等等。

不知各位童鞋有没有发现博主比你们多了一个vue.config.js文件木有,这个文件更不得了啦。我们前端独立开发有个跨域问题,之前vue-cli2的proxy-table等配置在vue-cli3中哪里配置呢?

// vue.config.js
module.exports = {
  // 选项...
  baseUrl:"./",
  outputDir:"dist",
  assetsDir:"assets",
  indexPath:"index.html",
  filenameHashing:true,
  pages:undefined,
  lintOnSave:true,
  runtimeCompiler:false,
  transpileDependencies:[],
  productionSourceMap:false,
  crossorigin:undefined,
  integrity:false,
  devServer:{//代理
    port:8086,
    proxy:'http://192.168.255.201:8082'
  }
}

总结

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

Javascript 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
微信小程序多音频播放进度条问题
Aug 28 #Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 #Javascript
vue表单自定义校验规则介绍
Aug 28 #Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 #Javascript
You might like
PHP如何实现跨域
2016/05/30 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
详解JS函数重载
2014/12/04 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
python根据出生日期返回年龄的方法
2015/03/26 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python3爬虫全国地址信息
2019/01/05 Python
python读写配置文件操作示例
2019/07/03 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
高二政治教学反思
2014/02/01 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
求职简历自荐信
2014/06/18 职场文书