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 相关文章推荐
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
angular共享依赖的解决方案分享
Oct 15 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
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django框架中方法的访问和查找
2015/07/15 Python
Python制作数据导入导出工具
2015/07/31 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python中几种自动微分库解析
2019/08/29 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
银行门卫岗位职责
2013/12/29 职场文书
表决心的诗句大全
2014/03/11 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
离婚起诉状范本
2015/05/19 职场文书
公司食堂管理制度
2015/08/05 职场文书
趣味运动会口号
2015/12/24 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书