vue/cli 3使用

April 发布于2019-08-23 11:01 / 754人阅读

摘要：当使用只有入口的字符串格式时，模板会被推导为并且如果找不到的话，就回退到。配置这里的选项会传递给这里的选项会传递给警告错误其他可使用和对单个文件快速开发图形化界面创建管理项目

近日,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"
    : "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 标签需要是 <%= htmlWebpackPlugin.options.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 图形化界面创建管理项目

idc机房托管专线服务买3送3 apache maven 3.0.3 3.5 3.X

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96920.html

[全网最全的 Vue CLI 3 原创合集] 你要的这里都有

摘要：慢慢地，关于的原创学习文章已经写了多篇了会一直放出来，目前篇，因此做一个合集，献给那些对新版本脚手架使用和背后设计感兴趣的同学，都是一步一步去看源码，也给官方提了几次，合进去了几个原创不易，欢迎大家互相转发，期望大家一起快速过度到版本目录慢慢地，关于 Vue CLI 3 的原创学习文章已经写了 20 多篇了（会一直放出来，目前 23 篇），因此做一个合集，献给那些对新版本脚手架使用...

phpmatt 2019-08-23 12:00 评论0 收藏0
vue-cli3.x 新特性及踩坑记

摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 评论0 收藏0
vue脚手架vue-cli的卸载与安装方式

　　电脑之前安装的vue-cli版本太低，现在要改换成最新版本，那么就需要先将旧版本卸载，安装新版本。vue-cli：vue3.0之前版本使用此名称　　@vue/cli：vue3.0之后版本包括3.0版本使用此名称　　以下列举npm和yarn指令的方式：　　卸载指令：　　//卸载3.0之前的版本　　npmuninstall-gvue-cli 　　yarnglobalremovevue-cli 　...

3403771864 2022-09-22 22:21 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

qieangel2013 2019-08-23 11:58 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

kel 2019-08-19 11:10 评论0 收藏0
vue-cli3脚手架的使用和相关配置

摘要：前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时，它也为每个工具提供了调整配置的灵活性，无需。例如，如果你的应用被部署在，则设置为。我们将在下篇文章里详细讲述的使用官方文档前言通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-se...

Sanchi 2019-08-26 10:22 评论0 收藏0