详解vue-cli3使用

(编辑：jimmy 日期: 2025/10/27 浏览：3 次 )

近日,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

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

然后就是安装依赖

目录如下

没有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'
  "color: #ff0000">其他



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

  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：react实现换肤功能的示例代码
下一篇：详解angular部署到iis出现404解决方案