vuecli 编译后部署_vue-cli基础配置及webpack配置修改的完整步骤

本文详细介绍了如何使用Vue CLI创建项目,包括手动选择配置项、安装与启动项目、生产环境编译与部署。同时讲解了如何通过vue.config.js修改Webpack配置,如publicPath、assetsDir、sourceMap以及配置图片加载和代理。最后总结了Vue CLI的基础配置和Webpack修改的步骤。
摘要由CSDN通过智能技术生成

脚手架

脚手架帮我们帮我们把 webpack 等相关的配置都处理好,我们只需要基于脚手架快速构建一个项目即可(项目中一定包含webpack的相关配置)

vue脚手架  vue-cli

我们使用任何东西第一步都是安装

1.安装脚手架(一般安装在全局)

//=>用npm安装

$npm install @vue/cli -g

//=>用yarn安装

$yarn global add @vue/cli

安装成功后,全局环境会生成 $vue 的可执行命令,我们可以基于 $vue --version 来查看版本号,看是否安装成功

2.创建工程化项目

$vue create [项目名称](要遵循npm包的名称规范:数字或者小写字母)

第一项是我之前创建保存的配置,如果是第一次创建就有第二项和第三项

default (babel,eslint) :选择默认配置项(后期自己安装需要的模块和进行配置)

Manually select features :手动选择配置项

如果选择默认这篇文章就没有意义了,我们选择手动选择配置项

这里选择脚手架里的webpack配置,空格键是选择,我选择了以上这些项,如果有需要自行添减

babel(babel-preset-vue-app):babel-preset-env最新的ECMAScript功能、转换Vue JSX转换generator和async/await等

Route

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值