详解vue-cli3使用


Posted in Javascript onAugust 14, 2018

近日,Vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下.

文档地址vue-cli

简介

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

使用

<!-- 安装 -->
npm install -g @vue/cli
<!-- 创建项目 -->
npm create new-cli

然后就是配置,可默认(babel,eslint),自定义

自定义有 babel ts pwa vue-router vuex css预处理 以及Linter/Formatter,unit testing e2e testing

  1. 选了router 会再次选是否用history模式
  2. 在这里选了css预处理又会让选 less scss stylus
  3. eslint 又有几项
    1. 只防止出错
    2. airbnb 配置
    3. 标准配置
    4. eslint +prettier
  4. 还有一项是把配置文件如babel,postCss eslint 放单独文件,还是放package.json里,当然单独了
  5. 最后有个保存配置,以后用

然后就是安装依赖

目录如下

详解vue-cli3使用

没有cli2版本的build和config,多个babel.config.js

官网介绍是可以新建个vue.config.js进行相关webpack配置,比如

// vue.config.js
module.exports = {
 configureWebpack: {
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 },
 //loader
  chainWebpack: config => {
  config.module
   .rule('vue')
   .use('vue-loader')
    .loader('vue-loader')
    .tap(options => {
     // 修改它的选项...loader
     return options
    })
 },
 //生产环境关闭map
 productionSourceMap:false,
 //基本URL
 baseUrl: process.env.NODE_ENV === 'production'
  ? 'http://www.baidu.com'
  : 'https://www.google.com',
 outputDir:'dist', //build 目录
 assetsDir:'',//asset目录
 indexPath:'index.html',//指定index.html 路径
 filenameHashing:true,//文件名带hash
// multi-page模式,每个“page”应该有一个对应的 JavaScript 入口文件
 pages: {
  index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板来源
   template: 'public/index.html',
   // 在 dist/index.html 的输出
   filename: 'index.html',
   // 当使用 title 选项时,
   // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
   title: 'Index Page',
   // 在这个页面中包含的块,默认情况下会包含
   // 提取出来的通用 chunk 和 vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  // 当使用只有入口的字符串格式时,
  // 模板会被推导为 `public/subpage.html`
  // 并且如果找不到的话,就回退到 `public/index.html`。
  // 输出文件名会被推导为 `subpage.html`。
  subpage: 'src/subpage/main.js'
 },
 //css配置
 css: {
  sourceMap:false,//css source map
  loaderOptions: {
   css: {
    // 这里的选项会传递给 css-loader
   },
   postcss: {
    // 这里的选项会传递给 postcss-loader
   }
  }
 },
 //dev server
 devServer: {
  host:127.0.0.1
  port:8000,
  proxy: 'http://localhost:4000',
  overlay: {
   warnings: true,//警告
   errors: true//错误
  }
 }


}

其他

  1. 可使用vue serve和vue build 对单个vue文件快速开发
  2. vue ui 图形化界面创建管理项目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
详解angular部署到iis出现404解决方案
Aug 14 #Javascript
学习React中ref的两个demo示例
Aug 14 #Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 #Javascript
浅析Vue实例以及生命周期
Aug 14 #Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 #Javascript
详解angular应用容器化部署
Aug 14 #Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 #Javascript
You might like
php curl_init函数用法
2014/01/31 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python实现TCP通信的示例代码
2019/09/09 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
社区党员先进事迹
2014/01/22 职场文书
服装创业计划书范文
2014/02/05 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
学习方法演讲稿
2014/05/10 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
店铺转让协议书
2015/01/29 职场文书
付款证明模板
2015/06/19 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js