详解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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 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
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python ellipsis 的用法详解
2020/11/20 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
超市采购员岗位职责
2014/02/01 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
运动会演讲稿50字
2014/08/25 职场文书
员工离职通知函
2015/04/25 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Golang: 内建容器的用法
2021/05/05 Golang
详解Spring事件发布与监听机制
2021/06/30 Java/Android
图神经网络GNN算法
2022/05/11 Python