详解vue-cli3使用


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

  : 'http://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//错误

  }

 }





}



其他





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

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

  



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