详解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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
小程序自定义轮播图圆点组件
Jun 25 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
ASP知识讲座四
2006/10/09 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
继续学习javascript闭包
2015/12/03 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现单词翻译功能
2017/06/06 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
学生自我评价范文
2014/02/02 职场文书
保密普查工作实施方案
2014/02/25 职场文书
家长学校工作方案
2014/05/07 职场文书
大跃进口号
2014/06/16 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
化工见习报告范文
2014/10/31 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书