欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解vue-cli3使用

程序员文章站 2023-10-31 12:57:58
近日,vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下. 文档地址 简介 vue cli 是一个基于 vue.js 进行快...

近日,vue作者尤雨溪发布了正式的vue cli 3.0,基于webpack4,赶紧试一下.

文档地址

简介

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 图形化界面创建管理项目

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