摘要:当使用只有入口的字符串格式时,模板会被推导为并且如果找不到的话,就回退到。配置这里的选项会传递给这里的选项会传递给警告错误其他可使用和对单个文件快速开发图形化界面创建管理项目
近日,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 图形化界面创建管理项目
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96920.html
摘要:慢慢地,关于的原创学习文章已经写了多篇了会一直放出来,目前篇,因此做一个合集,献给那些对新版本脚手架使用和背后设计感兴趣的同学,都是一步一步去看源码,也给官方提了几次,合进去了几个原创不易,欢迎大家互相转发,期望大家一起快速过度到版本目录 慢慢地,关于 Vue CLI 3 的原创学习文章已经写了 20 多篇了(会一直放出来,目前 23 篇), 因此做一个合集,献给那些对新版本脚手架使用...
摘要:前言都到了,所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了,导致正确的不能用。打开终端,切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完,再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....
电脑之前安装的vue-cli版本太低,现在要改换成最新版本,那么就需要先将旧版本卸载,安装新版本。vue-cli:vue3.0之前版本使用此名称 @vue/cli:vue3.0之后版本包括3.0版本使用此名称 以下列举npm和yarn指令的方式: 卸载指令: //卸载3.0之前的版本 npmuninstall-gvue-cli yarnglobalremovevue-cli ...
摘要:可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行,可以写成可以写成看到这个画面,安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面(英语:command-li...
摘要:可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行,可以写成可以写成看到这个画面,安装完成了。 初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架 我通常使用 cli 生成项目骨架再在之基础上进行个人修改。 什么是 CLI 命令行界面(英语:command-li...
摘要:前言通过搭建交互式的项目脚手架。通过快速开始零配置原型开发。与此同时,它也为每个工具提供了调整配置的灵活性,无需。例如,如果你的应用被部署在,则设置为。我们将在下篇文章里详细讲述的使用官方文档 前言 通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-se...
阅读 2506·2023-04-25 17:37
阅读 1184·2021-11-24 10:29
阅读 3694·2021-09-09 11:57
阅读 689·2021-08-10 09:41
阅读 2240·2019-08-30 15:55
阅读 2806·2019-08-30 15:54
阅读 1936·2019-08-30 15:53
阅读 893·2019-08-30 15:43