详解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 利用Cookie记录用户登录信息
Dec 08 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
实例教学如何写vue插件
Nov 30 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
深入学习JavaScript中的bom
May 27 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
详解vue v-model
Aug 31 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+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
js制作提示框插件
2020/12/24 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python将字符串转换成数组的方法
2015/04/29 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
numpy排序与集合运算用法示例
2017/12/15 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Numpy数组的广播机制的实现
2020/11/03 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
汽车运用工程毕业生自荐信
2013/10/29 职场文书
大一自我鉴定范文
2013/12/27 职场文书
高二历史教学反思
2014/01/25 职场文书
演讲稿的写法
2014/05/19 职场文书
研究生导师评语
2014/12/31 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
详解Vue的列表渲染
2021/11/20 Vue.js
《废话连篇——致新手》——chinapizza
2022/04/05 无线电