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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
详细分析Node.js 多进程
Jun 22 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
基于python 凸包问题的解决
2020/04/16 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python实现简单遗传算法
2020/09/18 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
大学生个人自我鉴定
2013/12/03 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS