近日,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 又有几项

只防止出错

airbnb 配置

标准配置

eslint +prettier

还有一项是把配置文件如babel,postCss eslint 放单独文件,还是放package.json里,当然单独了

最后有个保存配置,以后用

然后就是安装依赖

目录如下

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

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

// vue.config.jsmodule.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://mon', '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//错误 } }}

其他

可使用vue serve和vue build 对单个vue文件快速开发

vue ui 图形化界面创建管理项目

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